Comando atributo class HTML
La sección anterior nos introdujo a las hojas de estilo externas. Aquí vamos a ampliar
esa información y demostrarle el poder real de las hojas de estilo.
Para recordar, enlazar con una hoja de estilo externa requiere que usted añada una
línea de código en el elemento.
<head></head> del documento HTML. Ejemplo:
<html>
<head>
<title>Hoja de Estilo Externa</title>
<link
rel="stylesheet"
type="text/css" href="http://www.speakcomputers.com/GreenStyle.css"
/>
</head>
<body>
</body>
</html>
el recorte de código abajo para GreenStyle.ccs que enlazamos arriba. Aquí veremos
la clase H1 con el estilo que nosotros definimos. También tenemos otra clase H1
pero la hemos nombrado CualquierNombreQueUstedElija. Dentro de la nueva clase hemos
definido un estilo diferente para la clase H1. Ambas son clases H1 pero tienen nombres
y estilos diferentes. Usted puede nombrar su clase con cualquier nombre que elija.
H1
{
font-size: 20pt;
font-weight: bold;
font-family: Arial;
color: #009966;
}
H1.AnyNameYouChoose
{
font-size: 20pt;
font-weight: bold;
font-family: Arial;
color: #009966;
font-style: italic;
text-decoration: underline;
}
El elemento Tag <h1> incluye el atributo “clase”. Usted puede asignarle
un valor string a la clase, que es un señalador al nombre del estilo dentro de la
hoja de estilo.
<html>
<head>
<title>Style attribute class
name</title>
<link
rel="stylesheet" type="text/css"
href="http://www.speakcomputers.com/GreenStyle.css"
/>
</head>
<body>
<h1>No class assigned, will
use default style for tag from external style sheet</h1>
<h1
class="AnyNameYouChoose">Here we assign the class
name that we created above</h1>
</body>
</html>
La clase debe existir dentro de la Hoja de Estilo. Si el nombre de la clase no existe,
la clase por defecto será usada.
El comando Clase y Estilo
Usted puede asignar ambos atributos clase =”” y el estilo=”” al elemento HTML pero
el estilo definido en el atributo estilo invalidará el estilo definido en la clase
(Nombre clase de la hoja de estilo externa). Vamos a hacer un ejemplo. Copie y peque
el código y haga clic en Render.
<html>
<head>
<title>Style Attribute override
class style</title>
<link
rel="stylesheet"
type="text/css" href="http://www.speakcomputers.com/GreenStyle.css"
/>
</head>
<body>
<h1>No class assigned, will
use default style for tag from external style sheet</h1>
<h1
class="AnyNameYouChoose"
style="color: #000000;">Here we assign the class name
but the style attribute overrides the class style</h1>
</body>
</html>
Usted puede cambiar la hoja de estilo
enlazada de “EstiloVerde.css”, “EstiloRojo.ccs” o “EstiloAzul.ccs” y vea que los
diferentes estilos se aplican.
|