CSS

Aplicaciones Web
Tema 2 - Tecnologas Web - CSS
INTRODUCCIN A CSS TIPOS DE HOJAS DE ESTILO EJERCICIO 1: EJERCICIO 2: EJERCICIO 3: ESTRUCTURA GENRICA DE UN DOCUMENTO CSS REGLAS DE ESTILO IDENTIFICADORES. EJERCICIO 4: CLASES. EJERCICIO 5: PSEUDO-CLASES. EJERCICIO 6: PSEUDO-ELEMENTOS. EJERCICIO 7: CRITERIOS DE SELECCIN SELECCIN POR TIPO O NOMBRE DE ELEMENTO. SELECCIN POR CONTEXTO DEL ELEMENTO. SELECCIN POR CLASE O IDENTIFICADOR DE ELEMENTO. SELECCIN POR LA PSEUDO-CLASE DEL ELEMENTO. SELECCIN POR LOS ATRIBUTOS DEL ELEMENTO. PROPIEDADES Y VALORES COSAS A TENER EN CUENTA HERENCIA Y PRECEDENCIA HERENCIA EJERCICIO 8: ESPECIFICIDAD UBICACIN DISEO VISUAL VALIDACIN DEL CDIGO CSS BIBLIOGRAFA Y ENLACES DE INTERS GUA DE REFERENCIA CSS 2.1
Prof: Mara Jos Goslbez Goslbez -1-
-2-3-3-3-4-4-5-6-6-7-7-8-8-8-8-9-9-9- 10 - 11 - 11 - 11 - 12 - 12 - 12 - 12 - 13 - 13 - 14 - 18 - 18 - 18 -
Aplicaciones Web
Introduccin a CSS
Las hojas de estilo en cascada CSS -Cascade Style Sheet en ingls- se utilizan en la actualidad para disear y dar formato a las pginas web escritas con HTML. Las razones de su aparicin son las siguientes: 1. HTML ofrece muy pocas opciones para dar formato al texto. Su funcin es estructurar el texto en secciones tales como tablas, listas, prrafos, etc., pero en cuanto a diseo visual resulta un tanto pobre. 2. El diseador de pginas web se encontraba con archivos HTML extremadamente liosos, ya que en el mismo texto se agrupan contenidos, estructuras e instrucciones de formato, por lo que su modificacin y elaboracin resultaba ser muy complicada. 3. La modificacin del formato utilizado en un sitio web compuesto por un gran nmero de pginas resultaba muy engorroso, ya que se tenan que cambiar manualmente los estilos de cada una de las pginas que formaban el sitio. Frente a esta situacin, el organismo W3C decidi crear un sistema por el que las instrucciones de formato se encontraran separadas de los otros elementos. As, en la versin 4 de HTML, se desaconseja utilizar elementos de formato y se sugiere la utilizacin de las hojas de estilo en cascada o CSS. La denominacin de hojas de estilo hace referencia a que podemos, a partir de las etiquetas bsicas de HTML, realizar modificaciones en las propiedades de las mismas. De esta manera, con una sola instruccin se podr cambiar el formato de todas las etiquetas HTML a las que hagamos referencia. Un ejemplo de las posibilidades que ofrecen las hojas de estilo se puede encontrar visitando la pgina Zengarden, donde se puede observar el efecto que produce en la misma pgina HTML utilizar una hoja de estilo u otra. Las hojas de estilo son archivos de texto con un formato muy simple, por lo que se facilita la claridad del cdigo generado para nuestro sitio web. Adems, actualmente ofrecen muchas ms posibilidades que las etiquetas de HTML convencionales. La denominacin "en cascada" hace referencia a que a la hora de crear un estilo, las especificaciones que se realicen para un determinado elemento sern aplicables a todos aquellos elementos que se encuentren "por debajo" de l atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body>, todos aquellos elementos que puedan heredar las caractersticas se presentarn con el mismo tipo de fuente. As, el elemento <p> heredar el tipo de letra salvo que especifiquemos lo contrario, por lo que no necesitaramos volver a indicar esta caracterstica. Por ltimo, es necesario decir que en la actualidad hay dos versiones de las hojas de estilo: CSS1 y CSS2. Obviamente, la versin 2 ofrece muchas mejoras respecto a la primera, pero hay que tener cuidado con posibles problemas de compatibilidad, ya que los navegadores web no son compatibles con todas las especificaciones de la versin 2.
Aplicaciones Web
Tipos de hojas de estilo

Una hoja de estilos contiene datos de formato relativos a los elementos definidos en la pgina HTML. Por lo tanto, ambos (documento HTML y hoja de estilo) deben estar relacionados de alguna manera. Existen tres maneras de utilizar hojas de estilo:
1. Aplicar estilos directamente a elementos HTML. De esta manera se escribe el cdigo CSS dentro del atributo style de la etiqueta HTML en cuestin.Por ejemplo, para aplicar un estilo css a un prrafo: <p style="cdigo_css">HOLA</p> 2. Hojas de estilos internas. Se utilizan para aplicar estilos a la pgina en la cual se utiliza. El cdigo de la hoja de estilo se ubicar en la cabecera de la pgina web, entre las etiquetas siguientes: <style type="text/css"> ...cdigo_css... </style> 3. Hojas de estilos externas. Se utilizan para aplicar el mismo formato a varias pginas de un portal. Se definen en un archivo externo que ser consultado por todas las pginas HTML del sitio web, reutilizando por tanto el cdigo. Para ello se escribir el cdigo CSS en un documento externo con extensin css. Posteriormente se vincular a la pgina web mediante la utilizacin de la siguiente etiqueta en la cabecera del documento HTML en cuestin: <link rel="stylesheet" type="text/css" href="nombre_archivo_css.css">
Ejercicio 1:
Partiendo del documento HTML que puedes encontrar en la carpeta CSS codigo_html_base, aplica un estilo CSS al primer prrafo utilizando el primero de los mtodos descritos. Dicho estilo consistir en poner el texto de color verde y con tamao de letra de 15 puntos. El cdigo CSS necesario es el siguiente:
color: green; font-size: 15pt;
Observa que el formato se aplica slo al primer prrafo, que es el que tiene la etiqueta style. Guarda el archivo con el nombre ejemplo1.html.
Ejercicio 2:
Utilizando el documento HTML del ejemplo anterior, manteniendo los cambios realizados en el ejercicio 1, aplica un estilo CSS a todos los prrafos utilizando el segundo de los mtodos descritos (hoja de estilo interna). Dicho estilo consistir en poner el texto de color rojo y con tamao de letra de 8 puntos. El cdigo CSS necesario es el siguiente:
Aplicaciones Web
p{ color: red; /*Color rojo*/ font-size: 8pt; /*Tamao de letra 8 puntos*/ }
Observa que todos los prrafos del documento se ponen de color verde con tamao de letra 8 menos el primero. Esto es porque la hoja de estilos interna aplica los formatos escritos en ella a todos los elementos tipo prrafo (<p>), pero como el primero tiene definido su propio estilo dentro de su misma etiqueta <p>, ser sta ltima la que tenga ms peso. Se puede deducir que los estilos definidos directamente en las etiquetas HTML se aplican por delante de los definidos en la hoja de estilos interna. Guarda el archivo con el nombre ejemplo2.html.
Ejercicio 3:
Por ltimo, crea un nuevo archivo de texto llamado "estilos.css" y escribe en l el siguiente cdigo css:
p{ color: blue; /*Color azul*/ text-indent: 2em; /*Sangra de dos caracteres*/ text-align: right; /*Alineado a la derecha*/ }
A continuacin, guarda el archivo y sitalo en la misma carpeta que el documento HTML y modifica ste ltimo para que utilice la hoja de estilos externa tal y como se explica en el mtodo 3. Observa que los prrafos se alinean a la derecha y que aparecen con sangra, pero el color del texto no se vuelve azul, tal y como hemos especificado en el archivo css. Esto es porque la hoja de estilos externa tiene menos importancia que la interna y la aplicacin directa sobre elementos HTML. Se puede deducir que los estilos definidos directamente en las etiquetas HTML se aplican por delante de los definidos en la hoja de estilos interna y estos a su vez por delante de los definidos en la hoja de estilos externa. Guarda el archivo con el nombre ejemplo3.html
Estructura genrica de un documento CSS

Tal y como se ha visto en el punto anterior, existen tres maneras de utilizar hojas de estilo. La primera de ellas no se suele utilizar porque no presenta casi ninguna ventaja frente al uso tradicional de HTML, as que a partir de ahora hablaremos de las hojas de estilo externas. Las hojas internas sern exactamente igual pero estarn contenidas en el mismo documento HTML en vez de en un archivo aparte. Los archivos de hojas de estilo tienen extensin .css y estn formados por un conjunto de reglas puestas una a continuacin de otra:
body { background: white; font-size: 11pt; font-family: Arial,Helvetica,sans-serif; color: black; text-align:justify;
Aplicaciones Web
{ text-indent: 2em; }
Como se puede observar, las reglas estn formadas por dos componentes: un selector, que indica cuales sern los elementos a los que hay que aplicar el estilo, y una declaracin, que establece las propiedades y valores que se aplicarn. La estructura genrica de una regla sera:
selector { declaracin; }
La declaracin a su vez est formada por un conjunto de propiedades y valores:

selector { propiedad1: valor1; propiedad2: valor2; propiedad3: valor3; ... }
En el ejemplo que hemos puesto, hay dos reglas de estilo: la primera de ellas se aplicara sobre el elemento body (etiqueta que define el cuerpo de una pgina HTML) y la segunda sobre el elemento p (etiqueta que define un prrafo dentro de una pgina HTML). La primera regla tendra cinco pares de propiedad: valor y la segunda uno. Las propiedades que se pueden formatear as como los valores que puede tomar cada propiedad se encuentran en la Gua de referencia rpida CSS 2.1 que se incluye en este documento.
Reglas de estilo
Una vez visto la estructura genrica de una regla de estilo en el punto anterior, podemos pasar a ver cmo se aplican dichas reglas. Partiremos del ejemplo siguiente:
p { color: red; }
En este caso, se aplicara la regla de estilo color: red (que significa color de texto rojo) a todos los selectores indicados, en este caso los prrafos (elementos <p>) de la pgina HTML. Sin embargo, sera posible actuar solamente en unos prrafos determinados y dejar el resto con otro color de letra? La respuesta es, obviamente, s.
Aplicaciones Web
Para ello se han desarrollado unos selectores especiales que responden a los nombres de identificador, clase, pseudo-clase y pseudo-elemento.
Identificadores.
En HTML se puede definir un atributo llamado identificador (id), que tiene como fin asignar un nombre nico a un elemento dentro de la pgina web. De esta manera, un elemento queda distinguido de todos los dems, ya que dentro de una pgina web no puede haber ms de un elemento con el mismo identificador. Adems, un elemento slo puede tener un nico identificador. Los identificadores son cadenas de letras y nmeros que deben comenzar por una letra. En el ejemplo siguiente se puede ver cmo se identifica un prrafo con un identificador:
<p id="parrafo1">
Una vez que en el documento HTML hemos asignado un identificador a un elemento, podemos hacer referencia a dicho elemento en la hoja de estilo a travs de su identificador. En este caso, puesto que se trata de un prrafo, la regla de estilo quedara de la siguiente manera:
p#parrafo1 { font-size: 14pt; }
Genricamente, si en HTML identificamos a un elemento <e id="identificador">, para aplicar una regla de estilo a dicho elemento se utilizar:
e#identificador propiedad1: propiedad2: propiedad3: ... } { valor1; valor2; valor3;
Como puede observarse, se utiliza el nombre del elemento en cuestin seguido del smbolo almohadilla (#) y el nombre del identificador que le hayamos asignado.
Ejercicio 4:
Partiendo del documento HTML de los ejercicios, aplica un estilo CSS al cuarto prrafo utilizando un identificador. Dicho estilo consistir en poner el texto de color verde y con tamao de letra de 15 puntos. El cdigo CSS necesario es el siguiente:
color: green; font-size: 15pt;
Para ello crea una hoja de estilo externa llamada "ejercicio4.css" donde se almacene el cdigo css y modifica el archivo HTML cambindole el nombre por "ejercicio4.html" y haciendo que utilice la hoja de estilo que acabas de crear.
Aplicaciones Web
Clases.
En HTML se puede definir un atributo llamado clase (class), que tiene como fin agrupar varios elementos dentro de la pgina web. De esta manera, una clase hace referencia a un conjunto de elementos. Adems, un elemento puede pertenecer a varias clases. Los nombres de clase son cadenas de letras y nmeros que deben comenzar por una letra. En el ejemplo siguiente se puede ver cmo se define un elemento dentro de una clase:
<img src="mesa.jpg" class="muebles">
Para hacer que un elemento pertenezca a varias clases, stas se separan por espacios:
<img src="cama.jpg" class="muebles habitacion">
Una vez que en el documento HTML hemos asignado una clase a un elemento, podemos hacer referencia a todos los elementos pertenecientes a una clase de la siguiente manera:
.muebles { border-width: border-color: } .habitacion { border-width: border-style: } 1px; red;
2px; dashed;
De esta manera, se creara un borde rojo de un pxel en todos los elementos (imgenes, prrafos,...) que pertenecieran a la clase muebles y se creara un borde de lnea discontinua de 2 pxeles en todos los elementos de la clase habitacion. La imagen cama.jpg, al pertenecer a las dos clases, tendra un borde discontinuo rojo de 2 pxeles de grosor. Como puede observarse, en la hoja de estilo se utiliza un punto seguido del nombre de la clase.
Ejercicio 5:
Partiendo del documento HTML de los ejercicios, aplica un estilo CSS a los prrafos impares utilizando una clase. Dicho estilo consistir en poner el texto de color azul y con tamao de letra de 7 puntos. El cdigo CSS necesario es el siguiente:
color: blue; font-size: 7pt;
Para ello crea una hoja de estilo externa llamada "ejercicio5.css" donde se almacene el cdigo css y modifica el archivo HTML cambindole el nombre por "ejercicio5.html" y haciendo que utilice la hoja de estilo que acabas de crear.
Aplicaciones Web
Pseudo-clases.
Las pseudo-clases clasifican a un elemento en funcin del estado del mismo. Normalmente se utilizan para los enlaces, y definen los eventos que hayan ocurrido: que el enlace est sin visitar, que haya sido visitado, que el cursor del ratn se encuentre por encima, etc. Las ms utilizadas se definen a continuacin:
a:link /*Enlaces que no se han visitado*/ a:visited /*Enlaces que se han visitado*/ a:hover /*Enlaces con el cursor encima*/ a:active /*Enlaces en los que se est pulsando el ratn*/ a:focus /*Enlaces seleccionados con el teclado*/
Ejercicio 6:
Partiendo del documento HTML de los ejercicios, aplica un estilo CSS a los enlaces que aparezcan en el documento. Los enlaces normales debern ser rojos (red), los visitados verdes (green), los activos amarillo (yellow) y los que tengan el ratn encima azules (blue). Para ello crea una hoja de estilo externa llamada "ejercicio6.css" donde se almacene el cdigo css y modifica el archivo HTML cambindole el nombre por "ejercicio6.html" y haciendo que utilice la hoja de estilo que acabas de crear.
Pseudo-elementos.
Los pseudo-elementos hacen referencia a algunas partes de los elementos de una pgina a los que HTML no otorga identidad propia. Solamente existen cuatro, que son:
:first-letter /*Primer carcter del elemento al que pertenece*/ :first-line /*Primera lnea del elemento al que pertenece*/ :before /*Elemento anterior*/ :after /*Elemento posterior*/
De esta manera, para que la primera letra de cada prrafo tenga tamao 16, utilizaramos el pseudo-elemento correspondiente:
p:first-letter { font-size: 16pt; }
Ejercicio 7:
Partiendo del documento HTML de los ejercicios, aplica un estilo CSS para que la primera letra de cada prrafo tenga tamao 18 puntos y la primera letra de cada encabezado h3 tenga un tamao de 22 puntos. Para ello crea una hoja de estilo externa llamada "ejercicio7.css" donde se almacene el cdigo css y modifica el archivo HTML cambindole el nombre por "ejercicio7.html" y haciendo que utilice la hoja de estilo que acabas de crear.
Aplicaciones Web
Criterios de seleccin
En esta seccin se detallarn los mtodos que existen para elegir los elementos que se vern afectados por una regla de estilo. Existen cinco criterios:
1. 2. 3. 4. 5. Por Por Por Por Por tipo o nombre de elemento. el contexto en que se encuentra el elemento. clase o identificador del elemento. la pseudo-clase del elemento. los atributos que tiene el elemento.
Seleccin por tipo o nombre de elemento.

Es el ms sencillo de todos. Aplica una regla de estilo a todos los elementos seleccionados sin distinguir por su identificador, clase, contexto,... Por ejemplo:
img { border-color: green; border-width: 2px; border-style: solid; }
En este caso se aplicaran los estilos a todas las etiquetas <img> que aparecieran en el documento HTML, sin importar qu identificador lleven o a qu clase pertenezcan.
Seleccin por contexto del elemento.

De esta manera se pueden seleccionar los elementos en funcin de dnde se encuentran. Por ejemplo, servira para indicar que se aplique una regla de estilo a los enlaces que se encontraran dentro de una determinada seccin. Por ejemplo:
div p{ border-color: green; border-width: 2px; border-style: solid; }
En este caso se aplicaran los estilos a todas los elementos <p> que se encuentren dentro de una etiqueta <div>. Se pueden definir tres contextos:
Ascendiente. Es el elemento que contiene al que se desea formatear. Puede haber ms de un elemento entre medias. Para hacer uso de este criterio se usan dos selectores separados por un espacio, siendo el primero de ellos el ascendiente. Por ejemplo:
div p{ border-color: green; border-width: 2px; border-style: solid; }

Aplicaciones Web
En este caso se formatearan los elementos <p> que se encuentren dentro de una etiqueta <div>. Padre. Es el elemento que contiene directamente al que se desea formatear, al que llamaremos hijo. Para hacer uso de este criterio se usan dos selectores separados por el smbolo >, siendo el primero de ellos el padre y el segundo el hijo. Por ejemplo:
div>img{ border-color: green; border-width: 2px; border-style: solid; } En este caso se formatearan los elementos <img> que se encuentren directamente dentro de una etiqueta <div>, sin que pudiera haber ninguna etiqueta en medio. Por ejemplo, en el siguiente caso no se aplicara el formato, ya que, aunque la etiqueta <img> est dentro de una etiqueta <div>, hay una etiqueta <p> entre medias, por lo que <img> no es hija de <div>, aunque s descendiente. <div> <p> prrafo... <img src="imagen">... </p> </div>
Hermano. Es el elemento que precede directamente, dentro del mismo elemento padre, al que se desea formatear. Para hacer uso de este criterio se usan dos selectores separados por el smbolo +, siendo el primero de ellos el hermano precedente y el segundo el hermano al que se le aplicar el formato. Por ejemplo:
p+p { border-color: green; border-width: 2px; border-style: solid; } En este caso se formatearan los elementos <p> que se encuentren despus de otro elemento <p>, como por ejemplo en el cdigo siguiente: <div> <p>prrafo1...</p>  <p>prrafo2...</p>  </div>
Seleccin por clase o identificador de elemento.

Es la ms utilizada. Se aplican los estilos bien a las clases o identificadores directamente bien a los elementos que pertenezcan a una clase determinada.
.impares { /*Se border-color: border-width: border-style: } selecciona la clase impares*/ green; 2px; solid;
Prof: Mara Jos Goslbez Goslbez - 10 -
Aplicaciones Web
img.impares { /*Se seleccionan las imgenes que pertenezcan a la clase impares*/ border-color: green; border-width: 2px; border-style: solid; } p#dos { /*Se selecciona el prrafo con identificador dos*/ border-color: green; border-width: 2px; border-style: solid; }
Seleccin por la pseudo-clase del elemento.

Las pseudo-clases hacen referencia al estado del elemento. Se utilizan sobre todo para los enlaces:
a:link { /*enlace sin visitar*/ color:red; } a:visited { /*enlace visitado*/ color:green; } a:hover { /*enlace con el ratn encima*/ color:blue; }
Seleccin por los atributos del elemento.

Se utilizan cuando se desea aplicar formato a aquellos elementos que tienen un determinado atributo o un valor de atributo dado. No se utilizan demasiado. Por ejemplo:
td[ fgcolor] { color=#003333; }
En este caso se aplicara el formato a todas las celdas de una tabla (td) que tengan el atributo fgcolor.
Propiedades y valores
Ya hemos visto cmo se estructura un documento css y cmo podemos aplicar estilos a las diferentes partes de un documento HTML. Ya slo queda ver qu propiedades se pueden controlar desde un documento css. Todas estas propiedades se pueden encontrar en la Gua de referencia rpida CSS 2.1, editada por el organismo W3C. En ella aparecen explicadas brevemente todas las propiedades que se pueden utilizar, agrupadas por tipos (propiedades relativas al texto, tipos de letra, tablas, listas,...). Echa un vistazo a la Gua y observa cmo est organizada.
Aplicaciones Web
Cosas a tener en cuenta

Los valores numricos de las propiedades pueden utilizar varias unidades de medida: pxeles, milmetros,... Normalmente se suelen utilizar los pxeles o el porcentaje (con respecto al tamao de la pgina o al contenedor donde se encuentre). Los tipos de unidades los puedes encontrar en la gua. Insertar un cursor en CSS - Para ello es necesario obtener una imagen en formato .cur o .ico. Para incluirla tendremos que indicar el siguiente cdigo CSS: cursor: url("direccion_del_cursor"),auto; Si no incluimos la palabra auto, el cursor no se ver correctamente en el navegador Firefox.
Herencia y precedencia
Herencia
Hay propiedades CSS que afectan a los elementos definidos por un selector y tambin a sus descendientes. Por ejemplo, si se especifica la propiedad color en el body, los elementos que estn dentro de body heredarn dicha propiedad. Sin embargo, tambin hay propiedades que no se heredan, como la propiedad border. Para conseguir que se herede dicha propiedad, se debe asignar el valor inherit a la propiedad que queremos que se herede del elemento padre.
Ejercicio 8:
Partiendo del documento HTML de los ejercicios, aplica un estilo CSS al cuerpo de la pgina que ponga el color de la letra en rojo (red) y cree un borde slido de 3 pxeles. Para ello crea una hoja de estilo externa llamada "ejercicio8.css" donde se almacene el cdigo css y modifica el archivo HTML cambindole el nombre por "ejercicio8.html" y haciendo que utilice la hoja de estilo que acabas de crear. Observa que los prrafos heredan el color de letra pero no los bordes. A continuacin, aade el siguiente cdigo para editar el estilo de los prrafos:
p { border: inherit; }
Observa que ahora s que aparece un borde alrededor de cada prrafo. Esto es porque la propiedad border, que no se hereda, se ha definido para que sea heredable mediante la palabra inherit.
Aplicaciones Web
Especificidad
En ocasiones, puede ocurrir que se definan dos reglas de estilo para un mismo elemento. Por ejemplo:
p#parrafo1 { font-size: 14pt; } p { font-size: 8pt; }
En este caso, se indica que todos los prrafos deben tener tamao de letra 8, mientras que el prrafo llamado prrafo1 debe tener tamao 14. Qu tamao se aplicar al final al prrafo llamado prrafo1? Pues se aplicar tamao 14, ya que esa regla es ms concreta que la que se aplica a todos los prrafos en general. En conclusin, puede decirse que cuanto ms concreto es el selector, ms valor tiene la regla. As, el atributo id prevalecer sobre el atributo class, y ste sobre cualquier selector simple. Adems, los selectores simples se aplican por delante de las reglas heredadas.
Ubicacin
Las reglas que aparecen en ltimo lugar tienen ms peso. As, las reglas que se aplican localmente al elemento HTML se considera que aparecen despus de las definidas en las hojas de estilo interna y externa. A continuacin se muestra un ejemplo de esto:
<html> <head> <title>Ejemplo de resolucin de conflictos con CSS</title> <style type="text/css"> p { color: blue; } p.grupo { color: green; } p#tercero { color: red; } </style> </head> <body> <p>Este prrafo no pertenece a ninguna clase ni lleva ningn identificador. Estar escrito en azul.</p> <p class="grupo">Este prrafo pertenece a la clase "grupo" pero no lleva identificador. Estar escrito en verde.</p> <p class="grupo" id="tercero">Este prrafo pertenece a la clase "grupo" y tiene el identificador "tercero". Estar escrito en rojo.</p>
Aplicaciones Web
<p style="color:#999999">Este prrafo se escribir en gris, siguiendo el estilo definido localmente.</p> </body> </html>
Diseo visual
Las hojas de estilo suelen utilizarse tambin para realizar diseos vistosos de las pginas web. Para ello se utiliza el llamado modelo de cajas. Este modelo tiene su base en que cualquier elemento HTML (tabla, fila, prrafo, divisin,...) es en realidad una caja con la siguiente estructura:
As, cada caja tiene un contenido (texto en el caso de un prrafo, el contenido de una celda, etc.), alrededor del cual hay un espacio de relleno (en ingls, padding). Alrededor del relleno hay un borde (border), que puede estar visible o no, y por ltimo est el margen (margin), que es el espacio que se deja desde la caja a lo que le rodea. Estos parmetros se pueden controlar con las propiedades que aparecen en la gua. Normalmente se suele utilizar el modelo de cajas para estructurar adecuadamente los contenidos de una pgina web. Para ello se suelen utilizar las etiquetas <div> para dividir la pgina en secciones. A cada etiqueta <div> se le asigna un identificador para poder referirse a ella desde la hoja de estilos y as poder situarla en la pgina con sus caractersticas propias (color de fondo, bordes, tipos de letra, etc.). De esta manera, la primera tarea a realizar ser planificar la estructura de nuestra pgina. Suele ser una buena idea realizar un boceto para esta tarea. Un ejemplo de ello sera:
Aplicaciones Web
A partir del boceto, se realizara la estructuracin del cdigo HTML de la pgina. Para ello se haremos uso de las etiquetas <div>, tal como hemos comentado antes. En el caso del ejemplo, el cdigo HTML necesario sera el siguiente:
<html> <head> <title>Ejemplo de modelo visual</title> </head> <body> <div id="cabecera">  </div> <div id="indice">  </div>
Aplicaciones Web
<div id="contenido">  </div> <div id="foto1">  </div> <div id="foto2">  </div> </body> </html>
Una vez realizada la estructuracin del cdigo, aadiramos los contenidos a cada una de las secciones: prrafos, imgenes, listas, tablas, etc. Una vez completada nuestra pgina, pasaramos a definir la hoja de estilos necesaria. En la hoja de estilos se definira el posicionamiento de cada una de las secciones. Para ello se har uso del modelo de formato visual (en la gua). En esta seccin se encuentra el cdigo CSS necesario para situar una caja dentro de la pgina web. El elemento position permite definir el comportamiento de la caja en el documento. Los valores que puede tomar son:

static. relative. La caja estar situada dentro del flujo del documento. Esto quiere decir que su posicin vendr marcada por los elementos HTML que tenga delante y detrs. absolute. La posicin de la caja vendr dada por las coordenadas que se definan. Sin embargo, la caja no estar dentro del flujo del documento, por lo que se podr solapar con otros elementos de la pgina. fixed. Este valor implica un posicionamiento absoluto (como el del apartado anterior) pero manteniendo la posicin aunque se desplace la pgina. De esta manera, la caja estar siempre visible. Se suele utilizar para los ndices de las pginas.
Es aconsejable hacer pruebas con los distintos tipos de posicionamiento para ver su comportamiento. Una vez determinado este valor, se puede definir la posicin de las cajas en funcin de unas coordenadas. Dichas coordenadas hacen referencia al elemento padre o a la ventana del navegador, y son las siguientes:

top. Distancia de la caja respecto al lmite superior de su elemento contenedor. right. Distancia de la caja respecto al lmite derecho de su elemento contenedor. bottom. Distancia de la caja respecto al lmite inferior de su elemento contenedor.
Aplicaciones Web
left. Distancia de la caja respecto al lmite izquierdo de su elemento contenedor.
Normalmente se suele indicar las distancias en pxeles (px). En el caso de que alguna caja se solape con otra, se puede determinar cul estar delante utilizando el parmetro z-index. Este parmetro toma valores enteros (1, 2, 3,...) y se asigna un valor para cada caja. La caja que tenga un valor mayor es la que aparecer por delante de las dems. Por ltimo, tambin se suele indicar la anchura (width) y la altura (height) de las cajas mediante los parmetros que se pueden encontrar en los detalles del modelo de formato visual (en la gua).. El cdigo CSS que quedara para nuestro ejemplo tendra un aspecto similar al siguiente:
#cabecera { position: absolute; top: 0px; left: 0px; width: 100%; height: 60px; } #indice { position: absolute; width: 200px; left: 0px; top: 64px; } #foto1 { position: absolute; width: 200px; left: 0px; top: 200px; } #foto2 { position: absolute; width: 200px; left: 0px; top: 350px; } #cuerpo { position: absolute; left: 215px; top: 65px; padding: 15px; }
Aplicaciones Web
Validacin del cdigo CSS

Igual que en el caso de HTML, el organismo W3C dispone de una pgina donde comprobar que el cdigo escrito en nuestra hoja de estilos se ajusta a los estndares definidos. La pgina en cuestin es http://jigsaw.w3.org/css-validator/, que nos permite subir un archivo o indicar el cdigo directamente. Si la comprobacin de cdigo resulta correcta, podremos poner la siguiente imagen en nuestro sitio web:
Bibliografa y enlaces de inters

Mantenimiento de Portales de Informacin, Ed. McGraw-Hill. http://www.ignside.net/man/css/index.php - Apuntes de CSS. http://www.webestilo.com/css/ - Curso de CSS. http://www.programacion.com/html/tutorial/css1/ - Curso de CSS. http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada - CSS en la Wikipedia http://www.csszengarden.com - Ejemplos de utilizacin de CSS. Especificacin de CSS2 del W3C - Especificaciones de CSS2. http://jigsaw.w3.org/css-validator/ - Servicio de validacin de CSS. http://lawebdelprogramador.com/icocur.php - Cursores e iconos para pginas web.
Gua de Referencia CSS 2.1

http://www.w3c.es/divulgacion/guiasreferencia/css21/

CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Aplicaciones Web

Tema 2 - Tecnologas Web - CSS

Tema 2 - Tecnologas Web - CSS

Prof: Mara Jos Goslbez Goslbez -2-

Tema 2 - Tecnologas Web - CSS

Tipos de hojas de estilo

Prof: Mara Jos Goslbez Goslbez -3-

Tema 2 - Tecnologas Web - CSS

p{ color: red; /*Color rojo*/ font-size: 8pt; /*Tamao de letra 8 puntos*/ }

Estructura genrica de un documento CSS

Prof: Mara Jos Goslbez Goslbez -4-

Tema 2 - Tecnologas Web - CSS

La declaracin a su vez est formada por un conjunto de propiedades y valores:

Prof: Mara Jos Goslbez Goslbez -5-

Tema 2 - Tecnologas Web - CSS

Prof: Mara Jos Goslbez Goslbez -6-

Tema 2 - Tecnologas Web - CSS

Prof: Mara Jos Goslbez Goslbez -7-

Tema 2 - Tecnologas Web - CSS

Prof: Mara Jos Goslbez Goslbez -8-

Tema 2 - Tecnologas Web - CSS

Seleccin por tipo o nombre de elemento.

Seleccin por contexto del elemento.

div p{ border-color: green; border-width: 2px; border-style: solid; }

Tema 2 - Tecnologas Web - CSS

Seleccin por clase o identificador de elemento.

Prof: Mara Jos Goslbez Goslbez - 10 -

Tema 2 - Tecnologas Web - CSS

Seleccin por la pseudo-clase del elemento.

Seleccin por los atributos del elemento.

Prof: Mara Jos Goslbez Goslbez - 11 -

Tema 2 - Tecnologas Web - CSS

Cosas a tener en cuenta

Prof: Mara Jos Goslbez Goslbez - 12 -

Tema 2 - Tecnologas Web - CSS

Prof: Mara Jos Goslbez Goslbez - 13 -

Tema 2 - Tecnologas Web - CSS

Prof: Mara Jos Goslbez Goslbez - 14 -

Tema 2 - Tecnologas Web - CSS

Tema 2 - Tecnologas Web - CSS

Prof: Mara Jos Goslbez Goslbez - 16 -

Tema 2 - Tecnologas Web - CSS

left. Distancia de la caja respecto al lmite izquierdo de su elemento contenedor.

Prof: Mara Jos Goslbez Goslbez - 17 -

Tema 2 - Tecnologas Web - CSS

Validacin del cdigo CSS

Bibliografa y enlaces de inters

Gua de Referencia CSS 2.1

Prof: Mara Jos Goslbez Goslbez - 18 -

S-ar putea să vă placă și

p{ color: red; /Color rojo/ font-size: 8pt; /Tamao de letra 8 puntos/ }