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 esimese rea kaugus vasakust servast:

text-indent: 50px;

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

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

FONT

CSS font deinfeerib kirjastiili perekonna, jämeduse, suuruse ja stiili.

Krirjastiil:

font-family: "Times New Roman", Times, serif;

font-style: normal; /* normal, italic */

font-weight: bold; /* normal, bold, bolder, lighter */

Kirjastiili suurus. Kasutatakse nii px kui em suurust, kusjuures viimast soovitab W3C. Vaikimisi on krirja suurus 16px = 1 em.

font-size: 22px;

Muudame paragraafi tekstistiili ja suurust:

p {
  font-family: "Times New Roman";
  font-size: 20px;
}

Viited

• a:link - avamata viide
• a:visited - avatud viide
• a:hover - viide, kui hiir on selle peal
• a:active - viide klikkimise hetkel

Tihti eemaldatakse viidete alt alajoon:

a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover   { text-decoration: underline; }
a:active  { text-decoration: underline; }

Loetelud

Numerdamata loetelud:

ul.a { list-style-type: circle; }

 Väärtus   Kirjeldus
 none      Märgita
 disc      Vaikimisi. Märgiks on •
 circle    Märgiks on ring
 square    Märgiks on ristkülik

Numerdatud loetelud:

TODO

 Väärtus                Kirjeldus
 armenian               Märgiks on Armeenia numbrid
 decimal	         Märgiks on number
 decimal-leading-zero	 Märgiks on number, millele eelneb 0 (01, 02, 03, jne.)
 georgian               Märgiks on Georgian number (an, ban, gan, jne.)
 lower-alpha            Märgiks on väikekirjas täht (a, b, c, d, e, jne.)
 lower-greek            The marker is lower-greek (alpha, beta, gamma, etc.)
 lower-latin            The marker is lower-latin (a, b, c, d, e, etc.)
 lower-roman            The marker is lower-roman (i, ii, iii, iv, v, etc.)
 upper-alpha            The marker is upper-alpha (A, B, C, D, E, etc.) 
 upper-latin            The marker is upper-latin (A, B, C, D, E, etc.)
 upper-roman            The marker is upper-roman (I, II, III, IV, V, etc.)

Raamid

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