Hojas de Estilo Externas
Las hojas de estilo externas ofrecen la misma funcionalidad que los elementos tag
de estilo. Sin embargo, con las hojas de estilo usted puede asignar estilos a múltiples
elementos sin modificar o escribir el atributo estilo.
Enlazar con una hoja de estilo exterior requiere que usted añada una línea de código
en el elemento
<head></head>. 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>
Del ejemplo de arriba, todos los elementos del documento heredarán todas las reglas
de estilo a menos que usted invalide el atributo estilo por el elemento individual.
Copie y pegue el código siguiente en el recuadro de Ver Código HTML y haga clic
en “Render”. Usted puede cambiar la hoja de estilo enlazada de “GreenStyle.css”,
“RedStyle.ccs” o “BlueStyle.ccs” y vea que se aplican los diferentes estilos.
<html>
<head>
<title>Hoja de Estilo Externa</title>
<link
rel="stylesheet" type="text/css" href="http://www.speakcomputers.com/GreenStyle.css" />
</head>
<body bgcolor="#ffffff">
<h1>Ferrari</h1>
<h2>Lamborghini</h2>
<h3>Audi</h3>
<h4>BMW</h4>
<h5>GMC</h5>
<h6>Golf</h6>
<table
align="center" border="0">
<tr>
<td>Columna 1, Fila 1</td>
<td>Columna 2, Fila 1</td>
</tr>
<tr>
<td>Columna 1, Fila 2</td>
<td>Columna 2, Fila 2</td>
</tr>
<tr>
<td>Columna 1, Fila 3</td>
<td>Columna 2, Fila 3</td>
</tr>
</table>
</body>
</html>
Ahora vamos a hacer otro ejemplo invalidando el estilo de ciertos elementos individuales.
Siguiendo con el ejemplo de arriba, copie y pegue el código siguiente abajo. Puede
cambiar la hoja de estilo enlazada de“GreenStyle.css”, “RedStyle.ccs” o “BlueStyle.ccs”
y vea que se aplican los diferentes estilos.
<html>
<head>
<title>Hoja de Estilo Externa
Anulando</title>
<link rel="stylesheet" type="text/css" href="http://www.speakcomputers.com/GreenStyle.css"
/>
</head>
<body bgcolor="#ffffff">
<h1 style="color: dimgray; font-style:
italic; font-variant: small-caps">Ferrari</h1>
<h2>Lamborghini</h2>
<h3>Audi</h3>
<h4>BMW</h4>
<h5>GMC</h5>
<h6>Golf</h6>
<table
align="center" border="0">
<tr>
<td style="font-weight: bold; color:
black; background-color: #ffcc66">Columna 1, Fila 1</td>
<td>Columna 2, Fila 1</td>
</tr>
<tr>
<td>Columna 1, Fila 2</td>
<td>Columna 2, Fila 2</td>
</tr>
<tr>
<td>Columna 1, Fila 3</td>
<td>Columna 2, Fila 3</td>
</tr>
</table>
</body>
</html>
El ejemplo de arriba demuestra cómo invalidar el estilo de elementos individuales.
Practique crear más estilos.
|