Listado completo de tutoriales

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


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>
  <meta charset="UTF-8">
<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>
varias reglas para un mismo elemento html en css

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.


Retornar