6. Estils de cascada

Els CSS són l’acrònim d’estils en cascada (full d’estil en cascada). Això significa que els estils s’hereten a la cascada des de les seccions superiors fins als elements que hi ha dins.

Per exemple, si hi ha un paràgraf dins d’una llista: `` <li> <li> Paràgraf </p> </li> `El paràgraf heretarà els estils que s'han aplicat a la llista.

En aquest exercici, introduirem un bloc en un altre com en una nina "matrioska" o rus, de manera que els blocs interiors heretaran tots els estils del bloc on es troben.

Exercir

Fitxer ** CSS-Cading.html **

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
   <title> Estilos en cascada </title>

   <link rel="stylesheet" type="text/css"
         href="css-cascading.css" >

</head>

<body>

   <h1> Estilos en cascada </h1>

   <div class="estilo1">
      <p>Primer nivel (color azul)</p>
      <div class="estilo2">
          <p>Segundo nivel (letra grande)</p>
          <div class="estilo3">
              <p>Tercer nivel (fondo amarillo)</p>
          </div>
      </div>
   </div>

</body>
</html>

Fitxer ** CSS-CADING.CSS **

Código del fichero css-cascading.css

Resultat

Resultado de visualizar los ficheros css-cascading.html y css-cascading.css en un navegador