HTML & CSS pradedantiesiems (dalis 26): Kaip naudotis selektoriais (1)

Selektoriai nustato, kaip CSS stiliai bus priskirti HTML elementams. Atitinkamai nurodžius, kokiam elementui selektorius turėtų būti pritaikytas, pateikiamas elemento pavadinimas. Tikra deklaracija tada vykdoma tarp riestinių skliaustų. Deklaracijoje gali būti nurodyta viena ar daugiau savybių. Taigi bendras sintaksės pavidalas atrodo taip:

Selektorius {
   Savybė1: Reikšmė;
   Savybė2: Reikšmė;
   Savybė3: Reikšmė;
}

Jūs jau sutikote su tokiu apibrėžimu per ankstesinį pamokymą.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Būtinai atkreipkite dėmesį, kad kiekvieną deklaraciją reikia užbaigti kabliataškiu.

Apžvelgiant prieinamus selektorius

Iš tikrųjų CSS turi gana didelį selektorių skaičių, iš kurių svarbiausius jums pristatysiu. Nes tik valdant darbą su selektais, galite teisingai apibrėžti CSS savybes.

Paprastiausias būdas priskirti stilių HTML dokumente yra elementų selektorius.

Sekančiu sintaksės pavyzdžiu visiems p elementams bus priskirtas juodas spalvos kodas.

p { 
   color: #009966; 
}

Jei norite priskirti tą patį stilių keliems elementams, tai taip pat įmanoma.

Tokiomis atvejais tiesiog įrašote atitinkamus elementus vienas po kito, kiekvieną atskiriant kableliu.

p, h1,  li { 
   color: #000; 
}

Be to, galite priskirti elementams keletą skirtingų stilių. Kiekvienas stilius nurodomas kableliu skiriami.

p { 
   color: #000; 
   background-color: red;
}

Įmanoma ir minėtų variantų derinys.

p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Galutinis rezultatas galėtų atrodyti taip:

Sritis su keliais elementais

Dažnai reikia suformatuoti sritį, kurią sudaro daugiau nei vienas HTML elementas. Tokiais atvejais HTML turi dvi specialias sritis: span ir div. Šie elementai jums – beje, šiame cikle – vėlgi dažnai pasitaikys.

Pavyzdys:

<div class="artikel">
  <h1>Spalvų sprogimas</h1>
  <p class="tema">Vadovas apie spalvų sprogimą nuo <span class="autor">MarkusMelzer</span>.</p>
</div>

Vienintelis skirtumas tarp div ir span yra tas, kad div elementas priverčia naują eilutę teksto sraute. span nekuria naujos eilutės. Pateiktame pavyzdyje apibrėžiama div sritis, kurioje yra antraštė ir teksto paragrafas. Teksto paragrafe vėl yra span sritis.

ID ir klasės selektoriai

Kol kas buvo naudojami elementų selektoriai. Šiuo pavyzdžiu per tokį selektorių bus formatuotos visos h1 antraštės.

h1 { 
   color: #000; 
   background-color: red;
}

Tačiau tai aišku ne visada yra norima. Kas jeigu, pavyzdžiui, norite priskirti tam tikras savybes tik vienam ar keliems, bet ne visiems h1 antraštėms? Tokiais atvejais CSS siūlo dvi galimybes, t.y. klasės ir ID selektoriuos.

Naudodami klasės selektorius HTML elementus su klasės atributais galite selektuoti labai tiksliai. Norint tai padaryti HTML elemente reikia nurodyti atributą class. Klasės aprašymai prasideda tašku.

Pavyzdys:

.raudona { 
   color: red; 
}

Čia buvo apibrėžta klasė raudona. Norint pridėti šias raudonai priskirtas savybes HTML elementui, reikia pateikti class po kurio seka klasės pavadinimas.

<p class="raudona">PSD-Tutorials.de</p>

ID selektorius taip pat naudojamas panašiai lengvai. ID selektorius atpažįstantis dvigubą kryžių.

#topmenuo { 
   color: mėlyna; 
};

Šiame pavyzdyje apibrėžtas ID topmenuo. Bet atkreipkite dėmesį: vienas ID turi būti priskirtas tik vieną kartą dokumente. Prieigą prie apibrėžto ID savybės galima gauti taip:

<div id="topmenuo">Čia yra navigacija</div>

Parametrui id priskiriama ID pavadinimas. Čia svarbu atkreipti dėmesį, kad šiuo atveju dvigubas kryžius nėra užrašomas.





Taip pat galima kombinuoti rodomus duomenis. Taigi, HTML elementui galima priskirti keletą klasių.

<p class="rot groß">PSD-Tutorials.de</p>

Šiame pavyzdyje teksto pavyzdžiui priskiriamos dvi klasės rot ir groß. Jei norite nurodyti klasę ir ID, tai atrodys taip:

<p class="rot" id="navi">PSD-Tutorials.de</p>

Taip pat galite kombinuoti elementus ir ID. Taip pat pavyzdys:

div.navi { 
   color: blue; 
}

Ši sintaksė taikytų tik div elementams su klasės navi reikšme. p elementai, turintys taip pat klasės navi reikšmę, neturėtų būti paveikti.

CSS yra dar viena selektorių kombinavimo rūšis. Pažvelkite į šią sintaksę:

h1 { 
   color: red;
}
em { 
   color: blue; 
}

Visoms pirmosios rūšies antraštėms suteikiama raudona spalva. em elementai, kitaip tariant, gauna mėlyną spalvą.

Kombinuodami šias dvi instrukcijas galite užtikrinti, kad tik tie em elementai, kurie yra viduje h1 elementų, būtų nudažyti mėlynai.

h1 em { 
   color: blue; 
};

Čia elementų pavadinimai yra išdėstyti vienas šalia kito, neįtraukiant kablelių.

Tai yra populiarus klaidų atlapa, į kurią patenka ir CSS naujokai. Čia tas pats sintaksės pavyzdys, kuriame tačiau naudojamas kablelis:

h1, em { 
   color: blue; 
}

Kas reiškia ši sintaksė? Visa tai yra skirta visiems h1 ir visiems em elementams. Tai visiškai kitaip nei be kablelio naudojant sintaksę!

Kitas svarbus selektorius yra universalus selektorius. Jis leidžia pasirinkti bet kurį elementą. Šis selektorius apibrėžiamas naudojant žvaigždutę.

* { 
   color: red; 
}

Naudojant šią sintaksę visi elementai būtų nudažyti raudonai. Šiam selektoriui taip pat reikia atidžiai stebėti kelias sintaksės ypatybes.

#mainnavi * { 
   color: red; 
}

Šiame pavyzdyje visų elementų spalva pagrindo elemente su ID mainnavi nustatoma kaip raudona. Tačiau tai netaikoma pačiam elementui.

Jei universalus selektorius būtų naudojamas deklaracijos pradžioje, jį nebūtų būtina nurodyti. Taigi, toks įrašas būtų nereikalingas:

* p { 
   color: red; 
}

Ši sintaksė yra lygiavertė šiai:

p { 
   color: red; 
}

Sekančioje instrukcijoje jūs sužinosite daugiau apie kitus selektorius.