CSS
 | See artikkel vajab toimetamist. (Juuni 2018) |
 | See artikkel ootab keeletoimetamist. (Juuni 2018) |
 | See artikkel räägib märgenduskeelest; mõnikord kasutatakse lühendit CSS ka murdskriptimise kohta, arvutimängu kohta vaata artiklit Counter-Strike: Source. |
CSS (ingliskeelne lühend sõnadest Cascading Style Sheets – kaskaadlaadistik) on küljendamisel kasutatav märgistuskeel, milles märgitakse üles peamiselt veebilehtede kujundust. CSS leiab enim kasutust HTML- ja XHTML-lehtede kujunduse loomisel, samuti XML-,SGML-, XUL- ja SVG-lehtedel.
CSS-i kombineerimine XHTML-iga võimaldab lehe sisu ja kujunduse teineteisest eraldada. See annab parema ülevaate veebilehe ülesehitusest, on abiks lehekülje hilisemal muutmisel ning võimaldab luua laadilehti eri kasutustüüpide jaoks, sh printimiseks. Eraldi .css faili abiga on võimalik ühtlustada mitme veebilehe formatiseerimist, mis struktuurses sisus vähendab komplektsust ja kordamist; ning .css faili vahemällu salvestamine võimaldab kiirema laadimise lehtede vahel mis jagavad sama formatiseerimist. Lihtsamaks muutub kogu veebilehe haldus ja eelkõige kujunduse muutmine.
Süntaks
[muuda | muuda lähteteksti]CSS-il on lihtne süntaks, milles kasutatakse ingliskeelseid märksõnu erinevate laadiomaduste nimede täpsustamiseks.[1]
Laadileht
Laadileht koosneb reeglite loendist. Iga reegel või reeglite hulk koosneb ühest või rohkemast selektorist ja deklaratsiooni blokist.
Selektor
[muuda | muuda lähteteksti]Selektor deklareerib, mis märgenduse juurde laadi rakendatakse.[1]
Selektorid võivad olla rakendatud:
- spetsiifilise tüübi kõikidele elementidele
- elementidele, mis on täpsustatud atribuutiga, konkreetsemalt:
- id-le: unikaalsele identifikaatorile dokumendi sees,
- klassile: identifikaatorile, mida võivad kasutada dokumendi mitu elementi,
- elementidele sõltuvalt sellest, kuidas nad on paigutatud dokumendi puus.[1]
Klassid ja id-d on tõstutundlikud, algavad tähtedega ja võivad sisaldada tähe- ja numbrimärke, sidekriipse ja alakriipse. Id-d märkitakse trellidega #id ja klassi punktiga .classname. Ühele selektorile saab lisada mitu atribuuti.[2]
Pseudo klassid
Pseudo klasse võib kasutada CSS selektorites, et võimaldada formatiseerimine teabe põhjal, mida dokumendi puu ei sisalda. Üks enim levinud näide on pseudo klass :hover, mis tuvastab sisu ainult kui kasutaja osutab elemendile hiire kursoriga. See lisatakse selektorile a:hover või #elementid:hover.
Pseudo klass klassifitseerib dokumendi elemente nagu :link ja :visited samas kui pseudo element tuvastab osalise elemendi nagu ::first-line või ::first-letter.
Täpsus ja paindiluks
Selektoreid võib ühendada mitmel eri moel, et saavutada täpsust ja paindlikust. Mitu selektorit võib kombineerida loendisse nende koha, tüübi, id, klassi või mingi muu kombinatsiooniga. Järjekord on oluline. Näiteks div .myClass {color: red;} viitab kõigile elementidele millel on klass myClass, mis on div elemendi sees kui aga .myClass div {color: red;} viitab div elementidele, mis on elementide myClass sees. Samas div.myClass {color : red;} viitab div elementidele millel on klass myClass.
Kokkuvõte selektori süntaksist
Allolev tabel annab ülevaate kõikide CSS-i versioonide selektoritest. Tulbas "CSS-i versioon" on kirjas versioon, millal selektorit esmakordselt defineeriti.
| Muster | Tähendus | CSS-i versioon |
|---|---|---|
| E | element tüübist E | 1 |
| E:link | hüperlingiks olev element E, mis on veel külastamata | 1 |
| E:visited | hüperlingiks olev element E, mida on külastatud | 1 |
| E:active | element E, mille kasutaja aktiveeris | 1 |
| E::first-line | elemendi E esimene renderdatud rida | 1 |
| E::first-letter | elemendi E esimene renderdatud täht | 1 |
| E.foo | elemendi E klassiks on "foo" | 1 |
| E#foo | elemendi id-ks on "foo" | 1 |
| E F | F on elemendi E järglane | 1 |
| * | kõik elemendid | 2 |
| E[foo] | element, millele määrati atribuut "foo" | 2 |
| E[foo="bar"] | element E, mille atribuudi "foo" väärtus on täpselt võrde väärtusega "bar" | 2 |
| E[foo~="bar"] | element E, mille atribuudi "foo" väärtuseks on rida tühikuga eraldatud väärtusi, millest üks on täpselt võrdne väärtusega "bar" | 2 |
| E:first-child | element E on oma vanema esimene laps | 2 |
| E:last-child | element E on oma vanema viimane laps | 2 |
| E:lang(fr) | element E keeles "fr" | 2 |
| E::before | genereeritud sisu enne elementi E | 2 |
| E::after | genereeritud sisu pärast elementi E | 2 |
| E > F | element F on elemendi E laps | 2 |
| E + F | elemendile F eelneb vahetult element E | 2 |
| E[foo^="bar"] | element E, mille atribuudi "foo" väärtus algab sõnega "bar" | 3 |
| E[foo$="bar"] | element E, mille atribuudi "foo" väärtus lõpeb sõnega "bar" | 3 |
| E[foo*="bar"] | element E, mille atribuudi "foo" väärtus sisaldab alamsõnet "bar" | 3 |
| E:root | element E on dokumendi juurelemendiks | 3 |
| E:nth-child(n) | element E on oma vanema n-is laps | 3 |
| E:nth-last-child(n) | element E on oma vanema n-is laps (loendamine toimub viimasest elemendist) | 3 |
| E:nth-of-type(n) | element E on n-is E-tüüpi element | 3 |
| E:nth-last-of-type(n) | element E on n-is E-tüüpi element (loendamine toimub viimasest elemendist) | 3 |
| E:first-of-type | element E on esimene E tüüpi element | 3 |
| E:last-of-type | element E on viimane E tüüpi element | 3 |
| E:only-child | element E on oma vanema ainuke laps | 3 |
| E:only-of-type | element E on ainuke E tüüpi element | 3 |
| E:empty | elemendil E ei ole ühtki last | 3 |
| E:target | element E on dokumendile viitava URI sihtmärk | 3 |
| E:enabled | kasutajaliidese element E, mille kasutamine on lubatud | 3 |
| E:disabled | kasutajaliidese element E, mille kasutamine ei ole lubatud | 3 |
| E:checked | kasutajaliidese element E, mis on valitud | 3 |
| E:not(s) | element E, mis ei osutu valituks lihtsa selektoriga s | 3 |
| E ~ F | elemendile F eelneb element E | 3 |
Deklaratsioon
[muuda | muuda lähteteksti]Deklaratsiooniväli sisaldab deklaratsioonide listi, mis pannakse sulgudesse. Iga deklaratsioon koosneb atribuutist, koolonist(:) ja väärtusest. Kui deklaratsiooniväljal on mitu väärtust, tuleb need üksteisest eraldada semikooloniga(;).[2]
Kasutamine
[muuda | muuda lähteteksti]Enne CSS-i, kõik ettekandelised atribuudid kasutati HTM-märgenduse sees. CSS annab autoritele võimaluse paigutada suurema osa sellest informatsioonist teise faili, laadilehele, mis lihtsustab HTML-dokumenti.[3]
Näide selle kohta, kuidas oli HTML-is defineeritud punast värvi pealkiri.
<h1><font color="red"> Esimene peatükk </font></h1> Sama näide, aga kasutades CSS-i.
<h1 style="color:red"> Esimene peatükk </h1> Eelis ei ole eriti selge, kuid see muutub selgemaks, kui CSS-i laadi omadused on paigutatud eraldi CSS-faili. Eeldame, et dokumendis on järgmine laadielement:
<style> <h1 {color: red;} </style> Kõik dokumendis olevad h1 pealkirjad muutuvad punaseks, ilma et teha HTML-failis mingeid muudatusi. Kui autor soovib muuta kõik h1 pealkirjad siniseks, siis ta peab muutma värvi punasest siniseks ehk
<style> <h1 {color: blue;} </style> Laadid võivad olla paigutatud ka eraldi CSS-faili ning laaditud, kasutades järgmist süntaksi
<link type="text/css" rel="stylesheet" href="path/to/file.css"/> CSS-i eelised
[muuda | muuda lähteteksti]Sisu ja vorm on eraldatud
CSS kergendab sisu erinevates formaatides avaldamist nominaalsete parameetrite põhjal. Nominaalsete parameetrite hulka kuuluvad konkreetse kasutaja eelistused, erinevad veebibrauserid, selle seadme tüüp, mida kasutatakse sisu kuvamiseks, kasutaja geograafiline asukoht ja palju muud.[4]
Terviklikkus
CSS võimaldab mõjutada ja disainida lehekülje elemente sisu puutumata. Olukorras, kus on vaja muuta või lisada elemente, võib muudatusi teha globaalses laadilehes. See säästab aega ja raha.[4]
Ülekandekiirus
Seespidine või välispidine laadileht täpsustab laade mitmele HTML-elemendile, mille juures on märgitud vastav klass, tüüp või relatsioon. See tähendab, et veebilehekülje koostaja ei pea iga elemendi juures kirjutama laadispetsifikatsioone, piisab ühest korrast. See on efektiivsem kui iga elemendi juures informatsiooni kordamine.
Kui veebilehe kujundus on paigutatud ühte faili, siis peab kasutaja selle alla laadima vaid ühe korra. Teised leheküljed näevad juba varem allalaaditud laadilehte.[4]
Kättesaadavus
Ilma CSS-ita peaksid disainerid paigutama kogu informatsiooni ühte HTML-faili, mis raskendaks lehe arusaamist halva nägemisega inimeste jaoks.[4]
Eestikeelne termin
[muuda | muuda lähteteksti]CSS-i ingliskeelse täistermini lahtiseletus on "kaskaadlaadistik"[5] [6] [7][8]. Toortõlget "kaskaadsed stiililehed"[2] kohtab harvemini.
Vaata ka
[muuda | muuda lähteteksti]Viited
[muuda | muuda lähteteksti]- ↑ 1,0 1,1 1,2 "W3C Web site. Selectors". (20.04.2018).
{{netiviide}}: kontrolli kuupäeva väärtust:|Aeg=(juhend) - ↑ 2,0 2,1 2,2 2,3 Kaido Kikkas ((19.03.2018)). "VeebiABC.Algaja veebisepa abimees".
{{netiviide}}: kontrolli kuupäeva väärtust:|Aeg=(juhend) - ↑ W3C HTML Working Group ((20.04.2018)). "HTML 5. A vocabulary and associated APIs for HTML and XHTML".
{{netiviide}}: kontrolli kuupäeva väärtust:|Aeg=(juhend) - ↑ 4,0 4,1 4,2 4,3 "5 Advantages of CSS Design". (18.03.2018).
{{netiviide}}: kontrolli kuupäeva väärtust:|Aeg=(juhend) - ↑ CSS. Andmekaitse ja infoturbe leksikon (AKIT)
- ↑ L. Liikane, M. Kesa. CSS – Arvutisõnastik.
- ↑ V. Hanson, A. Tavast. CSS – Arvutikasutaja sõnastik.
- ↑ CSS (Cascading Style Sheets) – vallaste.ee e-Teatmik.
Välislingid
[muuda | muuda lähteteksti] | Vikiõpikutes on lisamaterjali: CSS |
- W3C CSS-i koduleht: CSS-i spetsifikatsioonid ja juhised.
- HTML, XHTML ja CSS – artiklid, juhendid, vahendid
- Instant CSS Code