Una de las características más potentes de la programación con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan sólo colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se comentó anteriormente.
Veamos ahora cómo el proceso para incluir estilos con un fichero externo.
P {
font-size : 12pt;
font-family : rial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color :#666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
} |
1- Creamos el fichero con la declaración de estilos
Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sería erróneo incluir código HTML en el, etiquetas y demás.
font-family : indica el tipo de fuente. Siempre es conveniente indicar fuentes comunes, que estén instaladas en los ordenadores de tus visitantes.
font-size : indica el tamaño de la fuente, en píxeles (px) o puntos (pt).
font-weight : valor entre 100 y 900. Indica el "peso" de la fuente. 600 corresponde a negrita.
text-indent : en píxeles o puntos. Representa la sangría a la izquierda en la primera línea. Muy cómodo para definir los estilos de los párrafos (etiqueta <p> ).
text-decoration : none elimina los subrayados (cómodo para los enlaces), underline los impone.
text-align : sirve para linear el texto, izquierda, derecha, centrado.
background-color : podemos definir el color de fondo normalmente con valores hexadecimales.
color : permite definir el valor hexadecimal de un color.
Por supuesto, el archivo puede tener el nombre que quieras, pero con extensión .css . En ese archivo, irán las definiciones de los estilos: primero el nombre de la parte del documento afectada. Después, entre { llaves } y separados por un "punto y coma", los distintos comandos (aquí sólo vienen los principales).
2- Enlazamos la página web con la hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK> con los atributos
<link rel="stylesheet" type="text/css" href=" estilos.css ">
rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
type="text/css" porque el archivo es de texto, en sintaxis CSS
href="estilos.css" indica el nombre del fichero fuente de los estilos
Veamos 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 necesaria 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> |
|
Si queremos utilizar estilos que se puedan repetir para determinadas partes de nuestros textos, debemos utilizar las "clases", a las que se les pondrá un punto antes de su definición. Estas clases podemos definirlas en la propia página web o en un archivo css externo.
.miestilo {
color:#cc6600;
}
Un estilo así definido como clase, podremos utilizarlo tantas veces como queramos y aplicarlo a cualquier elemento de nuestra página a través de las siguientes etiquetas:
<span class=" miestilo "> Texto afectado por el estilo </span>
<div class=" miestilo "> Texto afectado por el estilo </div>
¿Pero hay que definir hojas de estilos y clases en vista código? NO
Dreamweaver te guía en la definición de estilos css o adjuntar hojas de estilo (externas) desde Estilos css que se puede activar desde el menú ventana. En nuevo estilo css podemos seleccionar entre clases, etiquetas y avanzadas y podemos definirlas en un archivo externo o sólo para el documento.
En http://www.arp.jazztel.es/dreamweaver.htm encontrarás un magnífico tutorial de css. |
Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones también afectarán a etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.
En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página. Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una jerarquía de importancia para resolver conflictos entre varias declaraciones de estilos distintas para una misma porción de página. Se puede ver a continuación esta jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos respetadas en caso de conflicto:
- Declaración de estilos con fichero externo. (Para todo un sitio web)
- Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)
- Estilos definidos en una parte de la página. (Con la etiqueta <DIV>)
- Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
- Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)
Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso con la lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes capítulos donde aprenderás las lecciones que te faltan para dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que mejorarán tus páginas.
|
