Webgune baten estilo bisuala eta diseinua CSS edo Cascading Style Sheets aginduak dira. Web orriaren HTML markaketa osatzen duten dokumentuak dira, nabigatzaileek markaketaren ondorioz sortutako orriak nola bistaratu dituzten argibideak emateko. CSS-k orriaren diseinua, kolorea, atzeko planoko irudiak, tipografia eta askoz gehiago kudeatzen ditu.
CSS fitxategi bat begiratuz gero, markaketa edo kodifikazio hizkuntza bezala ikusiko duzu, fitxategi horiek sintaxia bera dute. Estilo-orri bakoitzak CSS arau multzo bat dauka. Arau horiek, betiere guztiz burutzen direnean, estiloak dira.
CSS Arauaren atalak
CSS arau bat bi zati desberdinek osatzen dute: hautazkoa eta deklarazioa. Aukeratzaileak orri batean estiloa zehazten du eta aitorpena estiloa nola ezarri behar den zehazten du. Adibidez:
p {
kolorea: # 000;
}
Hau CSS arau bat da. Hautatu selektorea "p" da, "paragrafo" elementu hautatzailea baita. Hori dela eta, gune honetako paragrafo guztiak aukeratu eta estilo hau eman (CSS dokumentuan beste leku batzuetan estilo zehatzagoak zuzendutako paragrafo batzuk egon ezean).
"Kolorea: # 000;" dioen arauaren zatiak deklarazioa deritzo. Aitorpena bi zati ditu: jabetza eta balioa.
Jabetza adierazpen honen "kolorea" da. Hautatzen duen alderdia bisualki aldatuko da.
Balioa zein den hautatutako CSS propietatea aldatu egingo da. Gure adibidean, # 000-ren hex balioa erabiltzen ari gara, hau da, "beltza" atalen CSSa.
Beraz, CSS arau hau erabiliz, gure orrialdeak letra-kolore beltzak bistaratuko dituen paragrafoak izango lituzke.
CSS Property Basics
CSS propietateak idazten dituzunean, ezin duzu besterik gabe egin itzazu egoki ikusten duzun moduan. Esate baterako, "kolorea" benetako CSS propietatea da, beraz erabili ahal izango duzu. Propietate hori elementu baten testuaren kolorea zehazten du. "Testu kolorea" edo "letra-kolorea" CSS propietate gisa erabiltzen saiatu bazara, huts egin liteke CSS hizkuntzan benetako zatiak ez direlako.
Beste adibide bat "atzeko planoko irudia" da. Propietate honek hondo honetarako erabil dezakezun irudi bat ezartzen du, honela:
.logo {
background-image: url (/images/company-logo.png);
}
"Atzeko planoan" edo "Atzeko planoaren grafikoa" erabiltzen saiatu bazara, huts egin egingo lukete, berriro ere ez direlako CSS propietateak.
CSS propietate batzuk
Hainbat gune daude CSS propietateak sortzeko. Adibide batzuk hauek dira:
- Ertzaren (ertz-estiloa, ertza-kolorea eta ertza-zabalera barne)
- Betegarria (betegintzako goialdean, eskuineko betegarria, betegarria eta betegarria-ezkerraldea barne)
- Marjinak (marjina-goialdean, marjina-eskuinean, marjina-behean eta marjina-ezkerrean barne)
- Font-familia
- Font-tamaina
- Aurrekariak koloretan
- Zabalera
- Altuera
CSS propietate hauek adibide gisa erabil daitezkeenak dira, oso errazak direlako eta, nahiz eta ez badakizu CSS, seguruenik asmatu dezakezu zer egiten duten beren izenak.
Beste CSS propietate batzuk ere topatuko dituzu, eta agian ez da bistakoa izango nola funtzionatzen duten haien izenak oinarritzat hartuta:
- Higikorra
- Garbitu
- gainezkatzea
- Testutik eraldatu
- Z-indizea
Web diseinuan sakonduz gero, propietate hauek eta gehiago topatuko dituzu (eta erabili).
Propietateak balioak behar dituzte
Etxe bat erabiltzen duzun bakoitzean, balio bat eman behar duzu - eta zenbait propietate balore jakin batzuk bakarrik onartu ditzake.
"Kolore" propietatearen lehen adibidean, kolore-balioa erabili behar dugu. Balio hexagoko balioa izan liteke, RGBA balioa edo kolorearen gako-hitzak . Balio horietako edozein funtzionatuko luke, hala ere, jabetza honekin "iluna" hitza erabiltzen baduzu, ezer ez litzateke egingo, hitz hori bezain deskribatzailea ez delako CSS-en aitortutako balioa.
"Atzeko planoko irudia" ren bigarren adibidea irudiaren bide bat behar da zure webguneko fitxategien benetako irudia lortzeko . Hau beharrezkoa den balioa / sintaxia da.
CSS propietate guztiek espero dituzten balioak dituzte. Adibidez:
- Kolore-balioak kolore-balioa espero du
- Ertzaren tamaina tamainako balioa espero da, pixelak edo ehunekoak bezala
- Estilo ertzak propietate honi erabilitako estilo erreserbatutako bat espero du, "solidoa"
CSS propietateen zerrendan barrena joaten bazara, horietako bakoitzak bere diseinuak sortzeko erabiltzen dituen balio zehatzak ditu.
Jeremy Girard-ek editatua