CSS

Módulo V

Funcionamiento

Visor Web

Servidor Web

Documentos

Página Web

Solicitud

Entrega

Hojas de Estilo

• Permiten aplicar formato a los documentos escritos en HTML separando el contenido de las páginas de su apariencia.

• Una hoja de estilo permite aumentar el control del diseñador sobre cómo se verán sus páginas Web, asociando un conjunto de propiedades de formato físico a los elementos estándar del lenguaje HTML.

• De esta forma, el resultado final que observa la persona en su visor es una mezcla entre las características predefinidas para cada comando HTML y la hoja de estilo.

Ventajas

• Alterar la presentación de cada elemento sin tocar el código HTML, ahorrando esfuerzo y tiempo de edición.

• El lenguaje de las CSS ofrece herramientas de composición más potentes que HTML. Se evita tener que recurrir a trucos para conseguir algunos efectos.

• Las hojas de estilo pueden aplicarse de varias maneras y combinarse formando una cascada de estilos con la información de cada una.

Características• Compatibilidad hacia atrás y hacia adelante.• Complementariedad con documentos estructurados.

– ej., HTML y aplicaciones XML• Independencia del vendedor, la plataforma y el dispositivo.• Mantenibilidad.• Simplicidad.• Rendimiento de la red.

– proporciona una compacta codificación para presentar los contenidos • Flexibilidad.

– pueden ser aplicadas al contenido de varias maneras • Riqueza.

– Proporciona a los autores un abundante juego de efectos de procesamiento

• Combinación con lenguajes alternativos.• Accesibilidad.

Desventajas

• Soporte irregular por distintos Visores y versiones

• Esto puede provocar que: – Una página sea visualizada por el lector con un

formato no deseado por el autor.– Algunas propiedades de las CSS puedan

provocar que una parte del contenido de nuestra página resulte inaccesible desde ciertos navegadores si no son utilizadas correctamente.

Funcionamiento

Visor Web

Página HTML

Abcd

Bcsy

Caswd

Hoja de Estilo

Página Web

Componentes

• Un Estilo está formado por reglas.• Cada regla está constituida por un selector y un

conjunto de declaraciones.• Cada declaración está formada por una propiedad y

un valor.• Ejemplo:

H1 {font-family: Arial, Sans-serif;font-size: 19pt;color: #0000FF;text-align: center;

}

Declaración de Estilos

• Añadiendo declaraciones de estilo sólo a marcadores concretos o a un grupo de ellos.

• Incluyendo las declaraciones de estilo en el documento HTML de una página concreta, permite cambiar la apariencia de una hoja entera.

• Enlazando varias páginas con un archivo de estilo, de modo que se puede cambiar la apariencia de múltiples páginas modificando dicho archivo .CSS.

Estilos para un marcador o un grupo

• Se agrega el atributo STYLE a un marcador HTML.

• Se emplea el marcador DIV para agrupar marcadores.

• Por ejemplo:<P> Un primer párrafo con las reglas del visor. <P STYLE="margin-left: 0.5in; margin-right: 0.5in; color: green;">

Un segundo párrafo con las reglas redefinidas.

Estilos para un documento

• Se coloca el marcador <STYLE> en el encabezado del documento HTML.

• Por ejemplo:<STYLE TYPE="text/css">

BODY {background: yellow ;font-size: 10pt;font-family: Arial;margin-left: 0.5in;margin-right: 0.5in

}</STYLE>

Estilos para varios documentos

• Se colocan las reglas en un archivo con la extensión .css

• En todas las páginas que utilizarán este estilo concreto, solamente se debe añadir el siguiente comando: <LINK REL=“stylesheet” HREF=“hoja.css” TYPE="text/css">

Cascada

• Para evitar conflictos entre los distintos métodos usados simultáneamente, existe un orden de preferencia– Estilo dentro de un marcador. – Bloque de estilo en el encabezado del

documento HTML. – Enlace a un archivo que contiene la hoja de

estilo .CSS

Herencia

• Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas, tablas, etc.) organizados en una estructura donde cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro.

• En esta estructura existe un elemento raíz que es el que actúa de contenedor de todos los demás elementos.

• La importancia de este hecho es que cada elemento hereda las propiedades del elemento que lo contiene (llamado el elemento padre).

Selectores

• Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus propiedades.

• Pueden ser – Selectores de Tipos– Selectores de Clases– Selectores ID– Pseudo-clases– Pseudo-elementos

Selector de Tipos

• Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML.

• Usan la misma palabra que el marcador sin los signos < y >.

• Ejemplo:H1 {text-align: center}

Selector de Clases

• El selector de clases es un punto (.) seguido por el nombre de la clase que se haya creado (el nombre lo elige uno)

• Ejemplo:P.pregunta {font-weight: bold; font-style: italic}

• A los marcadores P se les agrega el atributo CLASS dentro de la marca de la página HTML: <P CLASS="pregunta">Esta es una pregunta del reportero</P>

Selector ID

• Son una opción para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la página.

• Los selectores de ID sólo pueden aplicarse a un elemento de la página. Se utiliza el carácter de numeral (#):

• Ejemplo:H1#titulo1 {text-align: center}#volanta {font-style: italic}

Selector de Atributos

• Los selectores de atributos permiten seleccionar elementos de la página según sus propiedades o el valor asignado a estas propiedades.

• Ejemplo:P[CLASS] {margin-left: 1cm}

• Ahora, si se desea seleccionar solamente aquellos párrafos que tengan el atributo CLASS="pregunta", deberá usar:P[CLASS="pregunta"] {margin-left: 1cm}

Selector Universal

• El selector universal se escribe con un asterisco (*) y representa a cualquier elemento de la página. Por ejemplo, con:* {color: red}

Agrupamiento

• Cuando se tiene varios selectores que comparten las mismas declaraciones pueden agruparse en una lista separada por comas (,).H1 {font-family: Arial, Sans-serif}

#volanta {font-family: Arial, Sans-serif}

• Podemos simplificarlo de este modo:H1, #volanta {font-family: Arial, Sans-serif}

Selectores Contextuales

• Los selectores de descendientes permiten especificar un elemento que está contenido dentro de otro elemento.H1 EM {color: blue}

• Los selectores de hijos identifican a un elemento cuando es hijo de otro elemento.DIV > P {color: blue}

• Los selectores de hermanos adyacentes tienen una sintaxis similar a los dos anteriores, usando como combinador el signo más (+). H1 + P {text-indent: 0}

Pseudo-clases

• Las pseudo-clases no pueden deducirse simplemente observando la estructura del documento.

• Son abstracciones que permiten referirse a elementos que de otro modo resultarían inaccesibles.

• Las pseudo-clases son: :first-child :link y :visited :hover, :active y :focus :lang

Pseudo-elementos

• Son llamados pseudo-elementos porque en realidad no existen en el documento fuente (ninguna marca identifica la primer letra de un párrafo, por ejemplo) pero son muy útiles para seleccionar elementos importantes dentro de la composición.

• Los pseudo-elementos son::first-line

:first-letter

:before y :after