Seguimos con la tercera y última parte del manejo de las CSS y recuerdo que en el artículo anterior nos quedamos en medio de una explicación en donde se continuará a continuación:
2- Se enlaza la página web con la hoja de estilos
Para eso, se va a poner la etiqueta <LINK> con los atributos
- rel=”STYLESHEET” indicando que el enlace es con una hoja de estilos
- type=”text/css” ya que el archivo es de texto, en sintaxis CSS
- href=”estilos.css” señala el nombre del fichero fuente de los estilos
Se verá ahora una página web entera que enlaza con la declaración de estilos anterior:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<link rel=”STYLESHEET” type=”text/css” href=”estilos.css”>
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta requerida para enlazar con la hoja de estilos. Es muy fácil.
<br>
<br>
<table width=”300″ cellspacing=”2″ cellpadding=”2″ border=”0″>
<tr>
<td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>
Normas de gran jerarquía en los estilos
Los estilos se adquieren de una etiqueta a otra, como se mostró anteriormente. Por ejemplo, si se tiene declarado en el <BODY> unos estilos, por lo frecuente, estas declaraciones igualmente impresionarán a las etiquetas que estén dentro de esta etiqueta, o lo que es igual, dentro de todo el cuerpo.
En distintas ocasiones más de una declaración de estilos afecta a la misma parte de la página. Siempre se debe tener en cuenta la declaración más usual. Pero las declaraciones de estilos se pueden hacer de muchas maneras y con distintas etiquetas, asimismo, entre estos modos hay una jerarquía de importancia para resolver problemas entre distintas declaraciones de estilos diferentes para una misma porción de página. Se puede apreciar a continuación esta jerarquía, lo principal es poner las formas de declaración más usuales, y por tanto menos respetadas en caso de conflicto:
- Creencia de estilos con fichero externo. (Para todo un sitio web)
- Creencia de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)
- Determinados en una etiqueta definitiva. (Manejando el atributo style en la etiqueta en cuestión)
- Creencia de estilo para una porción diminuta del documento. (Con la etiqueta <SPAN>)
Ya se vio cómo se incluye estilos en la página, de todas las formas viables y se hizo un repaso con la lista anterior. Ahora deberían estar en condiciones de comenzar a manejar las hojas de estilo en cascada para optimizar vuestras páginas e incrementar la productividad de vuestro trabajo. Pero estate atento a los siguientes capítulos donde aprenderás las lecciones que os faltan para dominar bien la materia: Conocer la sintaxis, los diferentes atributos de estilos y otras cosas que optimizarán vuestras páginas.
