CSS: erinevus redaktsioonide vahel
Eemaldatud sisu Lisatud sisu
PResümee puudub |
Resümee puudub |
||
1. rida:
{{See artikkel| räägib märgenduskeelest; mõnikord kasutatakse lühendit CSS ka [[murdskriptimine|murdskriptimise]] kohta, arvutimängu kohta vaata artiklit [[Counter-Strike: Source]].}}
'''CSS''' ([[inglise keel|ingliskeelne]] [[lühend]] sõnadest ''Cascading Style Sheets''
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
==Süntaks==
CSS-il on lihtne süntaks, milles kasutatakse ingliskeelseid märksõnu erinevate stiiliomaduste nimede täpsustamiseks.<ref name="Selector"> {{netiviide | URL=http://www.w3.org/TR/CSS21/selector.html | Pealkiri=W3C Web site. Selectors | Aeg=(20.04.2018)}} </ref>
===Selektor===
Selektor deklareerib, mis märgenduse juurde stiili rakendatakse.<ref name="Selector"/>
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.<ref name="Selector"/>
Ühele selektorile saab lisada mitu atribuuti.<ref name="ABC"> {{netiviide | URL=http://www.kakupesa.net/kakk/veebiABC/ | Pealkiri=VeebiABC.Algaja veebisepa abimees | Autor=Kaido Kikkas | Aeg=(19.03.2018)}} </ref>
Allolev tabel annab ülevaadet kõikide CSS versioonide selektoritest. Tulbas "CSS-i versioon" on kirjas versioon, millal selektorit esmakordselt defineeriti.
{| class="wikitable"
! 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, milledest ü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
|} [https://et.wikibooks.org/wiki/CSS/Selektorid]
===Deklaratsioon===
Deklaratsiooni poks sisaldab endas deklaratsioonide listi, mida pannakse sulgudesse. Iga deklaratsioon koosneb atribuutist, koolonist(:) ning väärtusest. Kui deklaratsiooni poksis on mitu väärtust, siis peab neid teineteisest eraldada semikooloniga(;).<ref name="ABC"/>
===Kasutamine===
Enne CSS-i, kõik ettekandelised atribuutid kasutati HTML märgenduse sees. CSS annab autoritele paigutada suurema osa sellest informatsioonist teisse faili, stiilidelehte, mis lihtsustab HTML-dokumenti.<ref name="HTML5> {{netiviide|URL=http://www.w3.org/TR/html/introduction.html|Pealkiri=HTML 5. A vocabulary and associated APIs for HTML and XHTML|Autor=W3C HTML Working Group | Aeg=(20.04.2018)}}</ref>
Näide sellest, kuidas oli HTML-is defineeritud punast värvi pealkiri.
<source lang="html5">
<h1><font color="red"> Esimene peatükk </font></h1>
</source>
Sama näide, aga kasutades CSS-i.
<source lang="html5">
<h1 style="color:red"> Esimene peatükk </h1>
</source>
Eelis ei ole eriti selge, kuid see muutub selgemaks, kui CSS-i stiili omadused on paigutatud eraldi CSS-i faili.
Eeldame, et dokumendis on järgmine stiili element:
<source lang="html5">
<style>
<h1 {color: red;}
</style>
</source>
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
<source lang="html5">
<style>
<h1 {color: blue;}
</style>
</source>
Stiilid võivad olla paigutatud ka eraldi CSS faili ning laetud, kasutades järgmist süntaksi
<source lang="html5">
<link type="text/css" rel="stylesheet" href="path/to/file.css"/> </source> <ref name="ABC"/>
==CSS-i eelised==
'''Sisu ja vorm on eraldatud'''
CSS kergendab sisu erinevates formaatides avaldamist nominaalsete parameetrite põhjal. Nominaalsete parameetrite hulka kuuluvad konkreetset kasutaja eelistused, erinevad veebilehitsejad, selle seadme tüüp, mida kasutatakse sisu kuvamiseks;õ, kasutaja geograafiline asukoht ja palju muud.<ref name="advantages"> {{netiviide | URL=http://www.networksolutions.com/education/css-web-design-advantages/ | Pealkiri=5 Advantages of CSS Design | Aeg=(18.03.2018)}} </ref>
'''Terviklikkus'''
CSS võimaldab mõjutada ja disainida lehekülje elemente sisu puutumata. Olukorras, kus on vaja muuta või lisada elemente, võib muutusi teha globaalses stiilide lehes. Antud toimetamine säästab aega ning raha.<ref name="advantages"/>
'''Ülekandekiirus'''
Seespidine või välispidine stiilide leht täpsustab stiile 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 stiilide spetsifikatsioone, piisab ühest korrast. See on efektiivsem kui iga elemendi juures informatsiooni kordamine.
Kui lehekülje kujundus on paigutatud ühe faili, siis peab kasutaja neid alla laadima vaid ühe korra. Teised leheküljed näevad juba ennem allalaetud stiililehte.<ref name="advantages"/>
'''Kättesaadavus'''
Ilma CSS-ita peaksid disainerid paigutama kogu informatsiooni ühte HTML-faili, mis raskendaks lehe arusaamist halva nägemisega inimeste jaoks..<ref name="advantages"/>
==Eestikeene termin==
CSS-i ingliskeelse täistermini lahtiseletus on olnud nii 'kaskaadlaadistik'<ref>L. Liikane, M. Kesa. [http://www.keeleveeb.ee/dict/speciality/computer/dict.cgi?word=CSS&lang=en CSS] – Arvutisõnastik.</ref><ref>V. Hanson, A. Tavast. [http://www.keeleveeb.ee/dict/speciality/aks/dict.cgi?word=CSS&lang=en CSS] – Arvutikasutaja sõnastik.</ref><ref>[http://www.vallaste.ee/index.htm?Type=UserId&otsing=343 CSS (Cascading Style Sheets)] – vallaste.ee e-Teatmik.</ref> kui ka 'kaskaadsed stiililehed'<ref name="ABC"/>.
==Viited==
| |||