CSS
CSS e. Cascading Style Sheet on viis, kuidas kiirelt, efektiivselt ja minimaalse vaevaga kujundada HTML veebileht.
Sisukord
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; }