PDF de programación - CSS, hojas de estilos

CSS, hojas de estilos

Introducción a las CSS

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así
porque fué concebido para otros usos (científicos sobretodo), distinto a los actuales,
mucho más amplios.

Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la
utilización de tablas imagenes transparentes para ajustarlas, utilización de etiquetas que
no son estádares del HTML y otras. Estas "trampas" han causado a menudo problemas en
las páginas a la hora de su visualizaciónen distintas plataformas.

Además, los diseñadores se han visto frustrados por la dificultad con la que, aun
utilizando estos trucos, se encontraban a la hora de maquetar las páginas, ya que muchos
de ellos venian maquetando páginas sobre el papel, donde el control sobre la forma del
documento es absoluto.

Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología
consiste en que las páginas web tienen mezclado en su código HTML el contenido del
documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes
ya que la lectura del código HTML se hece pesada y difícil a la hora de buscar errores o
depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la
utilidad de las páginas a la hora de almacenar su contenido, es un gran problema que
estos textos estáen mezclados con etiquetas incrustadas para dar forma a estos: se
degrada su utilidad.

En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque
práctico para que en pocos capítulos podáis usar las CSS de una manera depurada,
reflejando toda nuestra experiencia en su uso. No pretendendemos explorar todos los
aspectos de la tecnología ya que para realizar esto necesitariamos un la extensión de un
libro entero.

Características y ventajas de las CSS
El modo de fucionamiento de las CSS consiste en definir, mediante una sintaxis especial,
la forma de presentación que le aplicaremos a:

l Un web entero, de modo que se puede definir la forma de todo el web de una sola

vez.

l Un documento HTML o página, se puede definir la forma, en un pequeño trozo de

código en la cabecera, a toda la página.

l Una porción del documento, aplicando estilos visibles en un trozo de la página.
l Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes
para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra
programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en
azul, con margenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además
esta sintaxis CSS permite aplicar al documento formato de modo mucho más exacto. Si
antes el HTML se nos quedaba corto para maquetar las páginas y teníamos que utilizar
trucos para conseguir nuestros efectos, ahora tenemos muchas más herramientas que
nos permiten definir esta forma:

l Podemos definir la distancia entre líneas del documento.
l Se puede aplicar identado a las primeras líneas del párrafo.
l Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.
l Y mucho más, como definr la visivilidad de los elementos, margenes, subrallados,

tachados...

Y seguimos mostrandoos ventajas, ya que si con el HTML tan sólo podíamos definir
atributos en las páginas con pixeles y porcentajes, ahora podemos definir utilizando
muchas más unidades como:

l Pixels (px) y porcentaje (%), como antes.
l Pulgadas (in)
l Puntos (pt)
l Centímetros (cm)

Navegadores que lo soportan

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En
concreto, sólo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a
partir de la versión 3 son capaces de comprender los estilos en sintaxis CSS. Además
cabe destacar que no todos los navegadores implementan las mismas funciones de hojas
de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas.

Esto quiere decir que debemos de usar esta tecnología con cuidado, ya que muchos
usuarios no podrán ver los formatos que apliquemos a las páginas con CSS. Así pues,
utilizad las hojas de estilos cuando estas no vayan a suponer un problema.

Usos de las CSS I

Vamos ahora a describir los diferentes usos de las CSS
introducidos en el anterior capítulo. Vamos por orden,
describiendo los puntos según su dificultad e importancia.

CSS tiene una sintaxis propia,
la veremos a través de
ejemplos.

Hemos partido este capítulo en dos partes por su extensión
y por haber varias formas distintas de aplicar estilos, aquí veremos las más sencillas y en
el capítulo siguiente otras más complicadas pero más potentes.

Luego se verá con detalle

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>.
Con su atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos
con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a
visualizar en color verde.

<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>.
resulta muy fácil.
</p>

Que tiene como resultado:

Esto es un párrafo con varias palabras en color verde. resulta muy fácil.

Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por
ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello
utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y
cuando dispongamos de un navegador compatible con CSS).

<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>

Que tiene como resultado:

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.

Estilo definido en una parte de la página

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el
atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la página.

<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Que tiene como resultado:

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilos

Hasta aquí este capítulo, en el siguiente seguiremos viendo formas más avanzadas de
usar las CSS.

Usos de las CSS y II

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&aacute;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&aacute;gina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p>
</body>
</html>

Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará

l Subrallado
l Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta
<BODY>) se le apliquen los estilos siguientes:

l Color del texto negro
l Color del fondo grisaceo
l 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
comprobéis las diferencias en la forma del documento con sólo unos cambios en sus
estilos. Puedes verla pinchando 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á