Enlazando Hojas de Estilo Con HTML

Enlazando Hojas de estilo con
HTML
Hay muchas maneras de enlazar hojas de estilo a HTML,

cada una con sus ventajas y desventajas. Se han introducido
nuevos elementos y atributos HTML para permitir la fcil
incorporacin de hojas de estilo en documentos HTML.
Enlazndose a una hoja de estilo externa

Incrustando una hoja de estilo
Importacin de una hoja de estilo
Estilo en lnea
Atributo CLASS
Atributo ID
Elemento SPAN
Elemento DIV
Una nota acerca de validacin
Enlazndose a una hoja de estilo externa

Una hoja de estilo externa puede ser enlazada a un
documento HTML mediante el elemento LINK de HTML:
<LINK REL=StyleSheet HREF="estilo.css"
TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="color-8b.css"
TYPE="text/css" TITLE="estilo de color 8-bit"
MEDIA="screen, print">
<LINK REL="Alternate StyleSheet" HREF="color-
24b.css" TYPE="text/css" TITLE="estilo de color
24-bit" MEDIA="screen, print">
<LINK REL=StyleSheet HREF="aural.css"
TYPE="text/css" MEDIA=screen>
La etiqueta <LINK> se coloca en la cabecera HEAD del

documento. El atributo opcional TYPE se usa para
especificar un tipo de medio --text/css para una hoja de
estilo en cascada-- permitindole a los navegadores omitir
los tipos de hoja de estilo que no soportan. Tambin es una
buena idea configurar el servidor para
enviar text/css como Content-type para archivos CSS.
Las hoja de estilo externas no debran contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La
hoja de estilo solo debera consistir simplemente de reglas de estilo o sentencias. Un archivo que solo consista
de
P { margin: 2em }
podra usarse como una hoja de estilo externa.
La etiqueta <LINK> tambin toma un atributo

opcional MEDIA, que especifica el medio o medios en que
debera aplicarse la hoja de estilo. Los valores posibles son
screen (valor por defecto), para presentacin en pantallas de

computadoras no-paginadas;
print, para salida a una impresora;
projection, para presentaciones en proyectores;
aural, para sintetizadores de voz;
braille, para presentacin en dispositivos braille;
tty, para pantalla en celda de caracteres (usando una fuente
de inclinacin fija);
tv, para televisores;
all, para todos los dispositivos de salida.
Medios mltiples se especifican mediante una lista separada

por comas, o por el valor all.
Netscape Navigator 4.x ignora incorrectamente cualquier hoja de estilo
enlazada o incrustada declarada con valores MEDIA diferentes
de screen. Por ejemplo, MEDIA="screen, projection" provocar que
la hoja de estilo sea ignorada por Navigator 4.x, aun si el dispositivo de
presentacin es una pantalla de computadora. Navigator 4.x tambin
ignora hojas de estilo declaradas con MEDIA=all.
El atributo REL se usa para definir la relacin entre el

archivo enlazado y el documento
HTML. REL=StyleSheet especifica un
estilo persistente o preferido mientras que REL="Alternate
StyleSheet" define un estilo alterno. Un
estilo persistente es aquel que siempre se aplica si estn
activas las hojas de estilo. La ausencia del atributo TITLE,
como en la primera etiqueta <LINK> en el ejemplo, define
un estilo persistente.
Un estilo preferido es uno que se aplica automticamente,
como en la segunda etiqueta <LINK> en el ejemplo. La
combinacin de REL=StyleSheet y un
atributoTITLE especifica un estilo preferido. Los autores no
pueden especificar ms de un estilo preferido.
Un estilo alterno se indica por REL="Alternate

StyleSheet". La tercera etiqueta <LINK> en
el ejemplo define un estilo alterno, que el usuario podra
elegir para reemplazar la hoja de estilo preferido.
Note que los navegadores actuales generalmente carecen de la capacidad
de elegir estilos alternos.
Un estilo simple tambin puede ser dado mediante mltiples

hojas de estilo:
<LINK REL=StyleSheet HREF="basico.css"
TITLE="Contemporaneo">
<LINK REL=StyleSheet HREF="tablas.css"
<LINK REL=StyleSheet HREF="formas.css"
En este ejemplo, tres hojas de esilo son combinadas en un

estilo "Contemporaneo" que se aplica como una hoja de
estilo preferido. Para combinar mltiples hojas de estilo en
un estilo nico, se debe usar el mismo TITLE con cada hoja
de estilo.
Una hoja de estilo externa es ideal cuando el estilo se aplica

a muchas pginas. Con una hoja de estilo externo, un autor
podra cambiar la apariencia de un sitio completo mediante
el cambio de un solo archivo. Adems, la mayora de
navegadores guardan en cach las hojas de estilo externas,
evitando as una demora en la presentacin una vez que la
hoja de estilo se ha guardado en cach.
Microsoft Internet Explorer 3 para Windows 95/NT4 no soporta
imgenes o colores de fondo (background) en BODY desde hojas de
estilo enlazadas. Con este defecto, los autores podran querer tener otro
mecanismo para incluir una imagen o color de fondo,
como incrustando o usando el estilo en lnea, o usando el
atributo BACKGROUND del elemento BODY.
Incrustando una hoja de estilo
Una hoja de estilo puede incrustarse en un documento con el
elemento STYLE:
<STYLE TYPE="text/css" MEDIA=screen>

</STYLE>
La etiqueta <STYLE> se coloca en la cabecera HEAD del

documento. El atributo requerido TYPE se usa para
especificar un tipo de medio, as como su funcin con el
elemento LINK. En forma similar, los
atributos TITLE y MEDIA tambin pueden especificarse
con STYLE.
Los navegadores ms antiguos, que ignoran el

elemento STYLE normalmente mostraran su contenido
como si fuera parte de BODY, haciendo as visible la hoja
de estilo para el usuario. Para evitarlo, el contenido del
elemento STYLE est contenido dentro de un comentario
SGML (), como en el ejemplo
precedente.de arriba.
Debera usarse una hoja de estilo incrustada cuando un nico

documento tiene un nico estilo. Si la misma hoja de estilo
se usa en mltiples documentos, entonces sera ms
apropiada una hoja de estilo externa.
Importacin de una hoja de estilo

Una hoja de estilo puede ser importada con la
sentencia @import de CSS. Esta sentencia puede usarse en
un archivo CSS o dentro del elemento STYLE:
<STYLE TYPE="text/css" MEDIA="screen, projection">

</STYLE>
Note que otras reglas de CSS pueden an estar incluidas en

el elemento STYLE, pero todas las
sentencias @import deben ocurrir al inicio de la hoja de
estilo. Cualquier regla especificada en la misma hoja de
estilo prevalecer sobre reglas contradictorias en las hojas de
estilo importadas. Por ejemplo, inclusive si una de las hojas
de estilo importadas contuviera DT { background: aqua},
los trminos de definicin an tendran un fondo amarillo.
El orden en el que las hojas de estilo son importadas es

importante para determinar como trabajan en cascada. En el
ejemplo de arriba, si la hoja de estilo
importada estilo.css especifica que los
elementos STRONG se muestren en rojo y la hoja de
estilo punk.css especifica que los elementos STRONG se
muestren en amarillo, la ltima regla prevalecera, y los
elementos STRONG seran amarillos.
Las hojas de estilo importadas son tiles para fines de

modularidad. Por ejemplo, un sitio puede separar diferentes
hojas de estilo por los selectores usados. Puede haber una
hoja de estilo simple.css que d las reglas para elementos
comunes como BODY, P, H1y H2. Adems, puede haber
una hoja de estilo extra.css que de reglas para los elementos
menos comnes como CODE, BLOCKQUOTE y DFN. Una
hoja de estilo tablas.css puede usarse para definir reglas para
elementos tabla. Estas tres hojas de estilo podran ser
incluidas en documentos HTML con la sentencia @import.
Las tres hojas de estilo tambin podran
ser combinadas mediante el elemento LINK.
Estilo en lnea
Puede usarse estilos en lnea mediante el atributo STYLE.
El atributo STYLE puede ser aplicado a cualquier
elemento BODY (incluyendo el mismo BODY) excepto
para BASEFONT, PARAM y SCRIPT. El atributo toma
como su valor, cualquier nmero de declaraciones CSS,
donde cada declaracin est separada por un punto y coma.
Ejemplo:
<P STYLE="color: red; font-family: 'New Century
Schoolbook', serif">Este prrafo usa estilos en
rojo con la fuente New Century Schoolbook, si
est disponible.</P>
Note que New Century Schoolbook est en comillas

simples en el atributo STYLE, ya que las comillas dobles se
usan para contener las declaraciones de estilo.
El estilo en lnea es mucho ms inflexible que los otros

mtodos. Para suar estilo en lnea, se debe declarar un nico
lenguaje de hojas de estilo para el documento completo
usando la extensin de cabecera HTTP Content-Style-Type.
Con CSS en lnea, un autor debe enviar text/css como la
cabecera HTTP Content-Style-Type o incluir la siguiente
etiqueta en la cabecera HEAD:
<META HTTP-EQUIV="Content-Style-Type"
CONTENT="text/css">
Los estilos en lnea pierden muchas de las ventajas de las

hojas de estilo al mezclar contenido con presentacin. As
mismo, los estilos en lnea se aplican implcitamente a todos
los medios, ya que no hay un mecanismo para especificar el
medio deseado para un estilo en lnea. Este mtodo debera
usarse con moderacin, como cuando se aplica un estilo en
todos los medios para una sola ocurrencia de un elemento. Si
el estilo debe aplicarse a un nico elemento pero solo con
cierto medio, use el atributo ID en lugar del
atributo STYLE.
Atributo CLASS
El atributo CLASS se usa para especificar la clase de estilo a
la cual pertenece el elemento. Por ejemplo, la hoja de estilo
puede haber creado las clases punk y advertencia:
.punk { color: lime; background: #ff80c0 }
P.advertencia { font-weight: bolder; color: red;
background: white }
Se podra hacer referencia a estas clases en HTML con el

atributo CLASS:
<H1 CLASS=punk>Extensiones proprietarias</H1>
<P CLASS=advertencia>Muchas extensiones
proprietarias pueden tener efectos laterales
negativos, tanto en los navegadores que las
soportan como en los que no lo hacen...
En este ejemplo, la clase punk puede aplicarse a cualquier

elemento BODY ya que no tiene un elemento HTML
asociado con ella en la hoja de estilo. Al usar la hoja de
estilo del ejemplo, la clase advertencia solo puede aplicarse
al elemento P.
Una buena prctica es llamar a las clases de acuerdo a su funcin y no
por su apariencia. La clase advertencia de ejemplo anterior, podra
haberse llamado red (rojo), pero este nombre perdera significacin si el
autor decidiera cambiar el estilo de la clase aun color diferente, o si el
autor quisiera definir un estilo aural para quienes usan sintetizadores de
voz.
Las clases pueden ser un mtodo muy eficaz para aplicar

diferentes estilos a secciones estructuralmente idnticas de
un documento HTML. Por ejemplo, esta pgina usa clases
para dar un estilo diferente al cdigo CSS y al cdigo
HTML.
Atributo ID
El atributo ID se usa para definir un estilo nico para un
elemento. Una regla CSS como
#wdg97 { font-size: larger }
puede aplicarse en HTML mediante el atributo ID:

<P ID=wdg97>Bienvenido al Web Design Group!</P>
Cada atributo ID debe tener un valor nico a travs del

documento. El valor debe ser una letra inicial seguida por
letras, dgitos o guiones. Las letras solo pueden ser A-Z y a-
z.
Note que HTML 4.0 permite puntos en valores del atributo ID,
pero CSS1 no permite puntos en selectores ID. Note tambin que CSS1
permite los caracteres Unicode 161-255 as como los caracteres de
escape Unicode como cdigos numricos, pero HTML 4.0 no permite
estos caracteres en el valor de atributo ID.
El uso de ID es apropiado cuando una hoja de estilo solo

necesita ser aplicada una vez en algn
documento. ID contrasta con el atributo STYLE en que el
primero permite estilos especficos al medio y tambin
puede aplicarse a mltiples documentos (aunque slo uno en
cada documento).
Elemento SPAN
El elemento SPAN fue introducido en HTML para permitir a
los autores dar un estilo que no pudiera estar conectado a un
elemento estructural HTML. SPAN puede usarse como un
selector en una hoja de estilo, y tambin acepta los
atributos STYLE, CLASS e ID.
SPAN es un elemento en lnea, as que puede usarse

simplemente como un elemento, tal
como EM y STRONG en HTML. La gran diferencia es que
mientras EM y STRONG conllevan significado
estructural, SPAN no tiene tal significado. Existe solamente
para aplicar estilos, y por lo tanto, no tiene efecto cuando la
hoja de estilo est desactivada.
Algunos ejemplos de SPAN:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Ejemplo de SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">

</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=primeraspalabras>Las primeras
palabras</SPAN> de un
prrafo podran estar en small-caps. El estilo tambin
puede estar en lnea, como
para cambiar el estilo de una palabra como <SPAN
STYLE="font-family: Arial">
Arial</SPAN>.</P>
Elemento DIV
El elemento DIV es similar al elemento SPAN en funcin,
con la gran diferencia que DIV (abreviatura para "divisin")
es un elemento de nivel bloque. DIV puede contener
prrafos, encabezados, tablas, y aun otras divisiones. Esto
hace ideal a DIV para hacer diferentes clases de
contenedores, como captulo, resumen o nota. Por ejemplo:
<DIV CLASS=nota>
<H1>Divisiones</H1>
<P>El elemento DIV est definido en HTML 3.2,
pero solo el atributo ALIGN est permitido en
HTML 3.2. HTML 4.0 agrega los atributos CLASS,
STYLE e ID , entre otros.</P>
<P>Ya que DIV puede contener otros contenedores
de nivel bloque, es til para hacer grandes
secciones de un documento, como esta nota.</P>
<P>Requiere la etiqueta de cierre.</P>

Enlazando Hojas de Estilo Con HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Enlazando Hojas de Estilo Con HTML

Transféré par

Droits d'auteur :

Formats disponibles

Enlazando Hojas de estilo con

Hay muchas maneras de enlazar hojas de estilo a HTML,

Enlazndose a una hoja de estilo externa

Enlazndose a una hoja de estilo externa

La etiqueta <LINK> se coloca en la cabecera HEAD del

podra usarse como una hoja de estilo externa.

La etiqueta <LINK> tambin toma un atributo

screen (valor por defecto), para presentacin en pantallas de

Medios mltiples se especifican mediante una lista separada

El atributo REL se usa para definir la relacin entre el

Un estilo alterno se indica por REL="Alternate

Un estilo simple tambin puede ser dado mediante mltiples

En este ejemplo, tres hojas de esilo son combinadas en un

Una hoja de estilo externa es ideal cuando el estilo se aplica

La etiqueta <STYLE> se coloca en la cabecera HEAD del

Los navegadores ms antiguos, que ignoran el

Debera usarse una hoja de estilo incrustada cuando un nico

Importacin de una hoja de estilo

Note que otras reglas de CSS pueden an estar incluidas en

El orden en el que las hojas de estilo son importadas es

Las hojas de estilo importadas son tiles para fines de

Note que New Century Schoolbook est en comillas

El estilo en lnea es mucho ms inflexible que los otros

Los estilos en lnea pierden muchas de las ventajas de las

Se podra hacer referencia a estas clases en HTML con el

En este ejemplo, la clase punk puede aplicarse a cualquier

Las clases pueden ser un mtodo muy eficaz para aplicar

puede aplicarse en HTML mediante el atributo ID:

Cada atributo ID debe tener un valor nico a travs del

El uso de ID es apropiado cuando una hoja de estilo solo

SPAN es un elemento en lnea, as que puede usarse

Algunos ejemplos de SPAN:

Vous aimerez peut-être aussi