jueves, noviembre 25, 2004

Aplicaciones de las Hojas de Estilo en cascada

En unas palabras

Para definir estilos en una parte pequeña de una página se utiliza la etiqueta <span>. Con el atributo style indicamos las características del estilo.
<p>
Esto es un párrafo con algunas palabras <span style="color:green">en color verde</span>.
</p>

Esto es un párrafo con algunas palabras en color verde.



En una parte de la página

Para hacer que toda una etiqueta muestre un estilo determinado, por ejemplo, un párrafo entero, utilizamos el atributo style.
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.



Con la etiqueta <div> podemos definir estilos a todo un bloque de la página de una vez.
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <em>azul y negrita</em></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los estilos




En toda una página

Para definir estilos que sean aplicados a toda la página, se utiliza la etiqueta style colocada en la cabecera de la página. Se coloca el nombre de la etiqueta de la que queremos definir los estilos, y entre llaves {} colocamos las características de estilos.

<html>
<head>
<title>Título de la 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>Título dentro de la página</h1>
<p>Párrafo de texto</p>
</body>
</html>


La etiqueta h1 se presentará subrayada y centrada.

En toda la página (etiqueta <body>) se aplicará color del texto negro, color del fondo grisaceo, margen lateral de 1 cm. Si aplicamos estilos a la etiqueta <body>, estos serán heredados por el resto de las etiquetas del documento, siempre que no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta será el que prevalezca.


En todo un sitio web

La programación con hojas de estilos permite, de una vez, definir los estilos de todo un sitio web, creando un archivo donde colocamos los estilos de la página y enlazando todas las páginas a ese archivo. Así, si cambiamos el archivo de estilos, cambiarán todas las páginas. También se ahorra en código HTML, reduciendo el peso del documento.

Proceso para incluir estilos con un fichero externo.

1- Creamos un fichero de estilos, en formato de texto, con la extensión .css.

2- Enlazamos la hoja de estilos en la página web, colocando la etiqueta:
<link rel="stylesheet" type="text/css" href="estilos.css">
Siendo estilos.css el nombre del archivo de estilos.

<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Título de la página</title>
</head>

<body>
...
</body>
</html >

También podemos incluir estilos en un archivo externo con la sintaxis @import url("estilo.css").

Se debe incluir entre las etiquetas <style type="text/css"> y </style>, que se colocan en la cabecera del documento. La importación del archivo CSS se debe escribir en la primera línea de la declaración de estilos:

<style type="text/css">
@import url ("estilo.css");
body{
background-color:#ffffcc;
}
</style>


Este método se utiliza cuando hay unas pautas básicas de estilos (que se definen en el archivo a importar) y unos estilos específicos para cada página (que se definen entre las etiquetas </style>).


Reglas de importancia en los estilos

Jerarquía para resolver conflictos entre declaraciones de estilos distintas para una misma porción de página (de menor a mayor importancia en caso de contradicción):

* Declaración de estilos con fichero externo.
* Declaración de estilos para toda la página. (etiqueta style en la cabecera de la página)
* Estilos definidos en una parte de la página. (etiqueta div)
* Definidos en una etiqueta en concreto. (etiquetas con atributo style)
* Declaración de estilo para una porción pequeña del documento. (etiqueta span)

Desarrollo web
Who Links Here