Informatica

Tema: Hojas De Estilo En Cascada En Páginas Web

1. Definición de css y sintaxis básica de css

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe cómo se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.

2. Diferentes tipos de estilo que se pueden aplicar a un documento HTML

Hojas de Estilo en Cascada

Los lenguajes de hojas de estilo en cascada, tales como CSS, permiten que se pueda combinar la información de varias fuentes. Sin embargo, no todos los lenguajes de hojas de estilo soportan la cascada. Para definir una cascada, los autores especifican una secuencia de elementos LINK y/o STYLE. La información de estilo se combina en cascada según el orden en que aparecen los elementos en la sección HEAD.

En el siguiente ejemplo, especificamos dos hojas de estilo alternativas llamadas "compacto". Si el usuario selecciona el estilo "compacto", el agente de usuario debe aplicar ambas hojas de estilo externas, así como la hoja de estilo persistente "comun.css". Si el usuario selecciona el estilo "tipos grandes", sólo se aplicarán la hoja de estilo alternativa "tgrandes.css" y "comun.css".

<LINK rel="alternate stylesheet" title="compacto"

href="peq-base.css" type="text/css">

<LINK rel="alternate stylesheet" title="compacto"

href="peq-extras.css" type="text/css">

<LINK rel="alternate stylesheet" title="tipos grandes"

href="tgrandes.css" type="text/css">

<LINK rel="stylesheet" href="comun.css" type="text/css">

Aquí tenemos un ejemplo de cascada que incluye tanto al elemento LINK como al STYLE.

<LINK rel="stylesheet" href="empresa.css" type="text/css">

<LINK rel="stylesheet" href="informe.css" type="text/css">

<STYLE type="text/css">

p.especial { color: rgb(230, 100, 180) }

</STYLE>

Cascadas dependientes del medio

Una cascada puede incluir hojas de estilo aplicables a medios diferentes. Tanto LINK como STYLE pueden usarse con el atributo media. El agente de usuario es por tanto responsable de filtrar aquellas hojas de estilo que no se apliquen al medio actual.

En el siguiente ejemplo, definimos una cascada en la cual se incluyen varias versiones de la hoja de estilo "empresa": una diseñada para su impresión, otra para la pantalla y otra para navegadores basados en voz (útil, por ejemplo, para leer correo electrónico en el coche). La hoja de estilo "informe" se aplica a todos los medios. La regla de color definida por el elemento STYLE se usa para impresoras y pantallas, pero no para la representación auditiva.

<LINK rel="stylesheet" media="aural" href="empresa-aural.css" type="text/css">

<LINK rel="stylesheet" media="screen" href="empresa-screen.css" type="text/css">

<LINK rel="stylesheet" media="print" href="empresa-print.css" type="text/css">

<LINK rel="stylesheet" href="informe.css" type="text/css">

<STYLE media="screen, print" type="text/css">

p.especial { color: rgb(230, 100, 180) }

</STYLE>

3. Diferentes selectores que se emplean en un estilo CSS

Selector universal

El selector universal se indica mediante un asterisco (*). Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):

* {

margin: 0;

padding: 0;

}

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p {

...

}

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:

h1 {

color: #8A8E27;

...