CSS sintaksė iš arčiau
Pažintiniame straipsnyje susipažinote su pagrindinėmis CSS savybėmis, o šiame straipsnyje plačiau apžvelgsime sintaksę: žodines reikšmes, matavimo vienetus, rašymo stilius, komentarus.
Žodinės spalvų reikšmės (angl. color keywords)
Visas spalvas CSS kalboje dažniausiai nurodome HEX reikšmėmis, pavyzdžiui: 000000 (juoda), FFFFFF (balta), FF0000 (raudona) ir pan. Tačiau dideliame CSS faile HEX reikšmių gali būti labai daug. O mes, žinoma, visų HEX reikšmių neatsiminsime. Tokiu atveju galima naudoti žodines reikšmes.
body { color: #000000; }
body { color: black; }
Šie du aprašai teksto spalvą atvaizduotų visiškai taip pat, todėl kad spalvos HEX reikšmė atitinka žodinę reikšmę black. Žodines reikšmes itin pravartu naudoti, kadangi nereikia atsiminti painių skaičių ir raidžių kombinacijų, kurios sudaro HEX kodą, užtenka žinoti spalvų pavadinimus. Žinoma, kiekvienai HEX reikšmei žodinių reikšmių nėra, tačiau apačioje yra pateiktos pagrindinės:
| aqua (#00FFFF) | black (#000000) | fuchsia (#FF00FF) | gray (#808080) | green (#008000) | |||||
| lime (#00FF00) | maroon (#800000) | navy (#000080) | olive (#808000) | purple (#800080) | |||||
| red (#FF0000) | silver (#C0C0C0) | teal (#008080) | white (#FFFFFF) | yellow (#FFFF00) | |||||
Beje, kai kuriuos HEX kodus galima trumpinti. Pavyzdžiui, #000000 į #000; #666666 į #666; #FFFFFF į #FFF; #FF6600 į #F60; #FFCC00 į #FC0 ir pan. Taigi apačioje pateikti visi trys aprašai būtų identiški veikimo atžvilgiu:
a { color: #000000; }
a { color: #000; }
a { color: black; }
Matavimo vienetai
CSS kalboje šriftų, blokų, tarpų dydžius galima nustatyti įvairiais matavimo vienetais.
-
Procentai (%)
Kaip įsivaizduoti matavimą procentais? Panagrinėkime pavyzdį.
body { font-size: 75%; }
Taigi, ką reiškia 75%? Nenurodžius tikslaus dydžio, naršyklė šriftą atvaizduos pagal numatytuosius nustatymus. Numatytoji reikšmė ir bus 100%. Kadangi nurodėme 75%, naršyklė rodys tik 75 procentus numatytosios (originaliosios) šrifto dydžio reikšmės.
-
Coliai (anlg. Inch) (in)
Atminkite, kad 1 colis yra lygus 2,5 centimetro.
- Centimetrai (cm)
- Milimetrai (mm)
-
Pikseliai (taškai, angl. pixels) (px)
Taip, tai tie patys taškai, kuriuos naudojame darbalaukio rezoliucijai nustatyti (800x600, 1024x768, 1280x1024 px).
1px atstovauja vieną tašką ekrane.
-
Em
Tai išskirtinis matavimo vienetas, kuris, beje, yra labai naudingas ir rekomenduotinas. Mato principas yra panašus į procentų. Peržvelkime pavyzdį.
body { font-size: 10px; } #mazas { font-size: 0.8em; } #normalus { font-size: 1em; } #didelis { font-size: 1.6em; } #dvigubas { font-size: 2em; }
... <body> <div id="mazas">Šiame bloke yra tekstas</div> <div id="normalus">Šiame bloke yra tekstas</div> <div id="didelis">Šiame bloke yra tekstas</div> <div id="dvigubas">Šiame bloke yra tekstas</div> </body> ...
1em yra lygus esančiam šrifto dydžiui. Iš pavyzdžio išplaukia, kad 10px = 1em.
Identifikatoriai #mazas, #normalus, #didelis ir #dvigubas paveldi body identifikatoriaus savybę font-size, kurios reikšmė yra 10px (tai matome iš HTML kodo — visos <div></div> žymės yra tarp <body></body> žymių. Jeigu nebūtų nurodyta font-size savybė nė vienam ID identifikatoriui, visi jie būtų turėję font-size: 10px. Tai vadinama paveldimumu.
Taigi, kaip galėtume išreikšti visų ID identifikatorių font-size savybės reikšmes taškais (px)?
#mazas: 0.8em = 8px (0.8 * 10 = 8);
#normalus 1em = 10px (1 * 10 = 10);
#didelis 1.6em = 16px (1.6 * 10 = 16);
#dvigubas 2em = 20px (2 * 10 = 20).
-
Taškai (angl. points) (pt)
Nepainiokite, pt nėra tas pats kas px. Iš tikrųjų 1 pt yra lygus 1/72 colio.
-
Cicerai (angl. pica) (pc)
1 pc yra lygus 12 pt.
CSS kodo rašymo stilius
Kiekvienoje programavimo kalboje vyrauja tam tikri programavimo stiliai: vieni labiau pritaikyti greitam kodo rašymui, kiti — geresniam programos struktūros suvokimui. Nors CSS nėra programavimo kalba, čia taip pat yra keletas stilių. Dažniausiai aptinkame štai tokį rašymo stilių:
body {
font-size: 75%;
font-family: Verdana;
color: gray;
}
a {
text-decoration: none;
color: green;
}
Kaip matote aukščiau pateiktame pavyzdyje, šis stilius pasižymi tuo, kad galima greitai susigaudyti CSS kode ir atrasti reikiamus aprašus.
body { font-size: 75%; font-family: Verdana; color: gray; }
a { text-decoration: none; color: green; }
Toks stilius tinka identifikatoriams, kurie turi mažai savybių. Taip sutaupoma vietos, CSS failas neatrodo toks didelis. Žinoma, nebūtų klaidos, jeigu būtų parašyta ir šitaip:
body{font-size:75%;font-family:Verdana;color:gray;}
a{text-decoration:none;color:green;}
arba netgi taip:
body{font-size:75%;font-family:Verdana;color:gray;} a{text-decoration:none;color:green;}
tačiau tada labai sunku susigaudyti, kokias savybes turi kiekvienas selektorius. Kartais pravartu nurodyti ir HTML elemento pavadinimą, kuriam priklausys selektorius, tačiau tai nebūtina:
div#tekstas { font-size: 12px; }
div#tekstas p.paragrafas { color: #333; }
div#tekstas p.paragrafas span.info { color: #CCC; }
...
<body>
<div id="tekstas">
<p class="paragrafas">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dolor.
<br />
<span class="info">Autorius: Edmundas</span>
</p>
</div>
</body>
...
Komentarai rašomi tarp /* ir */ simbolių.
/* Tai labai svarbus aprašas */
body { font-size: 12px; }
Atminkite, kad komentarai negali būti kito komentaro viduje, pavyzdžiui, žemiau pateiktas komentarų naudojimas yra neteisingas.
/* Mano komentaras
/* Čia dar vienas komenetaras. Palaukite, šito komentaro čia negali būti! */
mano komentaro tęsinys
*/
body { font-size: 12px; }
Viską, kas yra tarp komentaro simbolių, naršyklė ignoruos, nekreips dėmesio.
body { font-size: 12px; color: black; }
/* .bandymas { color: #666; } */
Kaip matote, nors identifikatoriaus .bandymas sintaksė yra teisinga, naršyklė identifikatorių ignoruos, kadangi aprašas yra tarp komentaro simbolių.
Apibendrinimas
Šį kartą kiek detaliau panagrinėjome CSS sintaksę, sužinojome apie matavimo vienetus bei aptarėme CSS kodo rašymo stilių („kultūrą“). Tai, žinoma, ne viskas, ką reikia žinoti norint pilnavertiškai kurti tinklalapių dizainus, tačiau turėdami šias žinias jau galite eksperimentuoti ir bandyti sukurti nesudėtingus pakopinius stilius.
Apie autorių
Edmundas yra E-grafika.lt tinklalapio administratorius. Šiuo metu studijuoja Vilniaus universitete, dirba bei rūpinasi šiuo tinklalapiu: rašo straipsnius, naujienas, kuria naujus epizodus E-grafika.lt TV laidoms. Jis atsakingas už tinklalapio užtikrintą veikimą bei tobulinimą.
Iš viso balsavusių: 73