| |
Estilo definido para toda una página
Podemos definir, en la cabecera del documento,
estilos para que sean aplicados a toda la página.
Es una manera muy cómoda de darle forma al
documento y muy potente, ya que estos estilos serán
seguidos en toda la página y nos ahorraremos
así muchas etiquetas HTML que apliquen forma
al documento. Además, si deseamos cambiar
los estilos de la página lo haremos de una
sola vez.
Este ejemplo es más complicado, puesto que
se utiliza la sintaxis CSS de manera más
avanzada. Pero no te preocupes puesto que con los
ejemplos irás aprendiendo su uso y más
tarde comentaremos la sintaxis en profundidad.
En el ejemplo vemos que se utiliza la etiqueta
<STYLE> colocada en la cabecera de la página
para definir los distintos estilos del documento.
A grandes rasgos, entre de <STYLE> y </STYLE>,
se coloca el nombre de la etiqueta que queremos
definir los estilos y entre llaves -{}- colocamos
en sintaxis CSS las características de estilos.
<html>
<head>
<title>Ejemplo de estilos para
toda una página</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color:
white; background-color: black}
BODY {color:black;background-color:
#cccccc; text-indent:1cm}
// -->
</STYLE>
</head>
<body>
<h1>Página con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero
esto es un ejemplo sin más
importancia</p>
</body>
</html>
|
|
Como se puede apreciar en el código, hemos
definido que la etiqueta <H1> se presentará
También, por ejemplo, hemos definido que
el cuerpo entero de la página (etiqueta <BODY>)
se le apliquen los estilos siguientes:
* |
Color del texto negro |
* |
Color del fondo grisaceo |
* |
Margen lateral de 1 centímetro
|
|
Caber destacar que si aplicamos estilos a la etiqueta
<BODY>, estos serán heredados por el
resto de las etiquetas del documento. Esto es así
siempre y cuando no se vuelvan a definir esos estilos
en las siguientes etiquetas, en cuyo caso el estilo
de la etiqueta más concreta será el
que mande. Puede verse este detalle en la etiqueta
<P>, que tiene definidos estilos que ya fueron
definidos para <BODY>. Los estilos que se
tienen en cuenta son los de la etiqueta <P>,
que es más concreta.
Por último, ha de apreciarse los comentarios
HTML que engloban toda la declaración de
estilos:
<!--Declaración de estilos-->. Estos
comentarios se utilizan para que los navegadores
antiguos, que no comprenden la sintaxis CSS, no
incluyan ese texto en el cuerpo de la página.
Si no se pusiera, los navegadores antiguos (por
ejemplo Netscape 3) escribirían ese "feo
código" en la página.
Pulsa
para ver el ejemplo anterior
Hemos preparado la misma página, pero con
declaraciones de estilos distintas, para que compruebes
las diferencias en la forma del documento con sólo
unos cambios en sus estilos.
Puedes
verla haciendo Click Aquí
Estilo definido para todo
un sitio web
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.
1- Creamos el fichero con la declaración
de estilos
Es un fichero de texto normal, que puede tener cualquer
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
erroneo incluir código HTML en el: etiquetas
y demás. Podemos ver un ejemplo a continuación.
P
{
font-size : 12pt;
font-family : arial,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;
}
|
|
2 - Enlazamos la pána web con la
hoja de estilos
Para ello, vamos a colocar la etiqueta <LINK>
con los atributos
* |
rel="STYLESHEET" indicando
que el enlace es con una hoja de estilos |
* |
type="text/css" porque ela
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>
|
|
El
resultado conseguido se puede ver aquí
Reglas de importancia en los estilos
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 afectatará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 declaracionesde
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.
|
