top

Vartotojo meniu

Forumo naujausi pranešimai

Balsavimas

Kokios muzikos klausotės?
 

Šiuo metu prisijungę

    Niekas neprisijungęs.

Sintaksė PDF Spausdinti
Autorius: Primatas   
Data: Antradienis, Sausio 06, 2009

CSS sintaksę sudaro trys dalys: selektorius, ypatybė/savybė ir jos reikšmėl:

selektorius {savybė: reikšmė;}

Selektorius dažniausiai yra koks nors HTML elementas, kurį norime pakeisti, savybė tai yra atributas, kurį norime pakeisti tame HTML elemente ir reikšmė tai tokia reikšmė, kurią norime priskirti tam atributui. Savybė ir reikšmė yra atskiriami dvitaškiu ir apgaubti iš abejų pusių riestiniais skliaustais. Po reikšmės yra rašomas kabliataškis. Pvz.:

body {background-color: #C30;}

Pastaba: Jei reikšmę sudaro keli žodžiai, juos rašome tarp kabučių:

p {font-family: Georgia, "Times New Roman", Times, serif;}

Pastaba: Jei norime aprašyti kelias elemento savybes vienu metu, tai galima padaryti atskiriant keikvieną savybę kabliataškiu. Pavyzdys žemiau parodome, kaip galima paragrafo tekstą išlygiuoti per vidurį ir kartu teksto spalvą pakeisti į raudoną.

p {
text-align: center;
color: #FF0000;
}

Grupiavimas

Aprašant CSS stilius galima grupuoti selektorius, kad nereiktų aprašinėti kiekvienam elementui stilių atskirai. Pavyzdžiui mes norime, kad visi <h1>, <h2>, <h3>, <h4>, <h5> ir <h6> elementai būtų žalios spalvos:

h1,h2,h3,h4,h5,h6 {
color: #00FF00;
}

Klasės selektorius

Su klasės selektoriumi galime aprašyti vieną bendrą stilių ir jį pritaikyti keletai HTML elementų. Klasės pavadinime neturi būti jokių tarpų ir geriau vengti spec. simbolių. Jei pavadinime naudojami keli žodžiai juos galima atskirti su brūkšneliu. pvz.: "klases_pavadinimas", "klases-pavadinimas", arba tiesiog kiekvieną naują žodį pradėti didžiąja raide: "KlasesPavadinimas". Taip pat galima naudoti skaičius, tačiau geriau pradėti pavadinima raide, pvz.: "klases_pavadinimas_1", "klase2" ir panašiai. Neteisinga: "1_klase". Teisinga: "klase_1". Taip pat nepatartina naudoti lietuviškų raidžių.

Pastaba: Pavadinimus, kaip visada geriau parinkti logiškus, kad vėliau būtų lengviau atsirinkti kieno stilius aprašytas, pvz.: "pagrindinis_div_konteineris". Aš pats dažniausiai naudoju visiems konteineriniams elementams prierašą "_c", pvz.: "div_main_c", kas reikštų, kad šis stilius yra skirtas div elementui, kuris yra pagrindinis konteineris kitiems elementams.

Taigi, tarkime, kad norime turėti dvi skirtingo stiliaus klases skirtas paragrafams. Vieną, kuri nurodytų raudoną tekstą ir lygiuotą iš kairės, o kitą su žaliu tekstu palygiuotu dešiniau.

p.desinej_zalias {text-align: right; color: #00FF00;}

p.kairej_raudonas {text-align: left; color: #FF0000;}

Tada HTML dokumente nurodome paragrafo elemento kalsės atributo reikšmę tokią, koks yra klasės pavadinimas:

<p class="desinej_zalias">
Šitas paragrafas bus lygiuojamas dešinėje ir jo teksto spalva bus žalia.
</p>
<p class="kairej_raudonas">
Šitas paragrafas bus lygiuojamas kairėje ir jo teksto spalva bus raudona.
</p>

Pastaba: Jeigu tam pačiam elementui norime priskirti kelias klases, naudojame tokią sintaksę:

<p class="centruotas paryskintas">
Paragrafo tekstas.
</p>

Šitas paragrafas bus paveiktas stilių, kurie aprašyti klasėse "centruotas" ir "paryskintas. Pirmiausia bus pridėti klasės "centruotas" stiliai, poto klasės "paryskintas". Jeigu klasėse bus aprašyti tie patys stiliai, tik su skirtingomis reikšmėmis, dauguma naršyklių naudos stilius, kurie aprašyti paskutinėje klasėje. Šiuo atveju klasės "paryskintas" stilius.

Viršuje aprašyta klasė prasidėjo su HTML elemento pavadinimu: p.desinej_zalias, p.kairej_raudonas. Jei norime sukurti bendrą klasę visiems elementams, kad ją galėtume naudoti su betkokiu norimu elementu, tada praleidžiame elemento pavadinimą ir rašome tik pačios klasės pavadinimą: "raudonas_1px_raudonas_remelis". Taip pat nepamirštame padėti taško prieš klasės pavadinimą. Taškas nurodo, kad tai yra klasė. Vėliau susipažinsime su simboliu "#".

.raudonas_1px_remelis {border: solid 1px #FF0000;}

Žemiau esančiame kode suteikiame klasėje "raudonas_1px_raudonas_remelis" aprašytus stilius keliems elementams:

<h1 class="raudonas_1px_remelis">
Antraštė su 1px storio, solid stiliaus raudonu rėmeliu.
</h1>

<p class="raudonas_1px_remelis">
Paragrafas su 1px storio, solid stiliaus raudonu rėmeliu.
</p>

<div class="raudonas_1px_remelis">
div konteineris su 1px storio, solid stiliaus raudonu rėmeliu.
</div>

Stilių pridėjimas elementams su tam tikrais atributais

Taip pat galima pridėti stilių prie HTML elemento, kuris turi tam tikrus konkrečius atributus.

Ši CSS taisyklė bus pritaikyta visiems input elementams, kurie turi atributą type su reikšme "text":

input[type="text"] {background-color: blue;}

ID selektorius

Galima apibrėžti stilius HTML elementui su id selektoriumi. ID selektorius žymimas ženklu #.

Stiliaus taisyklė esanti žemiau bus pritaikyta elementui, kurio atributo id reikšmė yra "zalia":

#zalia {color: green;}  

Ši stiliaus taisyklė bus pritaikyta elementui p, kuris turi atributą id su reikšme "paragrafas1":

p#paragrafas1 {
text-align: center;
color: red;
}

Pastaba: ID vardams galioja tos pačios taisyklės kaip ir klasių vardams! Nepradėkite pavadinimo skaičiumi, nenaudokite spec. simbolių.

CSS komentarai

Komentarai yra naudojami, kai norime parašyti paaiškinimą, kurio naršyklė kraudama puslapį nežiūrėtų. Jie padeda nepasimesti kode, ypač kai jį tenka redaguoti po kažkurio laiko. CSS komentarai prasideda su "/*" ir baigiasi su "*/", pvz.:

/* Tai yra komentaras */
p {
text-align: center;
/* Tai yra dar vienas komentaras */
color: black;
font-family: arial;
}
Komentarai
Paieška
Tik registruoti vartotojai gali rašyti komentarus!

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Prisijungę šių reklamų nematysite. prisijungti

bottom
top

Reklama

Plakatas
Plakatas
Plakatas

Naujausi

Skaitomiausi

Statistika

hey.lt stats.lt

bottom

Dizainą sukūrė: Neshas ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- Privertė veikti: Primatas
parašyti administracijai
Manualai.lt 2008-2009