CSS: adierazpena

Propietateek eta arauek elementu bati edo gehiagori esleitu nahi dizkiegun estiloak definitzen dituzte, baina estilo horiek ez dira aplikatzen dokumentuan sartu arte. Hiru teknika daude helburu horretarako. Lineako estiloak, estilo txertatuak edo estilo-orriak erabil ditzakegu.

Lehenak, lineako estiloak, style izeneko atributu globala erabiltzen du estiloak elementuan zuzenean txertatzeko. Atributu hori HTML elementu bakoitzean dago eskuragarri, eta dagokion elementuari aplikatuko zaizkion propietate edo propietate zerrenda bat jaso dezake. Teknika hori erabiliz estiloak esleitu nahi baditugu, aldatu nahi dugun elementuan style atributua adierazi eta CSS propietateak esleitu behar dizkiogu.

        
          <!DOCTYPE html>
          <html lang="es">
          <head>
            <title>Dokumentuaren izena doa hemen</title>
            <meta charset="utf-8">
          </head>
          <body>
            <main>
              <section>
                <p style="font-size: 20px;">Txapela buruan eta ibili munduan</p>
              </section>
            </main>
          </body>
          </html>

Goiko kodean iksu dezakezuenez dokumentuko <p> elementu bat du, style atributuarekin eta font-size: 20px balioarekin.

Atributu hori irakurtzen duenean, testuari 20 pixeleko tamaina ematen dio <p> elementuaren barruan.

Egin ezazu zuk zeuk: Sortu HTML fitxategi berri bat 3-3 zerrendaren kodearekin eta ireki dokumentua zure nabigatzailean. “Nire testua” testua ikusi beharko nuke font-size jabetzak zehaztutako tamainako letrekin. Saiatu propietatearen balioa aldatzen letra-tamaina desberdinak pantailan nola agertzen diren ikusteko.

Lineako estiloak estiloak probatzeko eta elementuak nola aldatzen dituzten ikusteko modu praktikoa dira, baina ez dira gomendatzen proiektu zabaletarako. Horren arrazoia da <style> atributuak deklaratutako elementuari bakarrik eragiten diola. Beste elementu batzuei estilo bera esleitu nahi badiegu, kodea errepikatu behar dugu elementu bakoitzean, eta horrek dokumentuaren tamaina handitzen du beharrik gabe, eguneratzea eta mantentzea zailduz.

Adibidez, aurrerago erabakitzen badugu 20 pixelen ordez testuaren tamaina <p> elementu bakoitzean 24 pixelekoa izan behar dela, estilo bakoitza aldatu beharko genuke dokumentu osoaren <p> elementu bakoitzean eta gure webguneko dokumentu guztietan. Beste aukera bat CSS arauak dokumentuaren goiburuan txertatzea da, ukituko diren elementuak zehazten dituzten hautatzaileak erabiliz. Horretarako, HTMLk <style> elementua barne hartzen du.

          
            <!DOCTYPE html>
            <html lang="es">
            <head>
              <title>Dokumentuaren izena doa hemen</title>
              <meta charset="utf-8">
              <style>
                p {
                  font-size: 20px;
                }
              </style>
            </head>
            <body>
              <main>
                <section>
                  <p>Txapela buruan eta ibili munduan</p>
                </section>
              </main>
            </body>
            </html>

Goiko dokumentuan <style> etiketen artean aitortutako propietateak, lehenxeago ikusi dugun dokumentuan elementuari lotutako atributuari buruz adierazitakoaren funtzio bera betetzen du, baina adibide honetan ez dugu estiloa idatzi behar aldatu nahi dugun <p> elementu bakoitzaren barruan, izan ere orriburuan adierazitako propietatearen balioak dokumentuko <p> elementu guztiei eragiten baitie.

Dokumentuaren goiburuan estiloak aipatzeak espazioa aurrezten du eta kodea koherenteagoa eta mantentzeko errazagoa izatea eragiten du, baina gure webguneko dokumentu bakoitzean arau berberak kopiatzea eskatzen du. Orri gehienek diseinu bera partekatuko dutenez, arau horietako batzuk bikoiztu egingo dira.

Soluzioa estiloak CSS fitxategi batera mugitzea da, eta ondoren <link> elementua erabiltzea, hala eskatzen duten dokumentu bakoitzetik kargatzeko. Fitxategi mota horri estilo-orria esaten zaio. Estilo-orri horiek dokumentuaren elementuei esleitu nahi dizkiegun CSS arauen zerrenda duten testu-fitxategiak baino ez dira.

2. kapituluan ikusi dugun bezala, <link> elementua dokumentutik kanpoko baliabideak txertatzeko erabiltzen da.

Kargatu nahi dugun baliabide motaren arabera, hainbat atributu eta balio aitortu behar ditugu. CSS estiloko orriak kargatzeko, rel eta href atributuak baino ez ditugu behar. Rel atributuak dokumentuaren eta txertatzen ari garen artxiboaren arteko erlazioa adierazten du, eta, beraz, stylesheet balioarekin adierazi behar dugu, nabigatzaileari jakinarazteko baliabidea CSS fitxategi bat dela, orria aurkezteko eskatzen diren estiloekin. Bestalde, href atributuak kargatu beharreko fitxategiaren URLa adierazten du.

          
          <!DOCTYPE html>
          <html lang="es">
          <head>
            <title>Dokumentuaren izena doa hemen</title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="misestilos.css">
          </head>
          <body>
            <main>
              <section>
                <p>Txapela buruan eta ibili munduan</p>
              </section>
            </main>
          </body>
          </html>

Goiko dokumentuak CSS estiloak artxibo beretik kargatzen ditu <link rel=”stylesheet” href=”misestilos.css”> lerroaren bitartez. Artxibo horretan dokumentuari aplikatu nahi dizkiogun CSS arauak adierazi behar ditugu, lehen <style> elementuaren barruan egin dugun bezala. Hurrengoa da misestilos.css fitxategian txertatu behar dugun kodea, aurreko adibideetan lortutako efektu bera sortzeko.

      
        p {
          font-size: 20px;
          }

Aparteko fitxategi batean CSS estiloak sartzeko praktika asko erabiltzen dute diseinatzaileek, eta HTML5ekin diseinatutako webguneetarako gomendatzen da, ez bakarrik estilo-orri bakar bat defini dezakegulako eta gero dokumentu guztietan <link> elementuarekin sar dezakegulako, baizik eta estilo guztiak aldi berean ordeztu ditzakegulako fitxategi desberdin bat kargatuz, eta horrek aukera ematen digulako diseinu desberdinak probatzeko eta webgunea gailu erabilgarri guztien pantailetara egokitzeko. Hori hurrengo atal batean ikusiko dugu.

Egin ezazu zuk zeuk Sortu HTML fitxategi bat goiko dokumentuko kodearekin. Jarraian sortu fitxategi bat misestilos yzenekoa eta .css luzapenarekin. Azken horretan idatzi paragrafoari tamaina aldatzeko kodea. Ireki dokumentua zure nabigatzailean.

Testua, <p> elementuaren barruko testua, 20 pixeleko tamainakoa izan beharko litzateke. Aldatu font-size propietatearen balioa CSS fitxategian eta eguneratu orrialdea, dokumentuari estiloa nola aplikatzen zaion ikusteko.

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.