Lengvas – CSS specifika (specificity) – svarbumas

2010-05-15 1 Komentaras NoriuZinoti.lt

CSS (angl. Cascading Style Sheets) – kalba, skirta dokumento vaizdavimo tvarkymui t.y. dokumento stiliaus taisyklių rinkinys.

Šiame trumpinyje raidė C (Cascading) reiškia pakopinis. Tačiau, ką gi tai reiškia? Cascading nusako, jog kiekviena stiliaus taisyklė, einanti vėliausiai, pakeis taisyklę, kuri buvo parašyta aukščiau. Tačiau kiekviena taisyklė turi išimtis, todėl taip yra ne visada. Tad pabandykime išsiaiškinti į ką vis dėlto reikėtų atkreipti dėmesį programuojant CSS.

Standartinis veikimo principas.

Pirmiausia išnagrinėkime standartinį pakopinio stiliaus pavyzdį:

PAVYZDYS 1:

Html kodo pavyzdys

<html>
<head>
   <title>Html kodo pavyzdys</title>
</head>
<body>
   <div klase="klase">
      <div class="klase_0">
            Klase 0 tekstas
      </div>
      <div class="klase_1">
            Klase 1 tekstas
      </div>
   </div>
</body>
</html>

Css pavyzdys

.klase {
       color:#ccc;
/* #ccc - pilka spalva */
}
.klase {
       color:red;
/* red - raudona spalva */
}
.klase_0 {
       color:blue;
/* blue - mėlyna spalva */
}

Pavyzdyje 1 pateiktame kode matome html kodą, turintį kelias klases, kurios yra priskirtos skirtingiems elementams, bei CSS kodą, kuriame atitinkamoms klasėms priskiriamas stilius.

CSS kalba yra pakopinė, todėl kiekviena stiliaus taisyklė einanti vėliau pakeis taisyklę einančia aukščiau.

Tai reiškia, kad vėliau einanti taisyklė:

.klase_0 {
       color:blue;
/* blue - mėlyna spalva */
}

pakeis stilių elementui „Klase_0 tekstas“ ir teksto spalva bus mėlyna, o likusio teksto dalis, kuri eina po klase („klase“) tekstas bus raudonas. Taip yra todėl, kad taisyklė:

.klase {
       color:red;
/* red - raudona spalva */
}

Eina vėliau nei pirmoji.

Tai standartinis CSS (pakopinių) stilių veikimas.

Rezultatas :

Klase 0 tekstas

Klase 1 tekstas

Kaip tai galima pakeisti ?

Yra keletas būdų, kuriuos reikėtų žinoti ir į juos atsižvelgti kai yra rašomas CSS:

1. Skaičiuojam svarbumo taškus.

CSS ypatumas, kurį privalu žinoti: kuo konkretesnis Jūsų kodas, tuo didesnę pirmenybę jis turės. Norėdami nustatyti, kurie selektoriai (html, klase,id) yra verti daugiau, taikysime šią sistemą:

• Duosime kiekvienam HTML elementui 1 tašką ( p, div, body ir t.t. );

• Duosime kiekvienai klasei 10 taškų (klase, . klase_0, .mano_klases_pavadinimas ir t.t. );

• Duosime kiekvienam ID (unikalus identifikatorius) 100 taškų (#id_1, #mano_id, #wrap ir t.t. );

• Norėdami sužinoti elemento svarbumą ir vertę suskaičiuosime visus jo taškus.

PAVYZDYS 2:


body #id_0 p { color: yellow; }
/* vertė : 1 + 100 + 1 = 102 */
/* spalva:geltona */
#id { color: red; }
/* vertė : 100 */
/* spalva:raudona */

.klase .klase_1 p { color: green; }
/* vertė : 10 + 10 + 1 = 21 */
/* spalva:žalia */

.klase p { color: blue; }
/* vertė : 10 + 1 = 11 */
/* spalva:mėlyna */

p { color: orange; } /* vertė : 1  */
/* spalva:oranžinė */

Kaip parodyta pavyzdyje 2, suskaičiavę kiekvieno elemento taškus, gauname jo „svarbumą“.

Išsiaiškinome taškų sistemą, dabar pasižiūrėkime, kaip tai veikia:

PAVYZDYS 3:

<html>
<head>
   <title>Html kodo pavyzdys 2</title>
</head>
<body>
   <div klase="klase">
      <div id="id_0">
          <p>
            Klase 0 tekstas
          </p>
      </div>
      <div class="klase_1">
          <p>
            Klase 1 tekstas
          </p>
      </div>
   </div>
</body>
</html>

Panaudoję CSS kodą iš pirmojo pavyzdžio, bei trečiojo pavyzdžio html kodą matome, kad su didesne verte esantys elementai, nors ir rašomi anksčiau, atvaizduojami kaip esantys svarbesni.

Rezultatas:

Klase 0 tekstas
(nes šiam elementui priskirta taisyklė kuri turi didžiausią vertę yra :
( body #id_0 p { color: yellow; } /* vertė : 1 + 100 + 1 = 102 */ ))
Klase 1 tekstas 
(nes šiam elementui priskirta taisyklė kuri turi didžiausią vertę yra :
(.klase .klase_1 p { color: green; } /* vertė : 10 + 10 + 1 = 21 */))

2. !important

Bet kurią taisyklę, galima padaryti svarbesnę už kitas, net jei ji turi ir aukštesnę vertę, panaudojus CSS elementą : !important (!svarbu).

Šis elementas dažnai praverčia norit patikrinti CSS stiliaus veikimą, taisant CSS, norint atrasti reikiamą redagavimo elementą, ir pan. Visa, ką reikia padaryti – prie norimos CSS taisyklės pridėti šį elementą.

PAVYZDYS 4 :


.klase  p{

color:blue !important;

}

#id_0 {

color:red;

}

Naudodami pavyzdys 3 HTML kodą, gauname, jog nors ir aukščiau yra #id_0 taisyklė, nors ji ir turi didesnę vertę, bet tekstas „Klase 0 tekstas“ vis tiek bus raudonas, nes panaudotas elementas !important.

Rezultatas :

Klase 0 tekstas

Jeigu CSS‘e naudosime daugiau negu vieną !important elementą, CSS taisyklės vėlgi veiks pakopiniu principu – vėliau einanti taisyklė, perrašys taisyklę, einančią ankščiau, net jei ji ir turės elementą !important.

Kad ir kokia gali pasirodyti vertinga !important taisyklė, patartina ją naudoti kuo mažiau, nes pagrindinė šios taisyklės paskirtis – tikrinti (testuoti) CSS.

Programavimas
, , , ,


Vienas komentaras - tema “Lengvas – CSS specifika (specificity) – svarbumas”

  1. Sammy Hanley Atsakyti 2011-03-17 19:09

    I’d be inclined to permit with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to speak my mind!

Išreišk savo nuomonę!