Iepriekšējā sadaļā apskatījām, kā kāda veida elementiem nomainīt izskatu. Taču ko darīt, ja izmainīt vajag tikai vienu vai dazus no viena veida elementiem, nevis visus? Šeit palīgā nāk elementu klases un identifikatori. Tie dod iespēju piešķirt kādu īpašību vienam elementam (id) vai elementu grupai (klase).

ID un/vai klasi var piešķirt jebkuram HTML elementam. Atšķirība ir apstāklī, ka ID norāda uz konkrētu elementu, kurš visā dokumentā ir tikai viens. Savukārt klasē var būt vairāki elementi, kā arī vienam elementam var būt vairākas klases.

Nedaudz paplašināsim iepriekšējā sadaļā doto piemēru, izveidojot četrus paragrāfus. Pirmajam no tiem es vēlos tekstu treknrakstā un pasvītrojumu, tādēļ tam piešķiršu identifikatoru pirmais, jeb id="pirmais". Savukārt katram otrajam paragrāfam es vēlos izmainīt kreisajā pusē esošās dekorācijas krāsu, tādēļ tiem piešķiršu klasi neparasts, jeb class="neparasts".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <title>Mana CSS mājas lapa</title>
    <link rel="stylesheet" href="stils.css" type="text/css" />
</head>

<body>
    <h1>Sveicināti manā stilīgajā mājas lapā!</h1>
    
    <p id="pirmais">Čau! Es šobrīd mācos izmantot CSS.<br />
    Domāju, ka ar CSS šī lapa noteikti izskatīsies labāk, nekā bez.</p>
    
    <p class="neparasts">Gribi zināt, kas ir CSS?<br />
    Apskati <a href="https://exs.lv/?p=38946">pamācību!</a></p>
    
    <p>Visvairāk man patīk būt ziemā, <br />
        Kad sniegu var ēst un aizbāst aiz krekla.</p>
    
    <p class="neparasts">Visvairāk man patīk būt ziemā, <br />
        Kad zeme ir sniega baltumā.</p>

</body>

</html>

CSS kodā identifikatoru atpazīst ar # simbolu, savukārt klases nosaukums sākas ar . (punktu).

body {
    background: gray;
    color: white;
    font-family: verdana;
    font-size: 11px;
    padding: 20px;
}

h1 {
    color: orange;
    font-size: 16px;
}

p {
    background: black;
    border-left: 5px solid orange;
    padding: 5px;
}

p#pirmais {
    font-weight: bold;
    border-bottom: 5px solid orange;
}

p.neparasts {
    border-left: 5px solid purple;
}

a {
    color: red;
}

Rezultāts:

CSS klašu un identifikatoru paraugs

Klašu un identifikatoru nosaukumi

Klasu un identifikatoru nosaukumiem nav nekādu obligātu standartu, atskaitot to, ka tam jāsastāv no latīņu alfabēta burtiem un cipariem, un pirmais simbols vienmēr ir burts, tos var izvēlēties pēc savas gribas, tomēr lai atvieglotu sev un iespējams citiem darbu, vajadzētu ievērot dažus nosacījumus:

  • Nosaukumam ir jābūt aprakstošam, taču nevajadzētu ieslīgt detaļās. Piemēram, ja vēlies lai linki uz citām lapām būtu atšķirīgi, labs klases nosaukums būtu "areja_saite" vai "external", nevis "zilais_links_uz_citu_lapu_ar_bultinu_gala". Šādu nosaukumu būs grūti atcerēties, pie tam, tas izskatīsies dīvaini, ja kaut kad nākotnē Tu nolemsi, ka tam jākļūst sarkanam un ar rociņas attēlu. Klases nosaukumam nav jāapraksta elementa izskatu! Arī pārlieku īsi un neizteiksmīgi nosaukumi nebūtu vēlami. Ja vajadzēs veikt kādas izmaiņas mājas lapā vairākus gadus pēc tās pabeigšanas, diez vai Tu atcerēsies, ar ko atšķiras "s1x" no "s1y".
  • Nav svarīgi kādu valodu Tu izvēlies, bet paliec pie tās - nav vēlams daļu klašu nosaukumu rakstīt latviski un daļu angliski. Tas gluzi vienkārši sarežģīs darbu.
  • Tas pats attiecas uz - vai _ lietošanu aizvietojot atstarpes. Lai ko Tu izvēlētos, paliec pie tā.
  • Nelieto klašu nosaukumos speciālos simbolus un garumzīmes/mīkstinājuma zīmes. Uz dažām pārlūkprogrammām tas iepējams strādās, bet labāk no tā izvairīties.

Kad nevajag lietot klases

Vienmēr centies izdomāt, kā ar iespējami mazu koda daudzumu panākt vēlamo efektu. Piemēram, ja Tev ir izvēlnes bloks <div id="izvelne">, un Tu vēlies piešķirt kādu īpašību visām saitēm iekš šī bloka, nav nekādas vajadzības pievienot klasi katrai saitei. Iekš CSS iespējams norādīt precīzu ceļu līdz vajadzīgajiem elementiem, šajā gadījumā tas būtu:

#izvelne a {
  īpašība: vērtība;
}

Šis kods attieksies uz visām saitēm izvēlnē.

Laboja mad, labots 1x