CSS

CSS e. Cascading Style Sheet on viis, kuidas kiirelt, efektiivselt ja minimaalse vaevaga kujundada HTML veebileht.

Eeldused

Enne selle teema lugemist tuleks HTML põhitõed endale selgeks teha.

Süntaks

 valija [, valija2, ...][:pseudo-klass] {
   atribuut: väärtus;
   [atribuut2: väärtus2;
   ...]
 }

 /* kommentaar */

Kuidas kasutada

Stiilid tuleb defineerida ja vajadusel ka rakendada

Defineerimine

• Defineerida CSS stiilid veebilehe sees

<style type="text/css">

/* stiilide defineerimine */

</style>

• Luua eraldi fail CSS stiilide kirjeldusega ja viidata sellele veebilehe päises

<link rel="stylesheet" href="css/minucss.css" type="text/css" media="screen" />

Rakendamine

• Lisame elemendi sisse vastava CSS koodi

<div style="padding: 5px; border: 1px solid #aaa;">Kasti sisu...</div>

• Lisame elemendi sisse viite vastavale definitsioonile

<div class="stiil1">Kasti sisu...</div>

CSS

Taust

Elemendi BODY taustavärvi muutmiseks:

body {
  background-color: #d0e4fe;
}

... või ka taustapildi määramiseks ...

body {
  background: url( 'images/taustapilt.png' );
}

Määrame taustapildi alla paremasse nurka nii, et ta ei korduks:

body {
  background-image:url('images/taust_parem_alumine_nurk.png');
  background-repeat: no-repeat;
  background-position: right bottom;
}

Tekst

Teksti värv:

color: rgb(255,0,0);       /* red, blue, ..., #abcdef, .., rgb(0,255,255), .. */

Teksti joondus:

text-align: center;        /* left, center, right, justify */

Teksti dekoratsioon:

text-decoration: none;     /* overline, line-through, underline, blink, none */

text-transform: uppercase; /* uppercase, lowercase, capitalize */

Lõigu kaugus vasakust servast:

p {
  text-indent: 50px;
}

Loome paragraafi rööpjoondusesega, kus tekst on sinist värvi ja allajoonitud:

p {
  color: #00f;
  text-align: justify;
  text-decoration: underline;
}

Kirjastiil

Muudame paragraafi tekstistiili, suurust ja tühja ruumi, mis jäetakse enne ja pärast lõiku:

 p {
   font-family: "Times New Roman";
   font-size: 20px;
   margin-top: 30px;
   margin-bottom: 30px;
 }

Viidete värv on vaikimisi sinine ja lilla. Kui viiteks teha pilt, siis teda ümbritseb viite värvides raam. Et keelata ära igasugused raamid piltidel:

 img {
   border: 0;
 }

Defineerida saab ka oma stiile, mida vastavale elemendile anda:

 .stiil1 { 
   font-family: verdana, tahoma, arial, helvetica, "trebuchet ms";
   font-size: 12px;
   font-weight: normal;
   text-decoration: none;
   color: #000000; 
 }

<p class="stiil1">Tekstilõik, mis formaaditud stiil1 järgi.</p>

Saab ka öelda konkreetsemalt, mis elementidele see stiil kehtib. Teised elemendid seda stiili kasutada ei saa:

 p.stiil1 { 
   font-family: verdana, tahoma, arial, helvetica, "trebuchet ms";
   font-size: 12px;
   font-weight: normal;
   text-decoration: none;
   color: #000000; 
 }

Pseudo-klasside kasutamine. Kui hiir liigutada p elemendi peale, siis muudetakse ajutiselt ära taustavärv:

 p:hover { background: #abcdef; }

asd

Lingid

http://www.w3schools.com/css/default.asp