Dziedziczenie styli

Wyróżniamy dwa rodzaje styli:

  1. Style dziedziczone.
  2. Style niedziedziczone.

Style dziedziczone, określone dla danego elementu na stronie przenoszą się na elementy podrzędne w stosunku do danego elementu.

Style niedziedziczone odnoszą sie tylko do tych elementów, dla których zostały określone.

Przykład stylu dziedziczonego:

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

<!-- Styl color dziedziczy się -->
<!-- na akapity w sekcji div -->

<p>Zwykły akapit</p>
<p>Zwykły akapit</p>
<div>
  <p>Zielony akapit.</p>
  <p>Zielony akapit.</p>
</div>

</body>
</html>

Przykład stylu niedziedziczonego:

<html>
<head>
<style type="text/css">
table {margin-left:1cm}
</style>
</head>
<body>

<!-- Tabela będzie mieć margines z lewej wielkości 1 cm, -->
<!-- a komórki tabeli będą miały margines domyślny. -->

<table border="1">
<tr>
  <td>Komórka 1</td><td>Komórka 2</td>
</tr>
</table>

</body>
</html>

Strona główna