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 pagina.html es:
<!DOCTYPE html> <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 párrafo 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:
La sintaxis para definir una clase aplicable a cualquier marca HTML es:body { background-color:#eeeeee; } .resaltado{ color:#000000; background-color:#ffff00; font-style:italic; }
.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 número.
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.
No hay comentarios.:
Publicar un comentario
Nota: sólo los miembros de este blog pueden publicar comentarios.