Temas > Programacion > Css > Estilos por medio de clases con CSS
Julio

Definición de estilos por medio de clases
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:
<?php //esto no va
<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>
?>//esto no va
La hoja de estilo externa (estilos.css) es:
<?php //esto no va
body {
  background-color:#eeeeee;
}
.resaltado{
  color:#000000;
  background-color:#ffff00;
  font-style:italic;
}
?>//esto no va
La sintaxis para definir una clase aplicable a cualquier marca HTML es:
<?php //esto no va
.resaltado{
  color:#000000;
  background-color:#ffff00;
  font-style:italic;
}
?>//esto no va
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:
<?php //esto no va
<h1 class="resaltado">Titulo de nivel 1</h1>
?>//esto no va
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:
<?php //esto no va
<p>
Este parrafo muestra el resultado de aplicar la clase .resaltado en la
última
<span class="resaltado">palabra.</span>
</p>
?>//esto no va
Aquí definimos la propiedad class a la marca span y le asignamos la misma
clase aplicada anteriormente a la marca h1.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar