Przesłanianie styli

Jeżeli dla elementu na stronie - np. akapitu - ten sam styl określony jest na kilka różnych sposobów, to dla tego elementu zostanie wybrany styl o najwyższym priorytecie. Style o mniejszym priorytecie zostaną przesłonięte.

Priorytet styli od najmniejszego do największego:

  1. Ustawienia domyślne przeglądarki.
  2. Style zewnętrzne określone w pliku z rozszerzeniem .css.
  3. Style określone w sekcji head dokumentu html.
  4. Style określone w znacznikach sekcji body przy pomocy atrybutów class, id oraz style.

Przykłady

Przesłanianie styli przy pomocy atrybutu class, id i style: 

<html>
<head>
<style type="text/css">
p           {color:red}
p.niebieski {color:blue}
p#zielony   {color:green}
</style>
</head>
<body>

<!-- Akapit z atrybutem class="niebieski", akapit z atrybutem id="zielony" oraz -->
<!-- akapit z atrybutem style="color:black" będzie miał przesłonięty kolor tekstu. -->

<p>Czerwony akapit.</p>
<p id="zielony">Zielony akapit.</p>
<p class="niebieski">Niebieski akapit.</p>
<p style="color:black">Czarny akapit.</p>

</body>
</html>

Priorytet atrybutów class, id i style:

<html>
<head>
<style type="text/css">
p        {color:green}
p.kolor  {color:black}
p#kolor2 {color:red}
p#kolor3 {color:red}
</style>
</head>
<body>

<p>Zielony akapit.</p>
<p class="kolor">Czarny akapit.</p>
<p class="kolor" id="kolor2">Czerwony akapit.</p>
<p class="kolor" id="kolor3" style="color:blue">Niebieski akapit.</p>

</body>
</html>

Przesłanianie styli przy pomocy znacznika span: 

<html>
<head>
<style type="text/css">
p    {color:green}
span {color:blue}
</style>
</head>
<body>

<!-- Wyraz niebieski w akapicie będzie -->
<!-- miał przesłonięty kolor tekstu. -->

<p>Wyraz <span>niebieski</span> ma kolor niebieski.</p>

</body>
</html>

Inny przykład:

<html>
<head>
<style type="text/css">
p        {color:green}
#kolor   {color:black}
.kolor   {color:blue}
h4.kolor {color:red}
</style>
</head>
<body>

<p>Zielony akapit.</p>
<p id="kolor">Czarny akapit.</p>
<p class="kolor">Niebieski akapit.</p>
<h4 class="kolor">Czerwony tytuł.</h4>

</body>
</html>

Przykłady z tabelami:

Przykład 1 Tabela bez przesłoniętych styli.
Przykład 2 Przesłanianie styli w tabelach 1.
Przykład 3 Przesłanianie styli w tabelach 2.

Strona główna