17 HTML ja CSS
CSS (Cascading Style Sheets) ehk astmelised stiililehed on keel, milles märgitakse üles veebilehtede kujundus. Vastavate reeglite järgi pannakse kirja, kuidas erinevaid HTML elemente peab näitama (värvid, teksti font, suurus jne). CSS-i võib kasutada HTML faili sees aga ka välise failina (laiendiga .css).
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 elemente vaid piisab ainult CSS faili muutmisest või asendamisest.
CSS stiile saame HTML elementidele lisada kolmel erineval viisil:
- Reastiil (Inline) – konkreetse elemendi sees määratud stiil kasutades style atribuuti.
- Sisemine stiil (Internal) – HTML elemendi
<head>osas defineeritud stiil. - Väline stiil (External) – kasutades välist lingitud CSS faili
Tänapäeval on kõige tavalisem meetod CSS lisamiseks kasutada välist CSS faili. Seda vaatame täpsemalt CSS peatükkides. HTML peatükkides kasutame lihtsuse huvides reastiili ja Sisemist stiili.
Reastiili rakendamine (Inline)
Reastiili kasutatakse ühele konkreetsele HTML elemendile kujundamiseks. Reastiili kasutamiseks tuleb vastava HTML elemendi algusmärgendisse lisada argument style järgmisel kujul:
<elemendinimi style="css stiil">
Näiteks määrame ühele tekstilõigule erilise värvi:
<p style="color: sienna;">See on üks lõik.</p>
Sisemise stiili rakendamine (Internal)
Olukorras, kus on tarvis kujundada vaid üks konkreetne veebileht, võib kasutada sisemist stiili (Internal Style Sheet). Selleks lisatakse HTML-dokumendi päisesse (elemendi <head> sisse) element <style> kujul:
<style> veebilehe erinevate elementide kujundusreeglid </style>
Kõik päises loodud stiilid rakenduvad automaatselt kõigile vastavatele elementidele. Näiteks määrame dokumendi päises ära, et kõik veebilehel kuvatud h1 pealkirjad on punased ja kõik tekstilõigud sinised:
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:red;}
p{color:blue;}
</style>
</head>
<body>
<h1>Paelkiri 1</h1>
<p>tekstilõik</p>
<h1>Pealkiri 2</h1>
<p>tekstilõik</p>
</body>
</html>
Välise stiililehe rakendamine (External)
Välise stiili (External Style Sheet) tarvitamine on kasulik, kui on tarvis kujundada tervet veebilehestikku (mitmeid erinevaid lehti). Nii saab ühe CSS faili muutmisega muuta kogu veebilehestiku kõikide veebilehtede välimust.
Välise stiili kasutamiseks tuleb HTML-dokumendi päisesse (elemendi <head> sisse) lisada kindlal kujul link vajalikule CSS failile.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="minustiil.css"> </head> <body> <p>Veebilehe sisu.</p> </body> </html>
CSS faili loomiseks saame kasutada samu programme, millega kirjutame ka HTML faile. Faililaiendina tuleb kasutada .css laiendit. CSS failis ei tohi olla HTML koodi ning faili sisu võib välja näha näiteks selline:
body {
background-color: lightgray;
}
h1 {
color: blue;
}
p {
color: red;
}
Kirjatüübid (fonts)
HTML dokumendis kasutatud teksti stiliseerimiseks saame kasutada kolme CSS omadust:
color– määrab teksti värvifont-family– määrab ära kirjatüübifont-size– määrab ära teksti suuruse
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-family: courier;
font-size: 40px;
}
</style>
</head>
<body>
<h1>Punane pealkiri</h1>
</body>
</html>
Punane pealkiri
Raamid (border)
HTML elementide ümber raamide tegemiseks saame kasutada CSS omadust border.
h1 {
border: 2px solid blue;
}
Sinise raamiga pealkiri
Polsterdus (padding)
CSS võimaldab määrata ka polsterdust omadusega padding ehk ruumi veebilehe elemendi serva ja tema sisu vahel.
h1 {
border: 2px solid blue;
padding:10px;
}
Sinise raamiga pealkiri
Veerised (margin)
CSS omadus margin võimaldab määrata ka tühja ruumi veebilehe elementide ümber ehk veeriseid. Paneme tekstilõigu ümber punase raami ja iga külje peale 50px tühja ruumi.
p {
border: 2px solid red;
margin: 50px;
}
Atribuut id
Et stiililehe kasutamisel kujundada ainult ühte kindlat elementi või elemendi osa, saame kasutada id atribuuti, mille lisame elemendi algusmärgendisse. Näiteks soovime muuta ainult ühe kindla tekstilõigu siniseks:
<p>See on tavaline tekst.</p> <p id="sinine">See on sinine tekst.</p> <p>See on jällegi tavaline tekst.</p>
Seejärel määrame ära id-le “sinine” omase stiili:
#sinine{
color: blue;
}
Klassi atribuut (class)
Kui atribuuti id kasutame ainult ühe kindla elemendi stiliseerimiseks, siis atribuuti class saame kasutada mitme sama atribuudi väärtust omava elemendi muutmiseks.
<!DOCTYPE html>
<html>
<head>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<p>See on tavaline tekst.</p>
<p class="error">See on punane tekst.</p>
<p>See on jällegi tavaline tekst.</p>
<p class="error">See on ka punane!</p>
</body>
</html>
