Css Hoja De Estilo

Manual de CSS, hojas de estilo - Manual completo

Página 1 de 29

Manual de CSS, hojas de estilo

Manual por: DesarrolloWeb.com

"Tu mejor ayuda para aprender a hacer webs"

Versión on-line:

http://www.desarrolloweb.com/manuales/2

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.

Referencia: Este manual trata los aspectos más teóricos de las hojas en cascada. En DesarrolloWeb.com

también podemos encontrar otro manual con unos talleres prácticos de aplicación de las CSS

[http://www.desarrolloweb.com/manuales/63].

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 le aplicaremos 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 nuestra

programación. Podemos definir, por ejemplo, varios tipos de párrafos: en rojo, en azul,

con margenes, sin ellos...

Manual de CSS, hojas de estilo - Manual completo

Página 2 de 29

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:

Podemos definir la distancia entre líneas del documento.

Se puede aplicar identado a las primeras líneas del párrafo.

Podemos 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, margenes, subrayados,

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:

Pixels (px) y porcentaje (%), como antes.

Pulgadas (in)

Puntos (pt)

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.

Luego se verá con detalle

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.

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta . 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.

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

Que tiene como resultado:

Manual de CSS, hojas de estilo - Manual completo

Página 3 de 29

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

Esto es un párrafo

de color rojo.

Esto es un párrafo de color azul.

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

Estas etiquetas van en azul y negrita

Seguimos dentro del DIV, luego permanecen los etilos

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.

Manual de CSS, hojas de estilo - Manual completo

Página 4 de 29

En el ejemplo vemos que se utiliza la etiqueta colocada en la cabecera de la página

para definir los distintos estilos

del documento.

A grandes rasgos, entre de y , se coloca el nombre de la etiqueta que

queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de

estilos.

Ejemplo de estilos para toda una página

Página con estilos

Bienvenidos...

Siento ser tan hortera, pero esto es un ejemplo sin más importancia

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

Subrallado

Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta ) se

le apliquen los estilos siguientes:

...