CSS: id - class - Praiskopedia

ID atributua

Orain arte ikusitako erregelek hautatzaileak adierazitako elementuei eragiten diete. HTML elementu bat hautatzeko, haren mota kontuan hartu gabe, id atributua erabil dezakegu. Atributu hori izen bat da, elementuaren identifikatzaile esklusibo bat, eta, beraz, dokumentuaren barruan elementu jakin bat aurkitzeko erabil dezakegu. id atributua erabiliz elementu bat erreferentziatzeko, hautagailuak atributuaren balioa jaso behar du, aurretik zenbakizko karakterea duela (#).

          
            #paragrafoa {
              font-size: 20px;
              }
          # karakterea medio egiten diogu erreferentzia id atributua duen elementuari.

Goiko erregela ID atributuak eta “mitestua” balioak identifikatutako elementuari bakarrik aplikatzen zaio, hurrengo dokumentuan jasotako p elementu gisa.

          
              <!DOCTYPE html>
              <html lang="eus">
              <head>
                  <title>Dokumentuaren izena</title>
                  <meta charset="utf-8">
                  <link rel="stylesheet" href="nireEstiloak.css">
              </head>
              <body>
                  <main>
                      <header>
                            <h1>WEB-GUNE-GINTZA</h1>
                            <p>Webguneetako xehetasunak ikasteko</p>
                      </header>
                      <section>
                          <p id="paragrafoa">Lehenengo paragrafoa...</p>
                          <p>Bigarren paragrafoa...</p>
                          <p>Hirugarren paragrafoa...</p>
                          <p>Laugarren paragrafoa...</p>
                      </section>
                  </main>
                  <footer>
                      <p><©>   Praiskopedia</p>
                  </footer>

              </body>
              </html>
          id atributuaren bidez p elementu bat identifikatzen (Lehenengo pragrafoa)

Prozedura honen abantaila da erreferentzia bat sortzen dugun bakoitzean gure CSS fitxategian ‘paragrafoa’ identifikatzaile medio, elementu horri baino ez zaio eragiten. Erreferentzia bitarteko hau oro har, egiturazko elementuekin erabiltzen da, hala nola section edo div. Bere espezifikotasuna dela eta, id atributua ere maiz erabiltzen da elementuak JavaScript-etik erreferentziatzeko, hurrengo kapituluetan ikusiko dugun bezala.

Frogak egiteko ‘frogalekua’

Estekak froga simpleak egiteko aproposa den aplikazio bat irekiko dizu elementuek zer-nolako itxura hartzen duten ikusteko, baina hor egindako frogak komeni da kode editorera eramatea eta bertan egiaztatzea gure nahiari hurbiltzen zaion egindakoa.

CLASS atributua

Estiloak esleitzeko id atributua erabili beharrean, gehienetan hobe izaten da class atributuarekin egitea. Atributu hori malguagoa da eta hainbat pertsonari esleitu dakizkioke dokumentu beraren barruko elementuak.

          
            .paragrafoa {
              font-size: 20px;
              }
          class atributuaren bidez egiten da erreferentzia

Elementu bat bere class atributua erabiliz erreferentziatzeko, hautagailuak aurretik puntu bat duen atributuaren balioa jaso behar du. Adibidez, goiko erregelak “paragrafoa” balioa duen class atributu bat duten elementu guztiei eragiten die, hurrengo adibidean bezala.

          
              <!DOCTYPE html>
              <html lang="eus">
              <head>
                  <title>Dokumentuaren izena</title>
                  <meta charset="utf-8">
                  <link rel="stylesheet" href="nireEstiloak.css">
              </head>
              <body>
                  <main>
                      <header>
                            <h1>WEB-GUNE-GINTZA</h1>
                            <p>Webguneetako xehetasunak ikasteko</p>
                      </header>
                      <section>
                          <p class="paragrafoa">Lehenengo paragrafoa...</p>
                          <p class="paragrafoa">Bigarren paragrafoa...</p>
                          <p>Hirugarren paragrafoa...</p>
                          <p>Laugarren paragrafoa...</p>
                      </section>
                  </main>
                  <footer>
                      <p><©>   Praiskopedia</p>
                  </footer>
              </body>
              </html>
          class atributuaren bidez p elementuak identifikatzen

Goian <section> nagusiaren barruko lehen bi lerroetako <p> elementuek class atributua eta “paragrafoa” balioa dauzkate. Dokumentuko hainbat elementuri erregela bera aplika dakiekeenez, 3-18 zerrendako erregelak eragiten die lehen bi elementu horiei. Bestalde, azken bi <p> elementuek ez dute class atributua barne hartzen eta, beraz, berezko estiloekin erakutsiko dira.

class atributuaren bidez esleitutako erregelei klase deitzen zaie. Elementu berari hainbat mota esleitu dakizkioke. Egin behar dugun gauza bakarra espazio batek bereizitako klaseen izenak adieraztea da (adibidez, class = “texto1 texto2”).

Motak ere esklusibotzat jo daitezke elementu-mota jakin baterako, elementuaren izena puntuaren aurretik adierazita.

            
              p.paragrafoa {
            font-size: 20px;
            }
            Klase bat p elementuentzat bakarrik deklaratzen

Goian, paragrafoa izeneko klasea aipatzen duen erregela bat sortu dugu, baina elementuetarako bakarrik <p>.

Arau horrek ez die eragingo class atributuan balio bera duten beste elementu batzuei.