Site hosted by Angelfire.com: Build your free website today!

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

  red_dot.gif Stiilid Html'is
Nii lisatakse stiili informatsioon "head" sektsiooni.
  red_dot.gif Allajoonimata link
Stiile kasutades saame teha nii, et lingid leheküljel jäävad allajoonimata. Kui stiile ei ole määratud, siis lisatakse allajoondused vaikimisi.
  red_dot.gif 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