Domů › Pořadí stylů

Pořadí stylů

Při definování stylů může dojít k situaci, kdy jeden element může mít definovanou vlastnost různými způsoby, nebo na více místech. V tomto případě je třeba rozhodnout, kterou deklaraci, styl nebo zdroj stylů použít.

Priority definic:

  1. Kaskáda
  2. Dědičnost
  3. Vypočítaná hodnota
  4. Výchozí hodnota

Kaskáda

Při existenci více zdrojů stylů stejné důležitosti rozhoduje o tom který styl se použije kaskáda.

  1. Atribut style ve zdrojovém kódu (nejsilnější)
    <p style="color: blue;">
  2. Styl v hlavičce dokumentu
      ...
  <style type="text/css">
        <!--
          p {color: blue;}
        -->
      </style>    
</head>
<body>
  ...
  3. Externí styl
      ...
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  ...
  4. Pravidlo @import
  5. Uživatelský styl definovaný v nastavení webového prohlížeče
  6. Výchozí styl webového prohlížeče (nejslabší)

Specifičnost selektoru

Určuje váhu selektoru. Selektor s vyšší váhou (silnější) přepíše deklarace stejných vlastností u selektoru s nižší váhou (slabší).

  1. Specifičnost: 1000 (nejsilnější)
    • atribut style ve zdrojovém kódu <p style="color: blue;">
  2. Specifičnost: 0100
    • identifikátor #header {color: blue;} /* zahlavi */
  3. Specifičnost: 0010
    • třída, pseudotřída nebo selektor atributu (parametru)
      .note {font-size: 80%;} /* poznamka */
a:hover {text-decoration: underline;}
a[href]:after {content: " [" attr(href) "] ";}
  4. Specifičnost: 0001
    • typový selektor nebo pseudoelement
      p {color: blue;}
p:first-letter {font-weight: bold; font-size: 130%;}
  5. Specifičnost: 0000 (nejslabší)
    • univerzální selektor nebo jeho kombinace * {color: blue;}

Jednotlivé úrovně specifičnosti se sčítají a vyhrává ten nejsilnější.

Příklad výpočtu:

Selektor #header ul li.note p:first-letter a:hover {color: red;} má specifičnost: 0125.

Pořadí selektoru

V případě shody pravidel vyhrává to, které je uvedeno později.

Pravidlo !important

Umožňuje upřednostnit deklaraci v případě konfliktu s jinými deklaracemi bez tohoto pravidla.

V případě střetu pravidla !important v uživatelské šabloně a pravidla !important ve stylu dokumentu, vyhraje uživatelská šablona.

a {
  text-decoration: underline; !important 
}

Jedná se o poslední možné řešení, běžné CSS se bez tohoto pravidla většinou obejdou.

Dědičnost

Elementy jsou v dokumentu uspořádány ve stromové struktuře. Elementy mohou dědit hodnoty vlastností od svého nadřazeného elementu a to i po více generací. V (X)HTML je nejvyšší element html, do něj jsou vnořeny elementy head a body, do body je vnořen element h1 atd. Jedná se o pojmy následník a předchůdce. V případě přímého příbuzenství o pojmy rodič a potomek.

V CSS má každá vlastnost určeno, zda je dědičná nebo ne. U vnořeného elementu je možné zdědění vlastnosti vynutit hodnotou inherit.

Příklad:

body {
  color: teal; /* vlastnost je dedicna */
  border: 5px solid silver; /* vlastnost neni dedicna */
}
h1 {
  border: inherit; /* vynuceni dedicnosti */
}

Poznámky:

  • IE7- podporuje hodnotu inherit pouze u vlastností direction and visibility

Vypočítaná hodnota

U relativních jednotek (em, % atd.) a klíčových slov (large, small atd.) je třeba vypočítat jejich skutečnou hodnotu. Skutečné hodnoty se ještě dále upravují podle možností výstupních zařízení (násobky bodu obrazovky, barevné spektrum, možnosti tiskárny atd.).

Výchozí hodnota

Každá vlastnost má CSS specifikací určenu výchozí hodnotu, která se použije v případě, pokud není stanoveno jinak. U některých vlastností může výchozí hodnotu upřesnit prohlížeč.