Tutorial de CSS - Temarios

En algunas circunstancias, es necesario desglosar la inicialización de propiedades en distintas reglas.

Podemos definir más de una regla para un elemento HTML, en este ejemplo el elemento h1 tiene dos reglas:

h1,h2,h3,h4,h5,h6 {
  font-family:Verdana;
}
h1 {
  font-size:40px;
}

Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta, luego podemos implementarlo de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<style>
h1,h2,h3,h4,h5,h6 {
  font-family:Verdana;
}
h1 {
  font-size:40px;
}
h2 {
  font-size:30px;
}
h3 {
  font-size:25px;
}
h4 {
  font-size:20px;
}
h5 {
  font-size:15px;
}
h6 {
  font-size:10px;
}
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
<h2>Título de nivel 2</h2>
<h3>Título de nivel 3</h3>
<h4>Título de nivel 4</h4>
<h5>Título de nivel 5</h5>
<h6>Título de nivel 6</h6>
</body>
</html>

Es decir, podemos inicializar un conjunto de elementos HTML con una serie de propiedades de estilo comunes. Luego agregamos en forma individual las propiedades no comunes a dichas marcas:

h1,h2,h3,h4,h5,h6 {
  font-family:Verdana;
}
h1 {
  font-size:40px;
}

Es decir, al elemento h1 realmente le hemos definido 2 propiedades: font-family y font-size. Lo mismo para los otros elementos HTML.

6 - Definición de varias reglas para un mismo elemento HTML.

Retornar