Búsqueda personalizada
 
 
 
 
Definición de estilos por medio de clase
 

En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML, en esos casos conviene plantear una regla de estilo con un nombre genérico que posteriormente se puede aplicar a varias marcas de HTML.

Para conocer la sintaxis para la definición de clases veamos un ejemplo, la pagina1.html es:

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="resaltado">Titulo de nivel 1</h1>
<p>
Este parrafo muestra el resultado de aplicar la clase .resaltado en la última 
<span class="resaltado">palabra.</span>
</p>
</body>
</html>

La hoja de estilo externa (estilos.css) es:

body {
  background-color:#eeeeee;
}
.resaltado{
  color:#000000;
  background-color:#ffff00;
  font-style:italic;
}

La sintaxis para definir una clase aplicable a cualquier marca HTML es:

.resaltado{
  color:#000000;
  background-color:#ffff00;
  font-style:italic;
}

Es decir, la inicializamos con el caracter punto y seguidamente un nombre de clase. Dentro definimos las reglas de estilo como hemos venido trabajando normalmente.
El nombre de la clase no puede comenzar con un nmero.
Luego, para indicar que una marca sea afectada por esta regla:

<h1 class="resaltado">Titulo de nivel 1</h1>

Es decir, agregamos la propiedad class y le asignamos el nombre de la clase (sin el punto).
Podemos inicializar tantas marcas HTML con esta regla como necesitemos:

<p>
Este parrafo muestra el resultado de aplicar la clase .resaltado en la última 
<span class="resaltado">palabra.</span>
</p>

Aca definimos la propiedad class a la marca span y le asignamos la misma clase aplicada anteriormente a la marca h1.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion