Igal pool, kus iganes Sa ei viibiks!
Twitter | Github | phpBB.com - Eesti | phpBBeesti.eu Foorum | Facebook | DISCORD Chat

demo32 (3.2 on arenduses) - demo31 (3.1 on praegune live versioon)

phpBB - 1 tarkvara - üle 100 laienduse - eesti keeles - t a s u t a
phpBB - lokaliseeritud aastast 2008*!
*Erinevate haldajate käe all. Vaata lehekülge meist.

Be Here, Be Now, Be INSIDE phpBB!

Welcome to phpBB Estonian Translation Team


Are you a fan of phpBB? Do you have enthusiasm for translation work? If you do, we would love to invite you to help us with phpBB volunteer translation. If you want to join our volunteer translation team, please contact us by FB/TW DM or at et.translations@phpbbeesti.net

[Õpetus] CSS algajatele

Arutelud veebidisaini teemadel, mis kasutavad HTML / XHTML ja CSSi, ning üldistel graafika teemadel, nagu näiteks Photoshop ja teised.

Moderaator: Tugi

doozy
Postitusi: 409
Liitunud: 13 Mai 2014, 08:00
Asukoht: Tallinn
Sugu: Määratlemata

[Õpetus] CSS algajatele

PostitusPostitas doozy » 27 Mai 2014, 18:41

Sissejuhatus
Mida sa peaksid juba teadma?
Enne jätkamist peaksid olema sul põhilised teadmised järgnevas:
  • HTML / XHTML
Mis on CSS?
  • 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


Süntaks
CSS süntaks koosneb kolmest osast: valija (selector), omadus (property), väärtus (value)

Kood: 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 }):

Kood: Vali kõik

body { color: black; }


NB! Kui väärtus koosneb mitmest sõnast, siis pane väärtus kahekordsete ülakomade vahele:

Kood: Vali kõik

p { font-family: "sans serif"; }



Selleks, et stiili definitsioone oleks veelgi mugavam lugeda, võid sa panna iga omaduse eraldi reale:

Kood: 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:

Kood: Vali kõik

h1,h2,h3,h4,h5,h6 { color: green; }



Kood: Vali kõik

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.

Kood: Vali kõik

p.right { text-align: right; }
p.center { text-align: center;}


Enda HTML documendis sa pead kasutama class'i selectorit:

Kood: 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:

Kood: 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.

Kood: 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.

Kood: 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:

Kood: 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:

Kood: Vali kõik

#green { color: green; }



Järgnev reegel kehtib vaid paragraafile (p), millel on attribuut id väärtusega para1:

Kood: 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 */

Kood: 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:

Kood: 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:

Kood: 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.

Kood: Vali kõik

<p style="color: sienna; margin-left: 20px;">See on paragraaf.</p>





Originaalallikas
http://w3schools.com/css/css_intro.asp

Mine “Veebidisain ja graafika.”

Kes on foorumil

Kasutajad foorumit lugemas: Registreeritud kasutajaid pole ja 1 külaline

phpBB Eesti : Lahtiütlus