Manejos de las CSS PARTE III

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&aacute;gina que lee estilos</title>
</head>

<body>
<h1>P&aacute;gina que lee estilos</h1>
Esta p&aacute;gina tiene en la cabecera la etiqueta requerida para enlazar con la hoja de estilos. Es muy f&aacute;cil.
<br>
<br>
<table width=»300″ cellspacing=»2″ cellpadding=»2″ border=»0″>
<tr>
    <td>Esto est&aacute; 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.