PDF de programación - CSS, hojas de estilos

CSS, hojas de estilos



1. Introducción a las CSS

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto
es así porque fue concebido para otros usos (científicos sobre todo), 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, imágenes transparentes para
ajustarlas, utilización de etiquetas que no son estándares del HTML y otras. Estas
"trampas" han causado a menudo problemas en las páginas a la hora de su visualización
en 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 venían 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 hace 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á entre mezclados con etiquetas incrustadas para
dar forma a estos: se degrada su utilidad.

En estas páginas de CSS se pretende dar a conocer la tecnología con un enfoque
práctico para que en pocos capítulos se pueda usar las CSS de una manera depurada,
reflejando toda nuestra experiencia en su uso.



2. Características y ventajas de las CSS

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis

especial, la forma de presentación que se le aplicará a:

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

vez.

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

 Una porción del documento, aplicando estilos visibles en un trozo de la página.
 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 la

programación. Se puede definir, por ejemplo, varios tipos de párrafos: en rojo, en
azul, con márgenes, sin ellos, etc.

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 quedaba corto para maquetar las páginas y se tenían que
utilizar trucos para conseguir los efectos, ahora se tienen muchas más herramientas que
permiten definir esta forma:

 Se puede definir la distancia entre líneas del documento.
 Se puede aplicar identado a las primeras líneas del párrafo.
 Se pueden colocar elementos en la página con mayor precisión, y sin lugar a

errores.

 Y mucho más, como definir la visibilidad de los elementos, márgenes, subrayados,

tachados...

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

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



3. 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 se debe de usar esta tecnología con cuidado, ya que muchos
usuarios no podrán ver los formatos que se apliquen a las páginas con CSS. Así pues, hay
que utilizar las hojas de estilos cuando estas no vayan a suponer un problema.



4. Usos de las CSS

A continuación se describirán los diferentes usos de las CSS introducidos en el
anterior capítulo. Primero se describen los puntos según su dificultad e importancia.
Partiendo este capítulo en dos partes por su extensión y por haber varias formas distintas
de aplicar estilos, aquí se verán las más sencillas y en el capítulo siguiente otras más
complicadas pero más potentes.



4.1 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 se indica en la sintaxis CSS las características de estilos. Lo
cual se ve con un ejemplo, poniendo un párrafo en el que determinadas palabras se
visualizarán 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.



4.2 Estilo definido para una etiqueta

De este modo se puede 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 se utiliza el atributo style, que es admitido por todas las etiquetas del
HTML (siempre y cuando se disponga 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.



4.3 Estilo definido en una parte de la página

Con la etiqueta <DIV> se pueden definir secciones de una página y aplicarle estilos
con el atributo style, es decir, se pueden 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



5. Usos avanzados de las CSS

5.1 Estilo definido para toda una página

Se puede 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 ahorra así muchas etiquetas
HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la
página se hará de una sola vez.

Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera
más avanzada. Pero no hay que preocuparse puesto que con los ejemplos se va
aprendiendo su uso y más tarde se comentará la sintaxis en profundidad.

En el ejemplo se ve 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 <STYLE> y
</STYLE>, se coloca el nombre de la etiqueta que se quieren definir los estilos y entre
llaves -{}- se colocan 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 simple, pero esto es un ejemplo sin m&aacute;s
importancia </p>
</body>
</html>

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

presentará

 Subrayado
 Centrada

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 grisáceo
 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.

Se ha preparado la misma página, pero con declaraciones de estilos distintas, para
que se comprueben las diferencias en la forma del documento con sólo unos cambios en
sus estilos.



5.2 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, se