Html stiilid
HTML 4.0'is saab kogu lehe kujunduse viia dokumendist välja eraldi stiililehele.
Kui brauser loeb stiililehte siis vastavalt sellele dokumendile kujundab ta lehekülje. Stiililehtede lisamiseks on kolm moodust:
Väline stiilileht
Välimist stiililehte on mugav kasutada siis kui mitu veebilehte on sarnase siiliga. Stiililehel muudatusi tehes, saab muuta kõikide lehtede kujundust korraga. Teiste sõnadega. Muutes ühes stiililehe failis midagi, võib muuta kogu veebisaiti. Igas veebilehe dokumendis peab olema stiililehele viitav link. Selleks kasutatakse <link> märgist. See märgis tuleb kirjutada "head" sektsiooni.
<head> <link rel="stylesheet" type="text/css" href="minu_stiil.css"> </head>
Sisemine stiilileht
Kui ainult üks veebilehe dokument on ainulaadse kujunduse e. stiiliga siis tuleb kasutada sisemist stiililehte. See stiil määratakse <style> märgise abil, "head" sektsioonis
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
Reasisene (Inline) stiil
Reasisest stiili tuleb kasutada siis kui mingi ainulaadne kujundus peab ilmuma mõne elemendi sees.
Siin on kohane meelde tuletada, et vajalik on kasutada ainult neid atribuute, mis antud elemendi juurde kuuluvad. Stiili atribuutid võivad sisaldada ükskõik milliseid CSS omadusi. Allpool olevas näites muudetakse paragrahvi värvi ja taanet.
<p style="color: red; margin-left: 20px"> See on paragrahv. </p>
Selleks, et stiilidest paremini aru saada, tutvu CSS aabitsaga
Näited
Stiilid Html'is
Nii lisatakse stiili informatsioon "head" sektsiooni.
Allajoonimata link
Stiile kasutades saame teha nii, et lingid leheküljel jäävad allajoonimata. Kui stiile ei ole määratud, siis lisatakse allajoondused vaikimisi.
Link välisele stiililehele
Kuidas kasutada <link> märgist, mis viitab välimistele stiililehtedele.
Stiili märgised
Märgis | Kirjeldus |
---|---|
<style> | Määratleb stiili definitsiooni |
<link> | Määratleb linkide omavahelise seotuse |
<div> | Määratleb dokumendi sektsiooni |
<span> | Määratleb dokumendi sektsiooni |