6. Poradie štýlov

Pri definovaní štýlov môže dôjsť k situácii, keď jeden element môže mať definovanú vlastnosť rôznymi spôsobmi, alebo na viacerých miestach. V tomto prípade je potrebné rozhodnúť, ktorú deklaráciu, štýl alebo zdroj štýlov použiť.

Priority definícií:

  1. Kaskáda
  2. Dedičnosť
  3. Vypočítaná hodnota
  4. Predvolená hodnota

Kaskáda

Pri existencii viacerých zdrojov štýlov rovnakej dôležitosti rozhoduje o tom, ktorý štýl sa použije kaskáda.

  1. Atribút style v zdrojovom kóde (najsilnejší) 
    <p style ="color: blue;">
  2. Štýl v hlavičke dokumentu 
      ...
   <style type="text/css"> 
    <!-- 
      p {color: blue;} 
    --> 
  </style>
</head>
<body>
  ...
  3. Externý štýl 
      ...
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  ...
  4. Pravidlo @import
  5. Užívateľský štýl definovaný v nastavení webového prehliadača
  6. Predvolený štýl webového prehliadača (najslabší)

Špecifickosť selektora

Určuje váhu selektora. Selektor s vyššou váhou (silnejšou) prepíše deklaráciu rovnakých vlastností pri selektore s nižšou váhou (slabšou).

  1. Špecifickosť: 1000 (najsilnejší)
    • atribút style v zdrojovom kóde<p style="color: blue;">
  2. Špecifickosť: 0100
    • identifikátor#header {color: blue;} /* zahlavi */
  3. Špecifickosť: 0010
    • trieda, pseudotrieda alebo selektor atribútu (parametra) 
      .note {font-size: 80%;} /* poznamka */
a:hover {text-decoration: underline;}
a[href] :after {content: " [" attr(href) "] ";}
  4. Špecifickosť: 0001
    • typový selektor alebo pseudoelement 
      p {color: blue;}
p:first-letter {font-weight: bold; font-size: 130%;}
  5. Špecifickosť: 0000 (najslabšia)
    • univerzálny selektor alebo jeho kombinácia* {color: blue;}

Jednotlivé úrovne špecifickosti sa sčítajú a vyhráva ten najsilnejší.

Príklad výpočtu :

Selektor #header ul li.note p:first-letter a:hover {color: red;}má špecifickosť: 0125.

Poradie selektora

V prípade zhody pravidiel vyhráva to, ktoré je uvedené neskôr.

Pravidlo !important

Umožňuje uprednostniť deklaráciu v prípade konfliktu s inými deklaráciami bez tohto pravidla.

V prípade stretu pravidla !important v užívateľskej šablóne a pravidla !important v štýle dokumentu, vyhrá užívateľská šablóna.

a {
  text-decoration: underline; !important
}

Ide o posledné možné riešenie, bežné CSS sa bez tohto pravidla väčšinou zaobídu.

Dedičnosť

Elementy sú v dokumente usporiadané v stromovej štruktúre. Elementy môžu dediť hodnoty vlastností od svojho nadradeného elementu a to aj po viacerých generáciách. V (X) HTML je najvyšší element html , do neho sú vnorené elementy head a  body , do  body je vnorený element h1 atď. Jedná sa o pojmy následník a  predchodca . V prípade priameho príbuzenstva o pojmy rodič a  potomok .

V CSS má každá vlastnosť určené, či je dedičná alebo nie. U vnoreného elementu je možné zdedenie vlastnosti vynútiť hodnotou inherít .

Príklad:

body {
  color:teal; /* vlastnosť je dedicná */
  border: 5px solid silver; /* vlastnosť nie je dedicná */
}
h1 {
  border:inherit ; /* vynútení dedičnosti */
}

Poznámky :

  • IE7- podporuje hodnotu inherít iba pri vlastnostiach direction and visibility 

Vypočítaná hodnota

Pri relatívnych jednotkách (em, % atď.) a kľúčových slov (large, small atď.) je potrebné vypočítať ich skutočnú hodnotu. Skutočné hodnoty sa ešte ďalej upravujú podľa možností výstupných zariadení (násobky bodu obrazovky, farebné spektrum, možnosti tlačiarne atď.).

Predvolená hodnota

Každá vlastnosť má CSS špecifikácií určenú východiskovú hodnotu, ktorá sa použije v prípade, ak nie je stanovené inak. Pri niektorých vlastnostiach môže predvolenú hodnotu upresniť prehliadač.