HTML un CSS iesācējiem (26. daļa): Kā veikt piekļuvi ar selektoriem (1)

Selektori nosaka, kā CSS stili tiek piešķirti HTML elementiem. Atbilstošā definīcijā vispirms norāda elementa nosaukumu, uz kuru selektors jāpiekļūst. Pati deklarācija notiek iekavās. Deklarācijā var norādīt vienu vai vairākas īpašības. Tātad vispārējais sintakses veids izskatās šādi:

Selektors {
   Īpašība1: Vērtība;
   Īpašība2: Vērtība;
   Īpašība3: Vērtība;
}

Atbilstoša definīcija ir jums jau iepriekšējā pamācībā sastapties.

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

Obliģāti pārliecinieties, ka katru deklarāciju pabeidz ar semikolu.

Pārskats par pieejamajiem selektoriem

Faktiski CSS piedāvā diezgan lielu selektoru daudzumu, no kuriem es jums iepazīstināšu ar svarīgākajiem. Jo vienīgi, ja jūs pārvaldāt darbu ar selektoriem, jūs varat saprātīgi definēt CSS īpašības.

Vienkāršākais veids, kā piešķirt stilus HTML dokumentā, ir Elementa selektors.

Ar sekojošo sintaksi visiem p-elementiem tiek piešķirta melnā krāsa.

p { 
   color: #009966; 
}

Ja jums ir nepieciešams piešķirt vairākiem elementiem vienu un to pašu stilu, tas arī ir iespējams.

Šajā gadījumā attiecīgos elementus vienkārši ieraksta pēc kārtas, atdalot tos ar komatu.

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

Jūs varat arī piešķirt vairākus stilus elementiem. Stili katru reizi norāda ar semikolu atdalīti.

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

Ir iespējams arī apvienot minētās variantes.

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

Rezultāts var izskatīties šādi:

Apgabali ar vairākiem elementiem

Bieži vien ir nepieciešamība formatēt apgabalu, kas sastāv no vairākiem HTML elementiem. Šādām situācijām HTML piedāvā divas speciālas elementu span un div. Šie elementi jums būs sastopami – protams, arī šajā sērijā – vairākas reizes.

Piemērs:

<div class="artikel">
  <h1>Krāsu eksplozija</h1>
  <p class="thema">Norāde uz krāsu eksplozijas izveides pamācību no <span class="autor">MarkusMelzer</span>.</p>
</div>

Viena starp div un span atšķirība ir tāda, ka div elements piespiež jaunu rindu teksta plūsmā. No otras puses, span neatver jaunu rindu. Parādītajā piemērā tiek definēts div apgabals, kurā ir virsraksts un teksta rindkopa. Teksta rindkopā atkal ir span apgabals.

ID un klases selektori

Līdz šim bija izmantoti elementu selektori. Ar pēcākminēto piemēru visi h1 virsraksti formatēti ar šādu selektoru.

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

Tā tomēr nebūt ne vienmēr ir vēlamais rezultāts. Piemēram, ja jums ir nepieciešams piešķirt noteiktas īpašības vienam vai vairākiem, bet ne visiem h1 virsrakstiem? Šādos gadījumos CSS piedāvā divas iespējas: klases un ID selektori.

Ar klases selektoriem var ļoti precīzi atlasīt HTML elementus ar klases atribūtiem. Attiecīgajam HTML elementam jānorāda atribūts class. Klases definīcijas sākas ar punktu.

Piemērs:

.sarkans { 
   color: sarkans; 
}

Šeit tika definēta klase sarkans. Lai pievienotu sarkanās īpašības konkrētam HTML elementam, nepieciešams norādīt class, pēc tam norāda klases nosaukumu.

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

ID selektoru var izmantot līdzīgi vienkārši. ID selektoru atpazīst pa dubultajam krustiņam.

#topnavi { 
   color: zila; 
};

Šajā piemērā tika definēta ID topnavi. Bet uzmanību: vienam dokumentā faktiski var piešķirt tikai vienu ID. Piekļuve definētajai ID īpašībai izskatās šādi:

<div id="topnavi">Šeit ir navigācija</div>

Īpašībai id piešķir ID nosaukumu. Šeit jums jāņem vērā, ka šeit jānorāda diezsmacis.





Parādītie dati var tikt apvienoti arī kopā. Piemēram, HTML elementam var tikt piešķirtas vairākas klases.

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

Šajā piemērā tekstam tiek piešķirtas divas klases sarkans un liels. Ja vēlaties norādīt gan klasi, gan ID, tas izskatās šādi:

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

Arī elementus un ID var apvienot. Šeit ir piemērs:

div.navi { 
   color: zils; 
}

Šī sintakse attiektos tikai uz div elementiem ar klasi navi. p elementi, kuriem arī ir klase navi, nebūtu ietekmēti no tā.

CSS ir vēl viens veids, kā apvienot atlasītājus. Lai redzētu šo sintaksi, aplūkojiet tālāk minēto piemēru:

h1 { 
   color: sarkans;
}
em { 
   color: zils; 
}

Šeit visām pirmā līmeņa virsrakstiem tiek piešķirta sarkanā krāsa. em elementi savukārt iegūst zilo krāsu.

Apvienojot abas norādes, var panākt, ka tikai em elementi, kas atrodas h1 elementos, tiek iekrāsoti zilā krāsā.

h1 em { 
   color: zils; 
};

Elementu nosaukumi tiek norādīti atdalot tos viens no otra bez komatiem.

Tas ir populārs kļūdas pieduršanas punkts, kurā pat CSS iesācēji var nokļūt. Šeit ir tāda pati sintakse, bet ar komatu:

h1, em { 
   color: zils; 
}

Kas nozīmē šī sintakse? Tā adresē visus h1 un visus em elementus. Tas ir pavisam kas cits nekā sintakse bez komata!

Vēl viens svarīgs atlasi rādītājs ir Universālais atlases rādītājs. Tas ļauj atlasīt jebkuru elementu. Šo rādītāju definē ar asterski.

* { 
   color: sarkans; 
}

Šī sintakse padarītu visus elementus sarkanus. Arī šim atlases rādītājam ir jāņem vērā dažas sintakses īpatnības.

#mainnavi * { 
   color: sarkans; 
}

Šajā piemērā visu elementu priekšplāna krāsa iekšēji no elementa ar ID mainnavi tiek iestatīta uz sarkanu. Tas gan neattiecas uz pašu elementu.

Ja Universālais atlases rādītājs stāvētu izvēlēšanās sākumā, to nebūtu nepieciešams norādīt. Tādējādi tas šeit būtu lieks:

* p { 
   color: sarkans; 
}

Šī sintakse ir tāda pati kā šī:

p { 
   color: sarkans; 
}

Nākamajā pamācībā jūs iepazīsieties ar citiem atlases rādītājiem.