Stiililehed Mis? ja Kuidas?
Stiililehti loeb brauser ja kuvab vastavalt loetule. Stiililehtede lisamiseks on kolm moodust:
Välimine stiilileht
Välimine stiilileht on ideaalne lahendus, juhul kui soovitakse luua ühtne stiil, mitmel veebilehel. Välimise stiililehe abil saab muuta kogu veebisaiti, muutes ainult ühte faili. Selleks peab iga veebileht olema ühenduses stiililehe failiga. Selleks kasut. <link> märgist. See märgis peab asetsema veebidokumendi "head" sektsioonis.
<head> <link rel="stylesheet" type="text/css" href="minustiil.css" /> </head>
Nüüd loeb brauser faili "minustiil.css" ning vormistab dokumendi sellele failile vastavalt.
Välimist stiililehte saab kirjutada ükskõik millise tekstiredaktoriga. Failis ei tohi olla ühtegi Html märgist (teegi). Stiililehe fail tuleb säilitada, lisades faililaiendi .css. Allpool olevas näites on tegemist ühe lihtsa stiililehe failiga.
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("pildid/pilt2.gif")}
| Ära jäta tühikuid omaduse väärtuse ja ühiku vahele! Juhul kui sa kirjutad "margin-left: 20px" asemel "margin-left: 20 px" Siis Mozilla/Firefox ei pruugi sellisest koodis aru saada. |
Välimise stiililehe faili nimes võib kasutada tähti a-z ja numbreid 0-9 samuti sidekriipsu (-) ja alakriipsu (_). Faili nimi peab algama tähega. Kasuta väikesi tähti. Hoia faili nimi lühem kui 20 tähemärki, koos faililaiendiga.
Sisemine stiilileht
Sisemist stiililehte kasut. juhul kui mõni üksik veebidokument omab unikaalset stiili. Stiil kirjutatakse dokumendi "head" sektsiooni, kasutades selleks <style> märgist (teegi). Näiteks nii:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("pildid/pilt2.gif")}
</style>
</head>
Brauser loeb nüüd stiili definitsiooni ning kuvab dokumenti vastavalt.
Pane tähele: Vanemad brauserid ei pruugi toetada stiile ning seepärast on mõtekas kirjutada dokumendi stiil Html kommentaari märgiste sisse. Näiteks nii:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("pildid/pilt2.gif")}
-->
</style>
</head>
Inline e. "reasisene" stiil
Kaskaadsuse olemus väljendub "inline" stiili prioriteedis. S.t. et "inline" stiil muudab vastavat elementi igal juhul vaatamata sellele mis on sisemises v. välimises stiililehes märgitud.
Seega, kui ei õnnestu teistes stiililehtedes vajalikku tulemust saavutada siis "inline" on omal kohal. Kui ka siis vajalikku tulemust ei saavuta, tuleb viga otsida mujalt.
Kuigi "inline" stiili on lihtne kasutada, peab sellega olema ettevaatlik. "Inline" stiili segamine põhistiili hulka võib rikkuda veebidokumendi üldist kontseptsiooni.
Inline stiili kasutamisel lisatakse stiili atribuut, mingi kindla märgise (teegi) juurde, millist soovitakse kujundada. Allpool olevas näites muudetakse paragrahvi tausta värvi ja raamistust:
background:#ccc; color:#fff; border: solid black 1px;
ja tulemus on selline:
See on mingi paragrahv
