CSS: estiloa

Atarikoa

Aurreko kapituluan, HTML dokumentu bat sortzen, haren egitura antolatzen eta edukia irudikatzeko zein elementu diren egokienak zehazten ikasi dugu. Informazio horrek dokumentua definitzeko aukera ematen digu, baina ez du zehazten pantailan nola agertuko den.

HTML5 sartu zenetik, zeregin hori CSSren erantzukizuna da. CSS lengoaiak HTML elementuei estiloak esleitzeko jarraibideak ematen ditu, hala nola koloreak, letra motak, tamainak, etab. Estiloak CSS bidez definitu behar dira, eta gero elementuei esleitu, gure orrialderako nahi dugun diseinu bisuala lortu arte.

Bateragarritasun-arrazoiak direla eta, nabigatzaileek berezko estiloak esleitzen dizkiete HTML elementu batzuei. Horregatik, 2. kapituluan elementu batzuek marjinak zituzten edo lerro-jauziak sortzen zituzten, baina beste batzuk antzera definitzen ziren (letra eta kolore mota bera zuten, adibidez). Estilo horietako batzuk erabilgarriak dira, baina gehienak estilo pertsonalizatuekin ordezkatu edo osatu behar dira.

CSSn, estilo pertsonalizatuak propietateekin deklaratzen dira. Estilo bat definitzeko, jabetzaren izena eta balioa bi puntuz bereizten dira. Adibidez, hurrengo kodeak letraren tamaina 24 pixeletara aldatzen duen propietate bat adierazten du (propietate batzuek espazio batek bereizitako balio asko izan ditzaketenez, lerroaren amaiera puntu eta koma batekin adierazi behar dugu).

      
        font-size: 24px;
          

Goiko propietate hori elementu bati aplikatzen bazaio, elementu horrek duen testua pantailan agertuko da, lehenetsitako letra-motarekin, baina 24 pixeleko tamainarekin.

Jakin beharrekoa: pixelak (px) dira gehien inplementatzen diren neurketa-unitateak, baina aurrerago ikusiko dugu egoera batzuetan, bereziki web diseinu moldagarria duen gure webgunea sortzen dugunean, egokiagoak izan daitezkeela beste unitate batzuk. Hauek dira gehien erabiltzen diren unitateak:

CSS propietate gehienek elementuaren alderdi bakarra alda dezakete (letraren tamaina kasu honetan). Hainbat estilo aldi berean aldatu nahi baditugu, propietate ugari aitortu behar ditugu. CSSk elementu bati propietate ugari esleitzeko prozesua sinplifikatzen duen sintaxi bat definitzen du. Eraikuntzak erregela du izena.

Erregela bat giltzen artean aitortutako eta hautagailu batek identifikatutako propietateen zerrenda bat da. Hautatzaileak adierazten du zer elementuri eragingo dien propietateek. Adibidez, hurrengo araua p hautagailuarekin identifikatzen da, eta, beraz, haren propietateak dokumentuko <p>elementu guztiei aplikatuko zaizkie.

        
          p {
            color: #FF0000;
            font-size: 24px;
            }
        
      

Goiko erregelak bi propietate ditu, bakoitzaren balioak giltzen arabera multzokatuta (kolorea eta font-size). Erregela hori gure dokumentuari aplikatzen badiogu, <p> elementu bakoitzaren barruko testua gorriz eta 24 pixeleko tamainarekin agertuko da.