Introduccin a las CSS

En estas pginas de CSS pretendemos dar a conocer la tecnologa con un enfoque prctico para que en pocos captulos podis usar las CSS de una manera depurada, reflejando toda nuestra experiencia en su uso.

Caractersticas y ventajas de las CSS

Un web entero, de modo que se puede definir la forma de todo el web de una sola vez. Un documento HTML o pgina, se puede definir la forma, en un pequeo trozo de cdigo en la cabecera, a toda la pgina. Una porcin del documento, aplicando estilos visibles en un trozo de la pgina. Una etiqueta en concreto, llegando incluso a poder definir varios e stilos diferentes para una sola etiqueta.

Usos de las CSS I

CSS

Usos de las CSS y II

Para definir estilos en secciones reducidas de una pgina se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sintaxis CSS las caractersticas de estilos. Lo vemos con un ejemplo, pondremos un prrafo en el que determinadas palabras las vamos a visualizar en color verde. Ejemplo: <p> Esto es un prrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fcil. </p>

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la pgina. Es una manera muy cmoda de darle forma al documento y muy potente, ya que estos estilos sern seguidos en toda la pgina y nos ahorraremos as muchas etiquetas HTML. Ejemplo: <STYLE type="text/css"> <!-- H1 {text-decoration: underline; textalign:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm}// --> </STYLE>

Otra manera de definir estilos en un archivo externo

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

Atributo visibility

Atributos para capas

- visible sirve para indicar que la capa se podr ver. - hidden indicar que la capa est oculta.

Atributo position.
- relative indica que la posicin de la capa es relativa a el lugar donde se estaba escribiendo enla pgina en el momento de escribir la capa con su etiqueta - absolute indica que la posicin de la capa se calcula con respecto al punto superior izquierdo de la pgina.

- inherit es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde est metida la capa en cuestin. Si la capa no est metida dentro de ninguna otra se supone que est metida en la capa documento, que es toda la pgina y que siempre est visible.

Atributo width
Indica la anchura de la capa

Atributo z-index Sirve para indicar la posicin sobre el eje z que tendrn las distintas capas de la pgina. Dicho de otra forma, con z index podemos decir qu capas se vern encima o debajo de otras, en caso de que estn superpuestas. El atributo z-index toma valores numricos y a mayor zindex, ms arriba se ver la pgina.

Atributo top
Indica la distancia en vertical donde se colocar la capa. Si el atributo position es absolute, top indica la distancia del borde superior de la capa con respecto al borde superior de la pgina. Si el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en ese momento en la pgina hasta el borde superior de la capa.

Atributo height Sirve para indicar el tamao de la capa en vertical, es decir, su altura.

Atributo left
Bsicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la distancia en horizontal a la que estar situada la capa.

Atributo clip

Es un atributo un poco difcil de explicar. En concreto sirve para recortar determinadas reas de la capa y que no se puedan ver. Una capa que est visible se puede recortar para que se vea, pero que no se vea algn trozo de esta. El cliping se indica por medio de 4 valores, con esta sintaxis.
rect (<top>, <right>, <bottom>, <left>)

Trucos avanzados con CSS

Estilo en los enlaces Definir estilos utilizando clases

Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o en un archivo externo a la pgina. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De estamanera: .nombredelaclase {atributo: valor;atributo2:valor2;...} Enlaces normales A:link {atributos} Enlaces visitados A:visited {atributos} Enlaces activos (Los enlaces estn activos en el presiso momento en que se pincha sobre ellos) A:active {atributos} Enlaces hover (Cuando el ratn est encima de ellos, solo funciona en ieplorer)A:hover {atributos}

Qu son las capas

Una capa es una divisin, una parte de la pgina, que tiene un comportamiento muyindependiente dentro de la ventana del navegador, ya que la podemos colocar en cualquierparte de la misma y la podremos mover por ella independientemente, por poner dos ejemplos. En el uso de capas se basan muchos de los efectos ms comunes del DHTML Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son compatibles ms que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV>para hacer capas preferentemente a las otras dos.

Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de esta manera: <SPAN style="text decoration:underline;Font weight:bold">. </SPAN> <DIV style="color:red;Font size:10px"> </DIV>. Los atributos para que la divisin sea una capa son varios y se pueden ver a continuacin. <div id="c1" style="position:absolute; left: 200px; top: 100px;">. Hola! </div>

Formas de aplicar estilos en maquetacin CSS Aplicacin de estilo a etiquetas

Se puede asignar el estilo a una etiqueta concreta de HTML. Para ello, en la declaracin de estilos escribimos la etiqueta y entre llaves, los atributos de estilo que deseemos. body { background-color: #f0f0f0; color: #333366; } Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas seguidas por comas y luego, entre llaves, los atributos que queramos definir. h1, p{ color: red; } En este caso se define que los encabezados de nivel 1 y los prrafos, tengan letra roja.

Definicin de clases
Podemos utilizar una clase si deseamos crear un estilo especfico, para luego aplicarlo a distintos elementos de la pgina. Las clases en la declaracin de estilos se declaran con un punto antes del nombre de la clase. miclase{ color: blue; } Para asignar el estilo definido por una clase en un elemento HTML, simplemente se aade el atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class se asigna al nombre de la clase a aplicar. Por ejemplo: <p class="miclase">este prrafo tiene el estilo definido en la clase "miclase".</p> El prrafo anterior se presentara con color azul. La definicin de clases y su utilizacin es sencilla, pero veamos un ejemplo ms detallado: Para la siguiente declaracin de estilos: body, td, p{ background-color: #000000; color: #ffffff; } .inverso{ background-color: #ffffff; color: #000000;

Estilos que slo se utilizan una vez

Tambin podemos tener un estilo especfico para un nico elemento, que no va a repetirse en ningn otro caso. Para ello tenemos los estilos asignados por identificador. Los identificadores se definen en HTML utilizando el atributo id en la etiqueta que deseamos identificar. El valor del atributo id ser el que definamos nosotros. <div id="capa1"> En la hoja de estilos, para definir el aspecto de ese elemento con id nico, se escribe el carcter almohadilla, seguido del identificador indicado en la etiqueta y entre llaves los atributos css que deseemos. #capa1{ font-size: 12pt; font-family: arial; }