![]() | Peatüki sisukord | ![]() |
5.1 Ülevaade CSS-ist
1990-ndatel oli veeb plahvatuslikult arenenud ja levinud, tekkis veebilehtede kujundamise probleem. Jaanuaris 1997. sai valmis HTML 3.2, mille raames lisati HTML keelele terve hulk vormindusega seotud atribuute (color, bgcolor jpt.). See lisas võimalusi sisu kujundamiseks, kuid samas muutis suurte portaalite arendamise väga vaevarikkaks - oli vaja meeles pidada ja lisada omadusi igale üksikule lehele või sõnale. See tõttu juba aasta lõpus kuulutati välja HTML 4 standardi, milles hakati kujunduselementidest loobuma. Kujunduse eest pidi vastutama CSS.
CSS (ingl. k. Cascading Style Sheets) on astmelised stiililehed ehk kaskaadlaadistik - keel, milles märgitakse üles veebilehtede kujundus. Stiililehed (ingl. k. style sheets) koosnevad sarnaselt hüperteksti märgistuskeelega reeglitest, mille abil veebilehitseja oskab dokumenti kasutajale kuvada.
Sõna kaskaad tähendab CSS mõistes seda, et olenemata stiili asukohast, mõjutab see veebidokumenti. Kaskaadlaadistikku saab HTML-i dokumendiga siduda kolm erineval viisil:
- välise lehe linkimine (ingl. k. external style sheet) - kui on vaja kujundada tervet portaali (mitmeid erinevaid lehti), siis kõik stiilid (kujundamise reeglid) kirjutatakse eraldi faili laiendiga .css, ning failile viidatakse HTML lehe päisest märgendi
<link>
abil järgmisel kujul:
<link rel="stylesheet" type="text/css" href="stiililehe_URL" />.
<link rel="stylesheet" type="text/css" href="omastiil.css" />
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART5A?action=download&upname=v2line.jpg)
Kasutades välist stiililehte (css fail) saab veebilehe sisu ning kujunduse lahus hoida, mis lihtsustab veebilehe loomist ja hilisemat muutmist. Veebilehe kujunduse muutmiseks pole hiljem tarvis üle vaadata terve HTML dokumendi kõiki märgendeid vaid piisab eraldi CSS faili muutmisest või asendamisest.
- sisemise stiil veebilehe päises (ingl. k. internal style sheet) - kui on vaja kujundada vaid üks konkreetne veebileht - CSS reeglid lisatakse HTML-dokumendi päisesse (paarismärgendi
<head>
sisse) paarismärgendi<style>
vahele:
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART5A?action=download&upname=ex_style.jpg)
- reastiil (ingl. k. inline style) - kui on vaja ühte konkreetset veebilehe märgendit konkreetses kontekstis eriliselt kujundada, siis lisatakse vastava HTML algusmärgendisse argument
style
järgmisel kujul:
![](https://courses.cs.ut.ee/t/nooredkoodi/Veebilehed/PART5A?action=download&upname=inline_style.png)
Kui veebidokumendis on kasutatud erinevad viisid stiilide lisamiseks, siis stiile võetakse arvesse järgmises järjekorras (esimene on kõrgeima prioriteediga):
- reastiil
- sisemine stiil
- väline stiil
- veebilehitseja vaikestiil (ingl. k. browser default) - veebilehitseja sätetes on määratud kuidas veebilehe elemente näidatakse, kui veebilehe autor pole ise midagi määranud.
![]() | Peatüki sisukord | ![]() |