CSS: izenak

Batzuetan, komeni da estilo guztiak kanpoko artxibo batean adieraztea eta, gero, artxibo hori behar duen dokumentu bakoitzetik kargatzea, baina mekanismo desberdinak ezartzera behartzen gaitu, CSS arauen eta horiek ukituko dituzten dokumentuko elementuen arteko erlazioa ezartzeko.

CSS erregela batek ukituko dituen elementuak hautatzeko hainbat metodo daude. Aurreko adibideetan elementuaren izena erabili dugu, baina id eta class atributuen balioak ere erabil ditzakegu elementu bakar bat edo elementu multzo bat erreferentziatzeko, baita konbinatzeko ere, hautatzaile espezifikoagoak eraikitzeko.

Izenak

Elementuaren izena hautatzaile gisa duen erregela batek dokumentuan aurkitutako mota horretako elementu guztiei eragiten die. Aurreko adibideetan p izena erabiltzen dugu elementuak aldatzeko <p>, baina izen hori alda dezakegu nahi dugun dokumentuan edozein elementurekin lan egiteko. Horren ordez span izena adierazten badugu, adibidez, testu guztiak < span> elementuen barruan aldatuko dira.

        
          span {
            font-size: 20px;
          }
        <span> elementua beren izenaren arabera erreferentziatzen.

Izen desberdinak dituzten elementuei estilo berberak esleitu nahi badizkiegu, izenak koma batez bereiz ditzakegu. Hurrengo adibidean, arauak dokumentuan aurkitutako <p> eta <span> elementu guztiei eragiten die.

          
            p, span {
              font-size: 20px;
            }
          Hautatzaile anitzeko arauak deklaratzen.

Halaber, elementu jakin baten barruan dauden elementuak bakarrik aipa ditzakegu, hautatzaileak espazio batez bereizita zerrendatuz. Hautagailu-mota horiei ondorengotza-hautatzaile esaten zaie, beste elementu batzuen barruko elementuei eragiten dietelako, hierarkian duten lekua kontuan hartu gabe.

          
            main p {
              font-size: 20px;
            }
          Hautatzaileak konbinatzen.

Goiko erregelak <p> elementu baten barruan <main> dauden elementuei bakarrik eragiten die, bai zuzeneko eduki gisa, bai beste elementu batzuetan txertatuta. Adibidez, hurrengo dokumentuak atal nagusi bat du, goiburu batekin eta atal gehigarri batekin. Bi elementuek <p> elementuak dituzte edukia irudikatzeko. Dokumentu honi 3-11 zerrendako araua aplikatzen badiogu, <p> elementu bakoitzaren barruko testua 20 pixeleko tamainarekin erakutsiko da, denak <main> elementuaren ondorengoak direlako.

          
              <!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>Lehenengo paragrafoa...</p>
                          <p>Bigarren paragrafoa...</p>
                          <p>Hirugarren paragrafoa...</p>
                          <p>Laugarren paragrafoa...</p>
                      </section>
                  </main>
                  <footer>
                      <p><©>   Praiskopedia</p>
                  </footer>

              </body>
              </html>

‘Hautatzaileak konbinatzen’ izendatu dugun erregelaren bitartez <main> elementuaren barruan dauden <p> elementuei bakarrik eragiten diegu.

Dokumentauren barrenean ipini dugun <footer> elementuaren barruko <p> elementuak, ez dira aldatuko, ezta <header> elementu barruko <p> ere.

CSSk baditu barne sintaxi osagarri hainbat hautatzaileei aukeraketa zehatzagoa egiten laguntzeko. Adibidez, > karakterea erabil dezakegu beste elementu baten seme zuzena den elementu bat aipatzeko.

> karakterea hautagailu

            
              section > p {
                font-size: 20px;
              }
             
> aplikatu da hautatzailea osatzeko.

> karaktereak adierazten du eskuinekoa dela eragina jasoko duen elementua aita ezkerreko elementua duenean. Goiko dokumentuko erregelak <section> elementuaren <p> elementu diren seme-alabak aldatzen ditu. Erregela hori dokumentuari aplikatzen diogunean, <header> elementukoak diren <p> elementuei ez die eragingo.

>Seme-alaben hautatzailea

+ karakterea hautagailu

+ karakterearekin, erreferentzia egiteko beste hautagailu bat sortzen da. Hautatzaile horrek aurretik beste elementu bat duen elementu bat aipatzen du. Biek elementu aita bera partekatu behar dute.

            
              h1 + p {
                font-size: 20px;
              }
              
+  hautatzailea aplikatuz

Goiko erregelak elementu bat <h1> egin eta berehala kokatzen diren <p> elementu guztiei eragiten die. Erregela hori gure dokumentuari aplikatzen badiogu, <p> elementua bakarrik aldatuko da goiburuaren barruan, aurretik <h1> elementu bat duen bakarra delako.

Alboko elementuaren hautatzailea

Aurreko hautatzaileak <p> elementuari bakarrik eragiten dio, zeina <h1> elementu baten ondoren kokatzen baita. Bi elementuen artean beste elementu bat jarriz gero, <p> elementua ez da aldatuko. CSSk beste elementu baten jarraian dauden elementu guztiei eragiten dien hautatzaile bat sortzeko ~ izaera barne hartzen du. Hautagailu hau aurrekoaren antzekoa da, baina eragindako elementua ez da lehenengo elementua izan eta berehala aurkitu behar.

~ karakterea hautagilu

Arau horrek aurkitutako elementu guztiei eragiten die, ez bakarrik lehenengoari.

            
              p ~ p {
                font-size: 20px;
              }
             
~  hautatzailea aplikatuz

Goiko erregelak beste elementu baten aurreko <p> elementu guztiei eragiten die.

Gure adibidean, <p> elementu guztiak aldatuko dira < section> elementuaren barruan, lehenengoa izan ezik, ez baitago <p> elementurik lehen elementuaren aurretik.

Anaiei eragiteko hautatzaile orokorra

Egin ezazu zuk zeuk: Sortu HTML fitxategi berri bat goiko kodearekin. Sortu nirEstiloak.css izeneko CSS fitxategi bat eta idatzi bertan probatu nahi duzun erregela. Txertatu beste elementu batzuk <p> elementuen artean, ikusteko zer lan egiten duten arau horiek.

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.