Mida sa peaksid juba teadma?
Enne jätkamist peaksid olema sul põhilised teadmised järgnevas:
- HTML / XHTML
- CSS on lühend sõnast Cascading Style Sheets
- Stiilid defineerivad, kuidas huvada HTML elemente
- Välised stiilifailid säästavad palju vaeva.
- Väliseid stiilifaile hoitakse CSS failides
CSS Näidis
HTML dokumenti saab kuvada mitmete erinevate stiilidega.
Vajuta siia, et näha näidet
CSS Süntaks
Näited
Näide 1
Näide 2
Süntaks
CSS süntaks koosneb kolmest osast: valija (selector), omadus (property), väärtus (value)
- Code: Vali kõik
selector { property: value; }
Selector on tavaliselt HTML tag, mida sa soovid defineerida, property on attribuut, mida sa muuta soovid ning igal attribuudil saab olla väärtus (value). Omadused (property) on üksteisest eraldatud semikoolonitega ; ning ümbritsetud loogeliste sulgudega ({ ja }):
- Code: Vali kõik
body { color: black; }
NB! Kui väärtus koosneb mitmest sõnast, siis pane väärtus kahekordsete ülakomade vahele:
- Code: Vali kõik
p { font-family: "sans serif"; }
Selleks, et stiili definitsioone oleks veelgi mugavam lugeda, võid sa panna iga omaduse eraldi reale:
- Code: Vali kõik
p {
text-align: center;
color: black;
font-family: arial;
}
Gruppeerimine
Samuti saab mitut selectorit defineerida korraga ehk ühe grupina. Selleks tuleb selectorid eraldada üksteisest komadega. Järgnevas näites header elemendid huvatakse roheliselt:
- Code: Vali kõik
h1,h2,h3,h4,h5,h6 { color: green; }
Class'i selectorid
Classi selectoritega saad sa defineerida samat tüüpi elementidele erineva stiili.
Näiteks sa tahad, et sinu dokumendis oleks kahte tüüpi paragraafe: üks vasaku joondusega, teine keskmise joodusega.
- Code: Vali kõik
p.right { text-align: right; }
p.center { text-align: center;}
Enda HTML documendis sa pead kasutama class'i selectorit:
- Code: Vali kõik
<p class="right">See paragraaf on parempoolse joondusega</p>
<p class="center">See paragraaf on keskmise joondusega</p>
Selleks, et ühele elemendile anda mitu class'i, tuleb classide nimed eraldada tühikuga:
- Code: Vali kõik
<p class="center bold">See on paragraaf</p>
Sa saad elemendi nime ka valehe jätta, seega kasutatakse seda klassi kõikidel html elementidel, millele on see class antud.
- Code: Vali kõik
.center { text-align: center; }
Järgnevas näites on nii elemendil h1 kui ka elemendil p class="center". See tähendab, et mõlemad elemendid järgivad .center selectoris olevaid reegleid.
- Code: Vali kõik
<h1 class="center">See on keskmise joondusega</h1>
<p class="center">See on samuti keskmise joondusega.</p>
NB! Ära alusta class'i nime numbriga. Seda toetab ainult Internet Explorer!
Stiilide lisamine ainult teatud attribuutidega elementidele
Seda reeglit järgitakse kõigis input elementides, mille attribuudi type väärtus on text:
- Code: Vali kõik
input[type="text"] { background-color: blue; }
id Selector
Sa saad defineerida stiile id attribuutiga. Id defineerimiseks kasutatakse # märki.
Järgnevat reegel kehtib vaid elementidele, millel on attribuut id väärtusega green:
- Code: Vali kõik
#green { color: green; }
Järgnev reegel kehtib vaid paragraafile (p), millel on attribuut id väärtusega para1:
- Code: Vali kõik
p#para1 {
text-align: center;
color: red;
}
NB! Ära alusta class'i nime numbriga. Seda ei toeta Mozilla Firefox
CSS Kommentaarid
Kommentaarid on selleks, et selgitada sinu koodi. Kommentaarid ignoreeritakse brauseri poolt. CSS kommentaari algust tähistab /* ning lõppu */
- Code: Vali kõik
/*See on kommentaar*/
p {
text-align:center;
/* Siin on veel üks kommentaar */
color: black;
font-family: arial;
}
Kuidas...
Kolm moodust CSS lisamiseks
- Väline stiilifail
- Sisene stiil
- Inline stiil
Välised stiilifailid
Väliseid stiilifaile on hea kasutada, kui seda stiili on vaja paljudes HTML failides kasutada. Väliste stiilifailidega sa saad kogu lehe stiili muuta vaid ühest failist. Välise stiilifaili määramiseks tuleb kasutada <link> elementi, mis käib <head> ja </head> vahel:
- Code: Vali kõik
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Väliseid stiilifaile saab kirjutada iga tekstiredaktoriga. CSS fail ei tohi sisaldada HTML tage. Stiilifail tuleb salvestada .css faililaiendiga
Sisesed stiilifailid
Siseseid stiile tuleks kasutada siis, kui HTML dokunedil on tema enda unikaalne stiil, mida mujale i kasutata. Sisesed stiilid tuleks lisada <style> tagide vahele:
- Code: Vali kõik
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Inline stiilid
Inline stiilide lisamiseks kasutatakse style attribuuti.
- Code: Vali kõik
<p style="color: sienna; margin-left: 20px;">See on paragraaf.</p>
Lõpp
See on siis praeguseks kõik. Kunagi on ehk plaanis teha ka õpetus erinevate CSS attribuutide kohta kuid senikaua võite nendest lugeda originaalallika kaudu.
Copyright
Selle tõlke kasutamine ilma minu nõusolekuta on keelatud.
Originaalallikas
http://w3schools.com/css/css_intro.asp