Introducción a las hojas de estilo y aplicación
Las hojas de estilo representan un
avance importante para los diseñadores de páginas web, al darles un mayor rango
de posibilidades para mejorar la apariencia de sus páginas. En los entornos
científicos en que la Web fue concebida, la gente estaba más preocupada por el
contenido de sus páginas que por su presentación. A medida que la Web era
descubierta por un espectro mayor de personas de distintas procedencias, las
limitaciones del HTML se convirtieron en fuente de continua frustración, y los
autores se vieron forzados a superar las limitaciones estilísticas del HTML.
Aunque las intenciones han sido buenas -- mejorar la presentación de las
páginas web --, las técnicas para conseguirlo han tenido efectos secundarios
negativos. Entre estas técnicas, que dan buenos resultados para algunas
personas, algunas veces, pero no siempre ni para todas las personas, se
incluyen:
- La utilización de extensiones propietarias del HTML
- Conversión del texto en imágenes
- Utilización de imágenes para controlar el espacio en blanco
- La utilización de tablas para la organización de las páginas
- Escribir programas en lugar de usar HTML
Estas técnicas incrementan
considerablemente la complejidad de las páginas web, ofrecen una flexibilidad
limitada, sufren de problemas de interoperabilidad, y crean dificultades para
las personas con discapacidades.
Las hojas de estilo resuelven estos
problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de
presentación del HTML. Con las hojas de estilo es más fácil especificar la
cantidad de espacio entre líneas, el sangrado de las líneas, los colores a
utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros
muchos detalles.
Por ejemplo, la siguiente hoja de
estilo CSS (almacenada en el fichero "especial.css") hace que el
color del texto de un párrafo sea verde ("green") y lo rodea de un
borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con una hoja de
estilo externa<TITLE>
<LINK
href="especial.css" rel="stylesheet"
type="text/css">
</HEAD>
<BODY>
<P class="especial">Este
párrafo debería tener texto especial verde.
</BODY>
</HTML>
HTML 4 soporta las siguientes características de hojas de estilo:
Colocación flexible de la información de estilo
Al colocar las hojas
de estilo en ficheros separados es más fácil reutilizarlas. Algunas veces es
útil incluir instrucciones de representación dentro del documento al que se
aplican, ya sea agrupadas al comienzo del documento, o en atributos de los
elementos a lo largo del cuerpo del documento. Para facilitar la gestión de
estilos a nivel de sitio, esta especificación describe cómo utilizar los
encabezados HTTP para especificar qué hojas de estilo se aplican a un
documento.
Independencia de lenguajes de hojas de estilo específicos
Esta especificación
no liga el HTML con ningún lenguaje de hojas de estilo en particular. Esto
permite que se puedan usar otros lenguajes diferentes, desde los lenguajes más
simples válidos para la mayoría de los usuarios, hasta los más complejos,
útiles para una minoría de usuarios con necesidades muy especializadas. Todos
los ejemplos que se incluyen en lo que sigue se sirven del lenguaje CSS (Hojas
de Estilo en Cascada, Cascading Style Sheets, [CSS1]), pero también son posibles otros lenguajes de hojas de estilo.
Cascada
Se llama así a la
capacidad que proporcionan algunos lenguajes de hojas de estilo tales como CSS
que permiten que las informaciones de estilo provenientes de varias fuentes
puedan combinarse. Éstas podrían ser, por ejemplo, las guías de estilo de una
empresa, los estilos comunes a un grupo de documentos, y los estilos
específicos de un documento en particular. Al almacenarse independientemente,
las hojas de estilo pueden reutilizarse, lo cual simplifica las tareas de
diseño y hace más efectiva la utilización de la memoria caché de la red. La
cascada define una secuencia ordenada de hojas de estilo en la que las reglas
de las últimas hojas tienen una prioridad mayor que las de las primeras. No
todos los lenguajes de hojas de estilo soportan la cascada.
Dependencias de los medios
HTML permite a los
autores especificar sus documentos de una manera independiente del medio. Esto
permite a los usuarios acceder a las páginas web usando una amplia gama de
dispositivos y medios, p.ej., pantallas gráficas para ordenadores bajo Windows,
Macintosh OS y X11, dispositivos para aparatos de televisión, teléfonos
adaptados y dispositivos portátiles PDA, navegadores basados en voz, y
dispositivos táctiles Braille.
Las hojas de estilo,
en contraste, se aplican a medios o grupos de medios específicos. Una hoja de
estilo diseñada para una pantalla puede ser aplicable para una salida impresa,
pero es de poca utilidad para los navegadores basados en voz. Esta
especificación le permite definir categorías generales de medios a los que es
aplicable una hoja de estilo dada. Esto permite a los agentes de usuario evitar
la descarga de hojas de estilo que no sean apropiadas. Los lenguajes de hojas
de estilo pueden incluir características para describir dependencias del medio
dentro de una misma hoja de estilo.
Estilos alternativos
Los autores pueden
querer ofrecer a los lectores varias maneras diferentes de ver un documento.
Por ejemplo, una hoja de estilo para representar documentos compactos con
fuentes pequeñas, o una que especifique fuentes más grandes para una lectura
más fácil. Esta especificación permite a los autores especificar una hoja de
estilo preferente así como hojas alternativas que se dirijan a medios o
usuarios específicos. Los agentes de usuario deberían dar a los usuarios la
oportunidad de seleccionar una de las hojas de estilo alternativas o incluso de
desactivar las hojas de estilo completamente.
Consideraciones de rendimiento
Algunas personas han
expresado su preocupación acerca de los posibles problemas de rendimiento
relacionados con las hojas de estilo. Por ejemplo, la obtención de una hoja de
estilo externa puede retrasar la presentación del documento al usuario. Algo
parecido sucede si la cabecera del documento contiene un conjunto muy grande de
reglas de estilo.
La propuesta actual
resuelve estos problemas, pues permite a los autores incluir instrucciones de
representación dentro de cada elemento HTML. Así, la información de
representación siempre estará disponible en el momento en que el agente de
usuario quiera representar cada elemento.
En muchos casos los
autores sacarán partido de una hoja de estilo común a un grupo de documentos.
En este caso, la distribución de reglas de estilo a lo largo del documento
conducirá a un rendimiento peor que si se usara una hoja de estilo vinculada,
ya que para la mayoría de los documentos la hoja de estilo ya estará almacenada
en la caché local. La disponibilidad pública de hojas de estilo de calidad
potenciará este efecto.
Añadir estilos al HTML
Nota. La hoja de estilo por defecto del HTML 4 que se incluye en [CSS2] expresa la información de estilo por
defecto generalmente aceptada para cada elemento. Los autores, así como los
implementadores, pueden encontrar en ella un recurso útil.
Los documentos HTML pueden contener
reglas de hojas de estilo directamente, o bien pueden importar hojas de estilo.
Se puede usar cualquier lenguaje de
hojas de estilo con HTML. Un lenguaje simple de hojas de estilo puede ser
suficiente para la mayoría de los usuarios, pero para otras necesidades más
especializadas pueden ser apropiados otros lenguajes. Esta especificación
utiliza para los ejemplos el lenguaje de estilo llamado "Hojas de Estilo
en Cascada" ("Cascading Style Sheets", [CSS1]), abreviado CSS.
Especificaciones del lenguaje de hojas de estilo por defecto
Los autores deben especificar el
lenguaje de hojas de estilo de la información de estilo asociada con un
documento HTML.
Los autores deberían usar el elemento META para especificar el
lenguaje de hojas de estilo por defecto de un documento. Por ejemplo, para
especificar que el valor por defecto es CSS, los autores deberían poner la
siguiente declaración en la sección HEAD de sus documentos:
<META http-equiv="Content-Style-Type"
content="text/css">
El lenguaje de hojas de estilo por
defecto también puede ser establecido con encabezados HTTP. La declaración META de arriba es
equivalente al encabezado HTTP siguiente:
Content-Style-Type:
text/css
Los agentes de usuario deberían
determinar el lenguaje de hojas de estilo por defecto de acuerdo con los
siguientes pasos (ordenados de mayor a menor prioridad):
1.
Si alguna declaración META especifica
"Content-Style-Type", la última de ellas en el flujo de caracteres
determina el lenguaje de hojas de estilo por defecto.
2.
De otro modo, si algún encabezado HTTP especifica
"Content-Style-Type", el último de ellos en el flujo de caracteres
determina el lenguaje de hojas de estilo por defecto.
3.
De otro modo, el lenguaje de hojas de estilo por defecto es
"text/css".
Los documentos que incluyan elementos
que especifiquen el atributo style pero que no definan
un lenguaje de hojas de estilo por defecto son incorrectos. Las herramientas de creación deberían generar información de
lenguaje de hojas de estilo por defecto (normalmente una declaración META) de modo que los
agentes de usuario no tengan que atenerse al valor por defecto
"text/css".
Información de estilo en línea
Definiciones de atributos
Este atributo
especifica información de estilo para el elemento actual.
La sintaxis del valor del
atributo style viene determinada por
el lenguaje
de hojas de estilo por defecto. Por ejemplo, para los estilos
[[CSS2]] en línea, se usa la sintaxis de bloque de declaraciones descrita en la
sección 4.1.8 (sin las llaves).
Este ejemplo CSS establece información
sobre el color y el tamaño de la fuente del texto de un párrafo específico.
<P
style="font-size: 12pt; color: fuchsia">¿No son maravillosas las
hojas de estilo?
En CSS, las declaraciones de
propiedades son de la forma "nombre : valor" y están separadas por un
punto y coma.
Para especificar información de estilo
en línea para más de un elemento, los autores deberían usar el elemento STYLE. Para lograr una flexibilidad óptima, los autores deberían definir los
estilos en hojas de estilo externas.
Información
de estilo en cabecera: el elemento STYLE
<!ATTLIST STYLE
>
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de
atributos
Este atributo
especifica el lenguaje de hojas de estilo de los contenidos del elemento y
prevalece sobre el lenguaje de hojas de estilo por defecto. El lenguaje de
hojas de estilo se especifica como un tipo de contenido (p.ej.,
"text/css"). Los autores deben proporcionar un valor para este
atributo; no hay valor por defecto para este atributo.
Este atributo
especifica el medio destino al que se dirige la información de estilo. Puede
ser un solo descriptor de medios, o una lista de ellos separados por comas. El
valor por defecto de este atributo es "screen" (pantalla).
Atributos definidos
en otros lugares
El elemento STYLE permite a los autores
poner reglas de hojas de estilo en la cabecera del documento. HTML
permite cualquier número de elementos STYLE en la sección HEAD de un documento.
Los agentes de usuario que no soporten
hojas de estilo, o que no soporten el lenguaje de hojas de estilo utilizado por
un elemento STYLE en particular, deben
ocultar los contenidos del elemento STYLE. Es un error representar el contenido como parte del
texto del documento. Algunos lenguajes de hojas de estilo soportan sintaxis
para ocultar
el contenido a agentes de usuarios no conformes.
Algunas implementaciones de hojas de
estilo pueden permitir una gama más amplia de reglas en el elemento STYLE que en el atributo style. Por ejemplo, con
CSS, pueden declararse reglas dentro de un elemento STYLE para:
- Todas las apariciones de un elemento de HTML específico (p.ej., todos los elementos P, todos los elementos H1, etc.)
- Todas las apariciones de un elemento de HTML que pertenezcan a una clase específica (es decir, cuyo atributo class tome cierto valor).
- Las apariciones únicas de un elemento de HTML (es decir, cuyo atributo id tome cierto valor).
Las reglas de precedencia y herencia de
las reglas de estilo dependen del lenguaje de hojas de estilo.
La siguiente declaración STYLE CSS pone un borde
alrededor de todos los elementos H1 del documento y los centra en la
página.
<HEAD>
<STYLE
type="text/css">
H1
{border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
Para especificar que esta información
de estilo sólo debería aplicarse a los elementos H1 de una clase específica, la modificamos
como sigue:
<HEAD>
<STYLE
type="text/css">
H1.miclase
{border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1
está afectado por nuestro estilo </H1>
<H1> Este no está afectado por nuestro
estilo </H1>
</BODY>
Finalmente, para limitar el alcance de
la información de estilo a una sola aparición de H1, establecemos el atributo id:
<HEAD>
<STYLE
type="text/css">
#miid
{border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1
no está afectado </H1>
<H1 id="miid"> Este H1 está
afectado por el estilo </H1>
<H1> Este H1 no está afectado
</H1>
</BODY>
Aunque se puede especificar información de estilo prácticamente para cualquier elemento,
hay dos elementos, DIV y SPAN, que son
particularmente útiles en el sentido de que no imponen ningún significado
presentacional (aparte de la distinción en
bloque/en línea). Combinados con hojas de estilo, estos elementos permiten a los
usuarios extender el HTML indefinidamente, en especial si se utilizan junto con
los atributos class e id.
En el siguiente ejemplo, utilizamos el
elemento SPAN para especificar que
el estilo de fuente de las primeras palabras de un párrafo sea versalitas
("small-caps").
<HEAD>
<STYLE
type="text/css">
SPAN.ver-ex
{ font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN
class="ver-ex">Las primeras</SPAN> palabras
de este párrafo van en versalitas.
</BODY>
En el siguiente ejemplo, utilizamos el
elemento DIV y el atributo class para establecer la
justificación del texto de una serie de párrafos que constituyen el abstracto
de un artículo científico. Esta información de estilo podría reutilizarse para
otras secciones de abstracto especificando el valor correspondiente del atributo class en cualquier otro
lugar del documento.
<HEAD>
<STYLE
type="text/css">
DIV.Abstracto { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV
class="Abstracto">
<P>La gama de
productos Gran Jefe es nuestra apuesta
para el año que viene. Este informe sienta
las bases
para confrontar a Gran Jefe con los
productos de la
competencia.
<P>Gran Jefe reemplaza a nuestra gama
"Commander",
si bien ésta seguirá de momento en
catálogo.
</DIV>
</BODY>
HTML permite a los autores diseñar
documentos que saquen partido de las características de los medios en los que
el documento vaya a ser representado (p.ej., pantallas gráficas, pantallas de
televisión, dispositivos de mano, navegadores basados en voz, dispositivos
táctiles Braille, etc.). Al especificar el atributo media, los autores
permiten a los agentes de usuario cargar y aplicar las hojas de estilo de
manera selectiva. Consulte la lista de descriptores
de medios reconocidos.
Las siguientes declaraciones de ejemplo
se aplican a elementos H1. Cuando se proyecten en una reunión de
negocios, todos ellos aparecerán en azul. Cuando se impriman, aparecerán
centrados.
<HEAD>
<STYLE type="text/css"
media="projection">
H1 { color:
blue }
</STYLE>
<STYLE
type="text/css" media="print">
H1 {
text-align: center }
</STYLE>
Este ejemplo añade efectos de sonido a
los vínculos para su uso en salidas por voz:
<STYLE type="text/css"
media="aural">
A {
cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
El control de medios es particularmente
interesante cuando se aplica a hojas de estilo externas, ya que los agentes de
usuario pueden ahorrar tiempo si obtienen de la red únicamente aquellas hojas
de estilo que se apliquen el dispositivo actual. Por ejemplo, los navegadores
basados en voz pueden evitar la descarga de hojas de estilo diseñadas para la
representación visual. Veáse la sección sobre cascadas
dependientes del medio para más información.
-Hojas de estilo externas
Los autores pueden separar las hojas de
estilo de los documentos HTML. Esto ofrece varias ventajas:
- Los autores y los administradores de sitios web pueden compartir hojas de estilo entre varios documentos (y sitios).
- Los autores pueden cambiar la hoja de estilo sin necesidad de hacer modificaciones en el documento.
- Los agentes de usuario pueden cargar hojas de estilo selectivamente (en función de los descriptores de medios).
Hojas de
estilo preferentes y alternativas
HTML permite a los autores asociar
cualquier número de hojas de estilo externas a un documento. El lenguaje de
hojas de estilo define el modo en que interaccionan varias hojas de estilo (por
ejemplo, las reglas de "cascada" de CSS).
Los autores pueden especificar cualquier número de hojas de estilo
mutuamente excluyentes llamadas hojas de estilo alternativas. Los usuarios pueden
seleccionar su hoja favorita según sus preferencias. Por ejemplo, un autor
puede especificar una hoja de estilo diseñada para pantallas pequeñas y otra
para usuarios con poca visión (p.ej., con fuentes grandes). Los agentes de
usuario deberían permitir a los usuarios seleccionar las hojas de estilo
alternativas.
El autor puede especificar que una de las alternativas es una hoja de
estilo preferente. Los agentes de usuario deberían aplicar
la hoja de estilo preferente del autor a menos que el usuario haya seleccionado
una alternativa diferente.
Los autores pueden agrupar varias hojas
de estilo alternativas (incluyendo las hojas de estilo preferentes del autor)
bajo un nombre de estilo común. Cuando un
usuario selecciona un nombre de estilo, el agente de usuario debe aplicar todas
las hojas de estilo con ese nombre. Los agentes de usuario no deben aplicar
hojas de estilo alternativas con un nombre de estilo diferente. La sección
sobre especificación
de hojas de estilo externas explica cómo dar un nombre a un grupo
de hojas de estilo.
Los autores también pueden especificar hojas de estilo persistentes que los agentes de
usuario deben aplicar además de cualquier hoja de estilo alternativa.
Los agentes de usuario deben respetar
los descriptores
de medios al aplicar cualquier hoja de estilo.
Los agentes de usuario también deberían
permitir a los usuarios deshabilitar completamente las hojas de estilo del
autor, en cuyo caso el agente de usuario no debería aplicar ninguna hoja de
estilo persistente ni alternativa.
Los autores especifican hojas de estilo
externas mediante los siguientes atributos del elemento LINK:
- Haciendo el valor de href igual a la localización del fichero de la hoja de estilo. El valor de href es un URI.
- Haciendo que el valor del atributo type indique el lenguaje del recurso (hoja de estilo) vinculado. Esto permite al agente de usuario evitar la descarga de una hoja de estilo cuyo lenguaje no soporte.
- Especificando si la hoja de estilo es persistente, preferente, o alternativa:
- Para hacer una hoja de estilo persistente, se hace el atributo rel igual a "stylesheet" y no se establece el atributo title.
- Para hacer una hoja de estilo preferente, se hace el atributo rel igual a "stylesheet" y se da un nombre a la hoja de estilo mediante el atributo title.
- Para especificar una hoja de estilo alternativa, se hace el atributo rel igual a "alternate stylesheet" y se da un nombre a la hoja de estilo mediante el atributo title.
Los agentes de usuario deberían
posibilitar a los usuarios ver la lista de estilos alternativos y escoger uno
de ellos. Se recomienda que el nombre de cada opción sea el valor del atributo title.
En este ejemplo, especificamos en
primer lugar una hoja de estilo persistente localizada en el fichero miestilo.css:
<LINK href="miestilo.css"
rel="stylesheet" type="text/css">
<LINK
href="miestilo.css" title="compacto" rel="stylesheet"
type="text/css">
Si añadimos la palabra clave
"alternate" al atributo rel la convertimos en una hoja de estilo
alternativa:
<LINK href="miestilo.css"
title="Medium" rel="alternate stylesheet"
type="text/css">
Para más información sobre hojas de
estilo externas, consulte la sección sobre vínculos
y hojas de estilo externas.
Los autores también
pueden usar el elemento META para establecer la hoja de estilo preferente del documento. Por ejemplo, para
especificar que la hoja de estilo preferente sea "compacto" (ver el
ejemplo precedente), los autores pueden incluir la siguiente línea en el HEAD:
<META
http-equiv="Default-Style" content="compacto">
La hoja de estilo preferente también se
puede especificar mediante encabezados HTTP. La declaración META precedente es
equivalente a este encabezado HTTP:
Default-Style:
"compacto"
Si hay dos o más declaraciones META o encabezados HTTP
que especifiquen la hoja de estilo preferente, la que prevalece es la última. A
estos efectos, se considera que los encabezados HTTP aparecen antes que la
sección HEAD del documento.
Si hay dos o más elementos LINK que especifiquen una
hoja de estilo preferente, el que prevalece es el primero.
Las hojas de estilo preferentes
especificadas con un elemento META o con encabezados
HTTP prevalecen sobre las especificadas con el elemento LINK.
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.
Nota. Esta especificación no especifica cómo se combinan en cascada hojas de
estilo de lenguajes de hojas de estilo distintos. Los autores deberían evitar
mezclar lenguajes de hojas de estilo.
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">
<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>
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 un
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>
Herencia
y cascada
Cuando el agente de usuario quiere
representar un documento, necesita encontrar valores para las propiedades de
estilo, p.ej., la familia tipográfica, el tamaño de fuente, la altura de línea,
el color del texto, etc. El mecanismo exacto depende del lenguaje de la hoja de
estilo, pero en general es válida la descripción siguiente:
Se utiliza el mecanismo de cascada
cuando varias reglas de estilo se aplican directamente a un mismo elemento. El
mecanismo permite al agente de usuario ordenar las reglas según su
especificidad para determinar la regla a aplicar. Si no encuentra ninguna
regla, el siguiente paso depende de si la propiedad de estilo puede ser
heredada o no. No todas las propiedades se heredan. Para estas propiedades el
lenguaje de la hoja de estilo proporciona unos valores por defecto que son los
que se usan cuando no hay reglas explícitas para un elemento en particular.
Si la propiedad puede ser heredada, el
agente de usuario examina el elemento contenedor inmediato para ver si hay
alguna regla que se aplique a él. Este proceso continúa hasta que se encuentra
alguna regla aplicable. Este mecanismo permite que las hojas de estilo puedan
definirse de una manera compacta. Por ejemplo, los autores pueden especificar
la familia tipográfica de todos los elementos contenidos en BODY con una sola regla
que se aplique al elemento BODY.
Algunos lenguajes de hojas de estilo
soportan sintaxis pensada para permitir a los autores ocultar el contenido de
los elementos STYLE a los agentes de
usuario no conformes.
Este ejemplo ilustra cómo comentar en
CSS el contenido de los elementos STYLE para asegurarse de
que los agentes de usuario antiguos y no conformes no lo representarán como
texto.
<STYLE type="text/css">
<!--
H1 {
color: red }
P { color: blue}
-->
</STYLE>
Esta sección sólo se
aplica a los agentes de usuario conformes con las versiones de HTTP que definan
un campo de encabezado Link. Obsérvese que HTTP 1.1, tal y como se define en [RFC2616], no incluye un campo de encabezado
Link (ver sección 19.6.3).
Los administradores de servidores web
pueden creer conveniente configurar un servidor de modo que una hoja de estilo
se aplique a un grupo de páginas. El encabezado HTTP Linktiene el mismo efecto que un elemento LINK con los mismos
atributos y valores. Varios encabezados Link corresponderían a varios elementos LINK que aparecieran en el
mismo orden. Por ejemplo,
Link: <http://www.acme.com/empresa.css>;
REL=stylesheet
corresponde a:
<LINK rel="stylesheet"
href="http://www.acme.com/empresa.css">
Es posible especificar varias hojas de
estilo alternativas especificando varios encabezados Link, y a continuación utilizar el atributo rel para determinar el estilo por defecto.
En el ejemplo siguiente, se aplica
"compacto" por defecto, ya que omite la palabra clave
"alternate" del atributo rel.
Link: <compacto.css>;
rel="stylesheet"; title="compacto"
Link: <tgrandes.css>; rel="alternate
stylesheet"; title="tipos grandes"
Esto debería funcionar cuando se envían
documentos HTML por correo electrónico. Algunos agentes de correo pueden
alterar el orden de los encabezados de [RFC822]. Para evitar que esto afecte al orden de cascada de las hojas de estilo
especificadas con encabezados Link, los autores pueden
usar la concatenación de encabezados para combinar varias apariciones del mismo
campo de encabezado. Las comillas sólo se necesitan si los valores de los
atributos contienen algún espacio en blanco. Utilice entidades SGML para hacer
referencia a caracteres que no se permitan en encabezados de HTML o de correo
electrónico, o que sean susceptibles de resultar afectados por el tránsito a lo
largo de la red.
Ø Imágenes
Estilos
básicos
-Eliminar
el borde de las imágenes con enlaces
Cuando
una imagen forma parte de un enlace, los navegadores por defecto muestran las
imágenes
con un borde azul ancho. Por tanto, una de las reglas más utilizadas en los
archivos
CSS
es la que elimina los bordes de las imágenes con enlaces:
img {
border: none;
}
Estilos
avanzados
-Sombra
(drop shadow)
La
mayoría de aplicaciones de diseño gráfico permiten añadir una sombra (llamada drop
shadow en inglés) a las imágenes. CSS no incluye propiedades que permitan
mostrar de forma sencilla sombras en los elementos.
No
obstante, existen varias técnicas sencillas y otras más avanzadas que permiten
crear sombras que se adapten a cualquier imagen o elemento. A continuación se
muestra una técnica sencilla para añadir sombra a las imágenes.
El
estilo final de las sombras creadas con esta técnica se muestra a continuación:
Consiste en la
utilización de un par de elementos <div> alrededor del elemento que va a
mostrar una sombra. La sombra se consigue mediante una imagen
muy grande que
contiene una sombra orientada hacia el lado derecho e inferior.
ventaja de este
método es que es sencillo y solamente requiere añadir un par de
<div> por
cada elemento. Además, como la sombra es una imagen muy grande, el efecto funciona
con elementos de cualquier tamaño. El mayor inconveniente de este método es que
la sombra siempre se muestra en la misma
dirección
(derecha inferior) y que en Internet Explorer 6 y versiones anteriores sólo muestran
la sombra correctamente cuando el color de fondo de la página es blanco (ya que
Internet Explorer 6 y versiones anteriores no soportan imágenes en formato PNG
contransparencias).
El código HTML y
CSS del ejemplo anterior es bastante sencillo:
.dropshadow
{
float:left;
clear:left;
background:
url(imagenes/shadowAlpha.png) no-repeat bottom right !important;
background:
url(imagenes/shadow.gif) no-repeat bottom right;
margin: 10px
0 10px 10px !important;
margin: 10px
0 10px 5px;
padding:
0px;
}
.innerbox {
position:relative;
bottom:6px;
right: 6px;
border: 1px
solid #999999;
padding:4px;
margin: 0px
0px 0px 0px;
}
<div
class="dropshadow">
<div
class="innerbox">
<img
src="imagenes/imagen.png" alt="Imagen genérica" />
</div>
</div>
<div
class="dropshadow">
<div
class="innerbox">
<h4>Párrafo de texto</h4>
<p>Esta técnica no sólo permite añadir sombra a las
imágenes, sino a cualquier
elemento.</p>
</div>
</div>
Ø Tablas
-Estilos básicos
Cuando se
aplican bordes a las celdas de una tabla, el aspecto por defecto con el que se muestra
en un navegador es el siguiente:
El código HTML y
CSS del ejemplo anterior se muestra a continuación:
.normal {
width:
250px;
border: 1px
solid #000;
}
.normal th,
.normal td {
border: 1px
solid #000;
}
<table
class="normal" summary="Tabla genérica">
<tr>
<th
scope="col">A</th>
<th
scope="col">B</th>
<th
scope="col">C</th>
<th
scope="col">D</th>
<th
scope="col">E</th>
</tr>
...
</table>
Normalmente, la
separación entre los bordes de las diferentes celdas no es deseable, ya que es
preferible mostrar las celdas sin separación. CSS define la propiedad borderspacing
para controlar la separación entre las celdas de una tabla.
Ø Enlaces
Estilos básicos
Tamaño, color y
decoración
Los estilos más
sencillos que se pueden aplicar a los enlaces son los que modifican su tamaño de
letra, su color y la decoración del texto del enlace. Utilizando las
propiedadesntext-decoration y font-weight se pueden conseguir estilos como los
que se muestran ennla siguiente imagen:
A continuación
se muestran las reglas CSS del ejemplo anterior:
a
{ margin: 1em 0; display: block;}
.alternativo
{color: #CC0000;}
.simple
{text-decoration: none;}
.importante
{font-weight: bold; font-size: 1.3em;}
.raro {text-decoration:overline;}
<a href="#">Enlace
con el estilo por defecto</a>
<a class="alternativo"
href="#">Enlace de color rojo</a>
<a class="simple"
href="#">Enlace sin subrayado</a>
<a class="importante"
href="#">Enlace muy importante</a>
<a class="raro"
href="#">Enlace con un estilo raro</a>
Pseudo-clases
CSS define
cuatro pseudo-clases que permiten aplicar estilos avanzados para los
enlacesbde los documentos. Las pseudo-clases permiten aplicar diferentes
estilos a un mismo enlace en función de su estado: enlace no visitado, enlace
visitado, enlace en el que se pasa el puntero del ratón por encima y enlace
activo en ese momento. Cada una de las pseudo-clases definidas se muestra a
continuación:
▪ :link, permite
aplicar estilos para los enlaces que aún no han sido pinchados.
▪ :visited,
aplica estilos a los enlaces que han sido pinchados anteriormente (el
navegador del
usuario elimina automáticamente el historial de enlaces visitados
cada cierto
tiempo).
▪ :hover,
estilos que muestra el enlace cuando el usuario posiciona el puntero del
ratón sobre el
enlace.
▪ :active,
estilos que se aplican al enlace cuando el usuario está pinchando sobre
el enlace (el
tiempo durante el que se aplica este estilo es muy breve).
El orden
recomendado para la definición de las pseudo-clases de los enlaces es :link, :visited,
:hover, :active. Las pseudo-clases :link y :visited solamente están definidas
para los enlaces, pero las pseudo-clases :hover y :active se definen para todos
los elementos HTML. Desafortunadamente, Internet Explorer 6 y sus versiones
anteriores solamente las soportan para los enlaces. Las pseudo-clases de los
enlaces permiten variar el comportamiento por defecto que los navegadores
aplican a los enlaces. El siguiente ejemplo oculta el subrayado a los enlaces cuando
el usuario pasa el ratón por encima de un enlace:
El código CSS necesario se
muestra a continuación:
a { }
a:hover
{ text-decoration: none; }
Ø Listas
Estilos
básicos
-Viñetas
personalizadas
Por
defecto, los navegadores muestran los elementos de las listas no ordenadas con
una viñeta formada por un pequeño círculo de color negro. Los elementos de las
listas ordenadas se muestran por defecto con la numeración decimal utilizada en
la mayoría de países. No obstante, CSS define varias propiedades para controlar
el tipo de viñeta que muestran las listas, además de poder controlar la
posición de la propia viñeta. La propiedad básica es la que controla el tipo de
viñeta que se muestra y que se denomina list-style-type.
Propiedad list-style-type
list-style-type:
Tipo de viñeta
Valores:
disc | circle | square | decimal |
decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin
|
upper-latin | armenian | georgian | lower-alpha |
upper-alpha | none |
inherit
Se
aplica a: Elementos de una lista
Valor
inicial: disc
Descripción:
Permite establecer el tipo de viñeta mostrada para una lista
En
primer lugar, el valor none permite mostrar una lista en la que sus elementos
no contienen viñetas, números o letras. Se trata de un valor muy utilizado, ya
que es imprescindible para los menús de navegación creados con listas, como se
verá más adelante. El resto de valores de la propiedad list-style-type se
dividen en tres tipos: gráficos,numéricos y alfabéticos.
▪
Los valores gráficos son disc, circle y square y muestran como viñeta un
círculo
relleno,
un círculo vacío y un cuadrado relleno respectivamente.
▪
Los valores numéricos están formados por decimal, decimal-leading-zero,
lowerroman,upper-roman, armenian y georgian.
▪
Por último, los valores alfanuméricos se controlan mediante lower-latin,
loweralpha,upper-latin, upper-alpha y lower-greek.
La siguiente imagen
muestra algunos de los valores definidos por la propiedad liststyle-type:
El código CSS de algunas de las
listas del ejemplo anterior se muestra a continuación:
<ul
style="list-style-type: square">
<li>list-style-type:
square</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<ol
style="list-style-type: lower-roman">
<li>list-style-type:
lower-roman</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
<ol
style="list-style-type: decimal-leading-zero; padding-left: 2em;">
<li>list-style-type:
decimal-leading-zero</li>
<li>Elemento</li>
<li>Elemento</li>
</ol>
Esto ha sido un pequeño aporte espero que les sea de
mucha ayuda , esto es una pequeña parte de hojas de estilo y aplicación, espero
pronto seguir añadiendo mas información… Dios les Bendiga!!!
No hay comentarios:
Publicar un comentario