You are on page 1of 30

Lo básico

A medida que se ha ido generalizando el uso de las Hojas de Estilo en


Cascada he observado en demasiadas ocasiones un fenómeno sintomático
de la premura con la que, a veces, se acometen los proyectos: su nula
optimización y su escaso aprovechamiento. Y, escarbando en el problema,
he llegado a la conclusión (quizás cierta, quizás errónea) de que la causa
reside en la desatención hacia los conceptos iniciales, tales como regla,
declaración, propiedad, cascada, herencia, agrupamiento o especificidad. La
consecuencia es fácil de observar: hojas excesivamente largas, redundantes,
sin selectores simples, con exceso de clases y, lo que es peor, muy poco
eficaces.
La observancia de media docena de puntos puede marcar una diferencia
abismal, tanto por el ahorro drástico de trabajo como por la mejora de los
resultados. Además de ese objetivo principal, este taller ofrece un avance de
ciertas características del tercer nivel de CSS (especificadas oportunamente).
Y antes de entrar en materia, hay que advertir que, debido a la estrecha
relación entre los diferentes elementos del lenguaje, es inevitable que para
definir o desarrollar un concepto se haga referencia a otro que todavía no ha
sido tratado.

Reglas

Una hoja de estilos es, en esencia, un conjunto de estamentos o reglas. Hay


dos tipos: las reglas arroba y los juegos de reglas. Aparcaremos las primeras
por un momento (irán apareciendo paulatinamente en escena) para que
nadie se asuste antes de tiempo. Los juegos de reglas o simplemente reglas
son las estructuras más corrientes. Constan de un selector y un conjunto de
declaraciones. Los selectores constituyen el nexo de comunicación entre la
hoja de estilo y el documento HTML o XML, al especificar o delimitar un
conjunto de elementos (o de porciones de elementos) al cual aplicar el estilo.
Por su parte, una declaración consta de una propiedad y su correspondiente
valor, separados por dos puntos (:). Si hay varias declaraciones se separan
mediante punto y coma (;). El conjunto de declaraciones debe estar
encerrado entre carácteres de llave ({) y (}), en lo que llamaremos bloque.
Por tanto, podemos decir que una regla es un selector seguido de un bloque
de declaraciones. Un ejemplo sencillo:
h1 { text-align:center; color:#00A; }
El anterior fragmento está formado por una única regla, que consta a su vez
del selector h1 y de un bloque constituido por dos declaraciones, que
responden a las propiedades text-align y color, respectivamente. Su
funcionamiento es, igualmente, muy simple: los estilos que resultan de las
dos declaraciones serán aplicados a los elementos indicados por el selector,
en este caso a los h1.

Medios
La variedad de medios a través de los cuales puede transmitirse la
información de una página web hace necesaria una especificación sensible a
esa variedad. Por el momento, los tipos de medio reconocidos son:

• screen: monitores de ordenador.


• tv: pantallas de televisión (menos resolución, menos posibilidades de desplazamiento y
menor interactividad que los monitores de ordenador).
• handheld: dispositivos manuales, como teléfonos, ordenadores de bolsillo, etc..
• projection: presentaciones proyectadas mediante el uso de transparencias o dispositivos
especiales.
• tty: dispositivos de consola o impresoras que utilizan una rejilla de carácteres de espacio
fijo.
• print: impresoras de uso general.
• embossed: impresoras especiales con sistema braille.
• braille: dispositivos táctiles en sistema braille.
• aural: lectores o sintetizadores de voz.
• all: indicado para aquellas propiedades que encajen en todos los dispositivos (si es que
eso es posible). Omitir el tipo de medio provoca el mismo resultado.

El tipo o tipos de medio al que va dirigida una hoja de estilo puede


especificarse en el atributo media en los elementos link o style (separados
por comas en el caso de ser más de uno):
<link rel="StyleSheet" type="text/css" media="screen" href="pantalla.css" />
<style type="text/css" media="screen,print">
También podemos referirnos a diferentes tipos de medio dentro de un mismo
archivo (o elemento style) haciendo uso de la regla arroba @media:
@media screen, print {
h2 { margin-top:2em; }
}
@media print {
h2 { page-break-after:avoid; }
}
@media aural {
h2 { pause:200ms 50ms; }
}
Aunque esta última modalidad puede parecer más cómoda, separar las hojas
de los distintos medios en archivos diferentes tiene sus ventajas. Por
ejemplo, la aplicación sólo descargará la información de estilo que realmente
utilice.
Naturalmente no es obligatorio realizar hojas de estilo para todos los medios.
Hay que tener en cuenta que las aplicaciones ya tienen su hoja de estilo
predeterminada y el usuario quizás aporte también la suya. Por tanto la falta
de hojas de estilo para tal o cual medio no entraña problemas de
accesibilidad. Lo que, sin ser obligatorio, sí es recomendable, es especificar
siempre el tipo de medio. De lo contrario se pueden producir presentaciones
no deseadas en situaciones no tenidas en cuenta. Sin ir más lejos, la típica
vorágine de colores y demás efectos visuales para el monitor de un
ordenador puede ser un desastre en una impresora.
Cascada

La Cascada es un modelo mediante el cual es posible la convivencia de


varias hojas de estilo en el mismo documento, las cuales pueden tener tres
orígenes diferentes (y sólo uno de ellos es competencia/privilegio del
diseñador):

• El autor incluye la información de estilo vinculando archivos a cada documento o, en el


caso de documentos HTML, también insertándola dentro del mismo.
• El usuario puede aportar su hoja de estilos, para lo cual la aplicación puede ponérselo
más o menos difícil. También es posible que esta última cuente con mecanismos
alternativos. Esto no se debe confundir con los procesos de elección de hojas de estilo
que facilitan algunas páginas web, porque aunque sea el usuario el que elige, el origen
sigue siendo el autor.
• La aplicación (comúnmente el navegador) utiliza una hoja de estilos predeterminada,
encargada, por ejemplo, de teñir de azul los enlaces no visitados o de inclinar las letras de
los elementos em. En ciertos casos esa hoja de estilo no existe realmente (son
simplemente unos valores predeterminados), pero el comportamiento es el mismo.

Para el autor no existe límite en cuanto al número de archivos (y, en el caso


de documentos HTML, elementos o atributos style) que puede utilizar en un
mismo documento, lo cual le ofrece muchas posibilidades para sistematizar y
ahorrar código. Además, es posible vincular un documento a más hojas de
estilo sin modificarlo siquiera, por medio de la regla arroba @import. En el
ejemplo siguiente, puesto al principio de una hoja de estilo (la única posición
legal de una regla de este tipo es al principio, o bien detrás de otra regla
@import) se procesa el contenido del archivo importar.css. A efectos prácticos,
es como sustituir la regla @import por las reglas que contenga dicho archivo:
@import "importar.css";
Adicionalmente puede especificarse el tipo de medio para cada archivo, lo
cual permite evitar las descargas innecesarias:
@import "visual.css" screen,projection,tv;
@import "impreso.css" print;
Cuando varias reglas afectan a la misma propiedad del mismo elemento en
el mismo medio (de otro modo no existe ningún conflicto), el "dilema" se
soluciona aplicando unas normas de cascada, que se rigen por el siguiente
orden estricto:

1. Origen: La información de la hoja de estilo de la aplicación es sustituida por la del


usuario, y esta a su vez por la del autor.
2. Especificidad: Si el origen es el mismo, las reglas más específicas sustituyen a las más
generales. Esto se explicará con más detalle en el apartado Especificidad.
3. Aparición: Si no se ha podido dirimir el conflicto mediante los dos criterios anteriores, la
última regla en ser especificada es la que cuenta.
El lector avispado habrá podido observar que el primero de los criterios deja
al usuario indefenso ante los delirios de cualquier autor. Para evitarlo, se
puede aumentar el peso de una declaración agregando al final de ésta el
calificativo !important. La regla siguiente, colocada en la hoja de estilo del
usuario, obliga a la aplicación a subrayar los enlaces, aunque el autor
especifique que no debe ser así:
a { text-decoration:underline !important; }
En el primer nivel de CSS una declaración de autor marcada como
importante primaba sobre una declaración de usuario marcada como
importante. Esto fue corregido en el nivel 2, de manera que en la actualidad
el orden de importancia de las declaraciones, según su origen, es (de menor
a mayor):

1. Declaración en hoja de estilo de aplicación.


2. Declaración convencional en hoja de estilo de usuario.
3. Declaración convencional en hoja de estilo de autor.
4. Declaración importante en hoja de estilo de autor.
5. Declaración importante en hoja de estilo de usuario.

Herencia

Algunas propiedades pueden heredarse automáticamente del elemento


padre. Esto quiere decir, entre otras cosas, que una declaración puede
afectar, no sólo a los elementos que resulten del selector correspondiente,
sino también a sus descendientes. La especificación define, para cada
propiedad, si se hereda o no. En algunas ocasiones será fácil deducir la
herencia sin mirar la especificación, por ejemplo las propiedades
relacionadas con el formato visual (posición, bordes, tamaño, fondo, margen,
etc.), no se heredan (de lo contrario sería un caos). Pero lo mejor es
asegurarse. Puede prevenir muchos quebraderos de cabeza, y también
puede ahorrarnos muchas declaraciones redundantes.
Incluso para todas aquellas propiedades que no la especifican, es posible
forzar la herencia utilizando el valor inherit. El ejemplo siguiente asignaría al
elemento identificado como Cuadro la misma altura que se ha computado
para su elemento padre (si es que eso tiene sentido en ese contexto):
#Cuadro { height:inherit; }

Cómputo

Durante el proceso de representación por parte de la aplicación, los valores


de la hoja de estilo sufren una "metamorfosis" en la que entra en juego un
posible cálculo por parte de la aplicación (si el valor especificado lo requiere)
y sus propias limitaciones y carácterísticas. La regla del ejemplo siguiente se
aplica, en un medio de pantalla, a un elemento identificado como Caja cuyo
bloque de contención tiene 612 píxeles de ancho:
#Caja { width:85%; }
Valor especificado Valor computado Valor real
El ancho del bloque de contención es de 612px: 612*85/100=520,2.
La aplicación no puede representar fracciones de píxel, de manera que redondea el valor.
85% 520.2px 520px
La aplicación puede verse obligada a repetir el cálculo de valores en
determinadas circunstancias, por ejemplo cuando el usuario cambia el
tamaño del lienzo. Por otro lado, para ciertas propiedades o tipos de valor,
este esquema de transformación no tiene sentido.
Lo valores computados tienen una importancia fundamental en la herencia,
dado que son los que realmente se pasan de un elemento a otro. Obsérvese
el siguiente ejemplo.
p { font-size:0.8em; }
A partir de la regla anterior, la aplicación calculará un tamaño para la fuente
de los párrafos. Como esa propiedad se hereda, pasará a sus hijos
(elementos a, em, strong, etc.). Pero el valor heredado por dichos elementos
será el que se haya computado para el párrafo (por ejemplo 12.8px), no el
especificado (0.8em). Pensándolo un poco, lo contrario provocaría efectos
muy poco deseables.
Como complemento a este apartado y a los dos anteriores, hay una página
de ejemplos de asignación de valores, cascada y herencia.

Selectores

Afortunadamente contamos con diferentes modalidades de selector, que por


supuesto aumentan notablemente las posibilidades de ejemplos anteriores.
Son las siguientes:
Universal
El selector universal es el carácter de asterisco (*), y, como su propio nombre indica,
selecciona todos los elementos del documento. El asterisco puede omitirse si va seguido
de un selector de identificador, de atributo (incluyendo clases) o de pseudo-clase.
De tipo (Por ejemplo: p )
Simplemente marcan una equivalencia entre tipos de elemento y el estilo a aplicar. La
regla del ejemplo afectará a todos los elementos p. A pesar de su sencillez, este tipo de
selector ya posee una potencia importante, y debería ser el principal recurso en explotar
cuando se trata de establecer la "línea" de un sitio entero, porque es independiente de las
particularidades de cada documento.
De descendencia (Por ejemplo: table strong )
Seleccionan elementos que son descendientes (hijos, nietos, etc.) de otro elemento dado.
Dicho en otras palabras, tomando el documento como un conjunto de "cajas", elementos
que se encuentran dentro de otro, directamente o no. En el ejemplo dado, el estilo se
aplica a cualquier elemento strong que podamos encontrar dentro de una tabla. Por
lógica cualquiera de ellos será también descendiente, como mínimo, de un elemento td o
th, y también de un elemento tr, pero eso es indiferente.
De hijos (Por ejemplo: ol>li )
Similar al anterior tipo, pero en este caso la selección queda restringida a descendientes
inmediatos. La regla del ejemplo afectaría a los elementos li de cualquier lista ordenada,
pero no a los de una lista desordenada aunque estuviese anidada a su vez en una lista
ordenada.
De adyacentes directos (Por ejemplo: h5+p )
Permiten referirse a elementos hermanos consecutivos, lo cual puede ser útil para crear
estilos en función de los elementos vecinos. En el ejemplo se utiliza un selector de este
tipo para establecer el estilo de los párrafos que aparezcan inmediatamente después de un
encabezado de nivel 5.
De adyacentes indirectos (CSS3) (Por ejemplo: th~td )
Análogo al selector de adyacentes directos pero omitiendo la condición de ser
consecutivo. El ejemplo establece un estilo para todas aquellas celdas td que fluyan a
continuación de una celda th compartiendo el mismo elemento padre, o sea, las celdas
normales cuya fila comience con una celda de encabezado (teniendo en cuenta la
idiosincrasia de los elementos en una tabla).
De atributos
Una posibilidad interesante es seleccionar elementos en función de sus atributos, bien con
independencia del valor de dicho atributo (simplemente por tener asignado ese atributo),
o bien siguiendo diferentes criterios de equivalencia:

• Independientes del valor (Por ejemplo: span[onclick] ).


• De coincidencia íntegra (Por ejemplo: input[type="text"] ).
• De coincidencia parcial (CSS3) (Por ejemplo: img[title*="mapa"] ).
• De comienzo de cadena (CSS3) (Por ejemplo: del[datetime^="199"] ).
• De final de cadena (CSS3) (Por ejemplo: a[href$=".zip"] ).
• De valor individual (Por ejemplo: p[class~="Clase"] ).
• De valor inicial (Por ejemplo: td[lang|="en"] ).

Los dos últimos patrones responden a tipos de atributo que admiten varios valores
separados por espacios o por guiones respectivamente. La regla del ejemplo de valor
individual respondería a párrafos con atributos class como "Primera Clase",
"Clase","Clase Rara", etc. (como veremos a continuación hay otra forma más sencilla de
trabajar con clases). El selector de atributo de valor inicial está especialmente pensado
para seleccionar elementos en función de su lenguaje, pero independientemente del
subcódigo de lenguaje. En el ejemplo, se correspondería con celdas cuyo atributo lang
fuese "en", pero también "en-US", etc..
De identificador (Por ejemplo: #Identificador )
Sirven, como es lógico, para establecer el estilo de un elemento identificado en el código
HTML o XML mediante el atributo id. Recordemos que dicho valor debe ser único en
cada documento.
Tal y como hemos destacado antes, existe una forma más simple de usar
selectores de clase, pero sólo trabajando con documentos HTML. Se trata del
modelo presente el primer nivel de CSS, que consiste en poner un punto
entre el selector de tipo y el nombre de la clase. Como los elementos que
comparten clase en un documento no han de ser forzosamente del mismo
tipo, podemos referirnos a cualquier elemento de una clase (utilizando el
selector universal (*) o, directamente, omitiéndolo) o especificar además un
tipo de elemento. En el ejemplo siguiente asignamos las propiedades font-
size y background para cualquier elemento de la clase seleccionada, la
propiedad text-align sólo para los párrafos de esa clase, y la propiedad
border sólo para las listas ul de esa clase.
.Especial { font-size:1.5em; background:yellow; }
p.Especial { text-align:center; }
ul.Especial { border:2px solid black; }
En HTML, el atributo class puede contener un lista de valores separados por
espacios. Por tanto es posible que, en algún momento, queramos seleccionar
dos o más clases a la vez en una regla:
.Especial.Crucial { font-weight:bolder; }
Cuando diferentes selectores tienen declaraciones iguales podemos
agruparlos en una única regla separando los selectores por comas. El
resultado de los dos cuadros siguientes es el mismo:
ul { text-align:justify; font:0.8em Helvetica,sans-serif; }
ol { text-align:justify; font:0.8em Helvetica,sans-serif; }
dl { text-align:justify; font:0.8em Helvetica,sans-serif; }
ul, ol, dl { text-align:justify; font:0.8em Helvetica,sans-serif; }
Lógicamente, todo el "arsenal" recopilado hasta el momento puede
combinarse. La regla siguiente selecciona por un lado los elementos em
descendientes de cualquier elemento cuya clase sea "Destacar", el cual a su
vez desciende del elemento cuyo identificador es "Principal", y por otro
cualquier elemento de lista que sea descendiente de otro elemento de lista.
#Principal .Destacar em, li li { color:blue; }
Llegados a este punto, y vista la potencia que albergan los diferentes
selectores, conviene plantearse un método de trabajo que no dependa más
de lo necesario de clases e identificadores. Se trata de que el documento
HTML sea independiente de la presentación, y un exceso de clases, por
ejemplo, provoca una dependencia de la propia hoja de estilos, además de
poder afectar a la propia estructura de contenidos. Sin desmerecer lo dicho,
pero antes de crearse inciertas expectativas, hay que señalar que, por
obscuras razones, el popular navegador Internet Explorer sólo reconoce los
selectores del primer nivel de CSS: de tipo, de descendencia, de identificador
y la forma tradicional de selector de clase. No obstante, y respecto a lo visto
en este apartado, podemos clarificar conceptos o simplemente testear el
navegador de turno en el documento ejemplos de selectores.

Pseudo-clases y pseudo-elementos

Las pseudo-clases (nada que ver con el atributo class) y los pseudo-
elementos son abstracciones que amplían las posibilidades de selección de
este lenguaje. Su utilización hace posibles ciertos efectos y funciones que,
de otro modo, precisarían de un exceso de "etiquetado" en el código HTML o
bien de trasnochadas líneas de script en el lado del cliente.
A excepción de las pseudo-clases estructurales y, quizás, la de lenguaje,
estamos hablando de seleccionar elementos a partir de datos o situaciones
que no se pueden deducir directamente de la jerarquía del documento. La
sintaxis es similar, y consiste en agregar el identificativo de la pseudo-clase
o del pseudo-elemento, que comienza siempre con el carácter ":" (dos
carácteres ":" seguidos obligatoriamente para los pseudo-elementos a partir
del nivel 3, de próxima aprobación) al selector correspondiente.
Hasta aquí lo que tienen en común. Las diferencias entre ambos conceptos
son:

• Las pseudo-clases restringen el conjunto de elementos que responde al selector de


acuerdo a un patrón o carácterística. En cierto modo podrían definirse como filtros.
• Los pseudo-elementos seleccionan una porción de todos y cada uno de los elementos
que responden al selector (además sólo pueden aparecer después del sujeto de éste).

Tomemos como ejemplo la siguiente regla (la cual es un "best-seller" aun


entre los que no han oído hablar de una pseudo-clase):
a:hover { text-decoration:none; }
Lo que dicta es que se elimine cualquier decoración (el subrayado, por
ejemplo) de los vínculos cuando se pase el puntero por ellos. Sin embargo,
algo que se suele pasar por alto es que la regla anterior no distingue entre
enlaces origen y enlaces destino (sin atributo href). Para referirse sólo a los
primeros podría valer cualquiera de las dos reglas siguientes:
a[href]:hover { text-decoration:none; }
a:link:hover, a:visited:hover { text-decoration:none; }
Y la segunda de las anteriores nos sirve para comprobar que dos o más
pseudo-clases pueden convivir en el mismo selector. Incluso puede haber
además un pseudo-elemento (pero sólo al final). La siguiente regla afecta al
tamaño de la primera letra de todas las celdas que sean la primera de su
ascendente (o sea, de su fila) y cuyo lenguaje humano hay sido especificado
como español:
td:lang(es):first-child:first-letter { font-size:2.5em; }
La mayoría de las pseudo-clases, como se puede ver a continuación,
pertenecen al nivel 3 de CSS, en concreto al módulo Selectors, que ya ha
superado la etapa de borrador y es candidato a recomendación en el
momento de escribir esto. Por eso algunos modelos de navegador van
implementando algunas de ellas.
Pseudo-clases de vínculo
Aplicables a elementos que actúen como origen de enlace. Las aplicaciones suelen
diferenciar si los destinos han sido visitados con anterioridad. Mediante la
implementación de las dos pseudo-clases siguientes podemos seleccionar los enlaces de
acuerdo a dichos estados:

• :link, enlaces no visitados.


• :visited, enlaces visitados.

Estas dos pseudo-clases son mutuamente excluyentes, esto es, un elemento no puede
responder a ambas a la vez.
Pseudo-clases dinámicas
Relacionadas con cambios en los elementos provocados por ciertas acciones del usuario:
• :hover, el elemento es señalado con un dispositivo apuntador (por ejemplo, pasar
el cursor por encima).
• :active, el elemento es activado (por ejemplo mientras se hace clic con el ratón).
• :focus, el elemento tiene el "foco".

Pseudo-clase de destino :target(CSS3)


Si la URL contiene un ancla o enlace interno (carácter "#" seguido del identificador de
fragmento), esta pseudo-clase selecciona, si es que existe, el elemento que actúa como
destino.
Pseudo-clase de lenguaje :lang( )
Selecciona elementos en función del lenguaje usado, especificado entre los paréntesis
mediante el código de lenguaje correspondiente. Ese lenguaje se habrá podido establecer
en el documento a través de atributos lang o xml:lang, mediante elementos meta, o
incluso a través de encabezados HTML.
Pseudo-clases de estado
Enfocadas fundamentalmente a controles interactivos, como los elementos de un
formulario.

• :enabled (CSS3), el elemento está disponible, puede usarse.


• :disabled (CSS3), el elemento no está disponible (excluyente con la anterior).
• :checked (CSS3), el elemento (input de tipo radio o checkbox) está marcado.
• :indeterminate (CSS3), el elemento (input de tipo radio o checkbox) está en
estado mixto o indeterminado (éste no puede ser provocado por el usuario, pero sí
por la aplicación).

Pseudo-clases estructurales
Permiten seleccionar elementos a partir de carácterísticas que, aunque residen en el árbol
del documento, no permiten su representación mediante ninguna combinación de
selectores. Algunas de estas pseudo-clases necesitan un conjunto especial de argumentos,
representado por an+b, que se refiere al "b-ésimo" elemento de cada grupo de "a"
elementos hermanos (con el mismo ascendente). La palabra clave odd ("impar" en inglés)
puede ponerse en lugar de 2n+1, y lo mismo con even (par) para 2n. Omitir el valor "a"
significa que no se establecen grupos de elementos.

• :root (CSS3), el elemento raíz, aquel que engloba a todos los demás (por ejemplo
el elemento html de los documentos HTML.
• :nth-child( an+b ) (CSS3), elementos que ocupan el lugar especificado por el
argumento, de entre los elementos que compartan su mismo ascendente.
• :nth-last-child( an+b ) (CSS3), elementos que ocupan el lugar especificado por el
argumento, de entre los elementos que compartan su mismo ascendente, pero
contando en sentido inverso, empezando por el último elemento.
• :nth-of-type( an+b ) (CSS3), elementos que ocupan el lugar especificado por el
argumento, de entre los elementos que comparten su mismo ascendente y sean del
mismo tipo.
• :nth-last-of-type( an+b ) (CSS3), elementos que ocupan el lugar especificado por
el argumento, de entre los elementos que compartan su mismo ascendente y sean
del mismo tipo, pero contando en sentido inverso, empezando por el último
elemento.
• :first-child, elementos que ocupan el primer lugar de entre todos los elementos
que compartan su mismo ascendente; es equivalente a :nth-child(1).
• :last-child (CSS3), elementos que ocupan el último lugar de entre los elementos
que compartan su mismo ascendente; es equivalente a :nth-last-child(1).
• :first-of-type (CSS3), elementos que ocupan el primer lugar de entre los elementos
que compartan su mismo ascendente y sean del mismo tipo; es equivalente a :nth-
of-type(1).
• :last-of-type (CSS3), elementos que ocupan el último lugar de entre los elementos
que compartan su mismo ascendente y sean del mismo tipo; es equivalente a :nth-
last-of-type(1).
• :only-child (CSS3), elementos que son descendientes únicos.
• :only-of-type (CSS3), elementos que son los únicos de su tipo de entre los
elementos que comparten su mismo ascendente.
• :empty (CSS3), elementos que no tienen descendientes.

Pseudo-clase de contenido :contains( ) (CSS3)


Selecciona elementos que contengan el texto especificado entre los paréntesis.
Pseudo-clase de negación :not( ) (CSS3)
Selecciona elementos que NO están representados por el selector que se incluya entre los
paréntesis.
Pseudo-elementos

• :first-line, la primera línea del elemento.


• :first-letter, la primera letra del elemento.
• :before y :after, utilizados para insertar contenido
antes o después del contenido
real del elemento.
• ::selection (CSS3), la parte del elemento que ha sido seleccionada por el usuario.

Las posibilidades que se abren con el uso de pseudo-clases y pseudo-


elementos son enormes. Pero, lamentablemente, no parece probable que se
dé soporte al tercer nivel en el navegador Internet Explorer a corto plazo.
Aun así, siempre es interesante ver algunos ejemplos de pseudo-clases y
pseudo-elementos.

Especificidad

Teniendo en cuenta que cuando alguien desarrolla hojas de estilo el origen es


inmutable, lo más importante en cuanto al orden de cascada que puede
controlarse es la especificidad. He preferido dejar este apartado para el final,
pese a su evidente relación con el tema Cascada, porque también requiere
conocer los diferentes tipos de selector. Retomemos por tanto el "dilema"
que nos ocupaba en dicho apartado. Para saber qué selector es el más
específico, el nivel 2 de CSS establece los siguientes criterios:
1. La regla más específica es la que más selectores simples de identificador tiene.
2. Si el criterio 1 ha arrojado un empate, se suman para cada regla el número de selectores
de atributo (incluidos los de clase) y el número de pseudo-clases. La regla que arroje la
suma más alta gana.
3. Si de los dos criterios anteriores no ha salido una regla vencedora, el último criterio
indica que la regla que incluya más selectores simples de tipo sea la más específica.

No debe confundirse un selector compuesto con un agrupamiento de


selectores. A efectos de cálculo de especificidad, cada componente de dicho
agrupamiento pertenece a reglas diferentes y es totalmente independiente.
Las pseudo-clases de negación no deben tenerse en cuenta, contando en
ese caso los selectores pasados como argumento.
Dos detalles importantes a tener en cuenta. Como puede observarse, los
pseudo-elementos no tienen, en este nivel, influencia en la especificidad. Por
otra parte, la información de estilo que puede indicarse en los atributos style
de HTML es una regla sin selector, pero se considera que poseen un selector
de identificador (aunque el elemento en sí no posea atributo id.
En la primera revisión de esta especificación (CSS 2.1), en proceso de
borrador en estos momentos, la regla de un atributo style tiene más
especificidad que cualquier otra, y los pseudo-elementos cuentan tanto
como los selectores simples de tipo en el criterio 3.
Propiedades de fuentes
• Font Family (Familia de fuente)
• Font Style (Estilo de fuente)
• Font Variant (Variante de fuente )
• Font Weight (Peso de fuente)
• Font Size (Tamaño de fuente)
• Font (Fuente)

Font Family (Familia de fuente)


Sintaxis: font-family: [[<nombre de familia> | <familia genérica>],]* [<nombre de
familia> | <familia genérica>]
Valores <nombre-de-familia>
posibles:
• Cualquier nombre de familia de fuente puede usarse

<familia-genérica>

• serif (por ej., Times)


• sans-serif (por ej., Arial o Helvetica)
• cursive (por ej., Zapf-Chancery)
• fantasy (por ej., Western)

• monospace (por ej., Courier)


Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si
Las familias de fuentes pueden asignarse por un nombre de fuente
específica o por una familia de fuentes genérica. Obviamente, si define una
fuente específica, no será tan probable de encontrar como una familia de
fuente genérica. Puede hacer múltiples asignaciones de familias, y si hace
una asignación de fuente específica, debería ser seguida por un nombre de
familia genérica en el caso de que la primera selección no se halle presente.
Una muestra de declaración de font-family podría ser así:
P { font-family: "New Century Schoolbook", Times, serif }
Note que las dos primeras asignaciones son fuentes de tipo específico: New 
Century Schoolbook y Times. Sin embargo, ya que ambas son fuentes serif, la
familia genérica está listada como un respaldo en el caso de que el sistema
no tenga ninguna de las dos, sino otra fuente serif que cumpla los requisitos.
Cualquier nombre de fuente que contenga un espacio en blanco deberá ser
entrecomillada, con comillas simples o dobles.
La familia de fuente también puede darse con la propiedad font.

Font Style (Estilo de fuente)


Sintaxis: font-style: <valor>
Valores posibles: normal | italic | oblique
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si
La propiedad font-style define que la fuente se muestre en una de tres
formas: normal, itálica u oblicua (inclinada). Una hoja de estilo de muestra
con declaraciones font-style podría ser así:
H1 { font-style: oblique }
P { font-style: normal }

Font Variant (Variante de fuente )


Sintaxis: font-variant: <valor>
Valores posibles: normal | SMALL-CAPS
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si
La propiedad font-variant determina si la fuente se muestra en mayúsculas
tipo normal o pequeñas SMALL-CAPS. Las small-caps se muestran cuando
todas las letras de la palabra están en mayúsculas, con caracteres
ligeramente más grandes que las minúsculas. Posteriores versiones de CSS
pueden soportar variantes adicionales como condensada, expandida,
números en small-caps u otras variantes personalizadas. Un ejemplo de una
asignación font-variant sería:
SPAN { font-variant: small-caps }

Font Weight (Peso de fuente)


Sintaxis: font-weight: <valor>
Valores posibles: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 |
900
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si
La propiedad font-weight se usa para especificar el peso de la fuente. Los
valores bolder y lighter son relativos al peso de la fuente heredada,
mientras que los otros valores son pesos de fuente absolutos.
Nota: Ya que no todas las fuentes tienen nueve posibles pesos de
visualización, algunos de los pesos pueden agruparse en la asignación. Si el
peso especificado no está disponible, se elegirá una alternativa sobre la base
siguiente:

• 500 puede ser cambiado con 400, y viceversa


• 100-300 puede ser asignado al siguiente peso más ligero, si existe, o en caso contrario, al
siguiente más oscuro
• 600-900 puede ser asignado al siguiente peso más oscuro, si existe, o en caso contrario, al
siguiente más claro

Algunos ejemplos de asignación de peso de fuente serían:


H1 { font-weight: 800 }
P { font-weight: normal }

Font Size (Tamaño de fuente)


Sintaxis: font-size: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>
Valores • <tamaño-absoluto>
posibles:
o xx-small | x-small | small | medium | large | x-large |
xx-large
• <tamaño-relativo>
o larger | smaller
• <longitud>
• <porcentaje> (en relación al elemento padre)

Valor inicial: medium


Se aplica a: Todos los elementos
Heredado: Si
La propiedad font-size se usa para modificar el tamaño de la fuente
mostrada. Las longitudes absolutas (usando unidades como pt y in)
deberían usarse racionalmente debido a su poca capacidad de adaptarse a
diferentes ambientes de navegación. Las fuentes con longitudes absolutas
pueden ser fácilmente muy pequeñas o grandes para un usuario.
Algunos ejemplos de asignación de tamaño serían:
H1 { font-size: large }
P { font-size: 12pt }
LI { font-size: 90% }
STRONG { font-size: larger }
Los autores deben estar concientes de que Microsoft Internet Explorer 3.x
aplica incorrectamente las unidades em y ex como pixels, lo que puede
hacer el texto ilegible. El navegador también aplica incorrectamente valores
de porcentaje relativos al tamaño de fuente por defecto para el selector, en
vez de en relación al tamaño de fuente del elemento padre. Esto hace que
reglas como:
H1 { font-size: 200% }
sean peligrosas, por que el tamaño será dos veces el tamaño de la fuente
por defecto de IE para encabezados de nivel-uno, en lugar de dos veces el
tamaño de fuente del elemento padre. En este caso, BODY sería muy
probablemente el elemento padre, y definiría posoblemente un tamaño de
fuente medium, mientras que el tamaño de fuente para el encabezado de
nivel uno aplicado por IE probablemente sería considerado xx-large.
Considerando estos defectos, los autores deberían tener cuidado al usar
valores de porcentaje para for font-size, y probablemente deberían evitar
unidades em y ex para esta propiedad.

Font (Fuente)
Sintaxis: font: <valor>
Valores [<font-style> || <font-variant> || <font-weight>]? <font-size> [ / <line-
posibles: height> ]? <font-family>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: Si
La propiedad font puede usarse como una forma rápida para las diferentes
propiedades de fuentes, así como para line height. Por ejemplo,
P { font: italic bold 12pt/14pt Times, serif }
especifica párrafos con negrita (bold) e itálica (italic), fuente Times o serif
con un tamaño de 12 puntos y una altura de línea de 14 puntos.
Propiedades background y color
• Color
• Background Color (Color de fondo)
• Background Image (Imagen de fondo)
• Background Repeat (Repetir fondo)
• Background Attachment (Fijación de fondo)
• Background Position (Posición del fondo)
• Background (Fondo)

Color
Sintaxis: color: <color>
Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si
La propiedad color permite especificar el color de un elemento. Vea la
sección Unidades para descripciones del valor de colores, Algunos ejemplos
de reglas de color:
H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre
deberían especificarse juntas las propiedades background y color.

Background Color (Color de fondo)


Sintaxis: background-color: <valor>
Valores posibles: <color> | transparent
Valor inicial: transparent
Se aplica a: Todos los elementos
Heredado: No
La propiedad background-color establece el color del fondo de un
elemento. Por ejemplo:
BODY { background-color: white }
H1 { background-color: #000080 }
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre que
use background-color debería especificarse background-image. En la
mayoría de casos, background-image: none es adecuado.
Los autores también pueden usar la foma rápida de la propiedad
background, que está mejor soportada que la propiedad background-
color.

Background Image (Imagen de fondo)


Sintaxis: background-image: <valor>
Valores posibles: <url> | none
Valor inicial: none
Se aplica a: Todos los elementos
Heredado: No
La propiedad background-image establece la imagen de fondo de un
elemento. Por ejemplo:
BODY { background-image: url(/images/foo.gif) }
P { background-image: url(http://www.htmlhelp.com/bg.png) }
Cuando se define una imagen de fondo (background image), también
debería definirse un background color (color de fondo) similar para aquellos
que no cargan las imágenes.
Los autores también pueden usar la foma rápida de la propiedad
background, que está mejor soportada que la propiedad background-
image.

Background Repeat (Repetir fondo)


Sintaxis: background-repeat: <valor>
Valores posibles: repeat | repeat-x | repeat-y | no-repeat
Valor inicial: repeat
Se aplica a: Todos los elementos
Heredado: No
La propiedad background-repeat determina como se repite la background
image (imagen de fondo) especificada. El valor repeat-x repetirá la imagen
horizontalmente mientras que el valor repeat-y repetirá la imagen
verticalmente. Por ejemplo:
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }
En el ejemplo de arriba, la imagen solo será organizada en mosaico
horizontal.
Los autores también pueden usar la foma rápida de la propiedad
background, que está mejor soportada que la propiedad background-
repeat.

Background Attachment (Fijación de fondo)


Sintaxis: background-attachment: <valor>
Valores posibles: scroll | fixed
Valor inicial: scroll
Se aplica a: Todos los elementos
Heredado: No
La propiedad background-attachment determina si la background image
(imagen de fondo) especificada se desplazará con el contenido o será fija
con respecto al lienzo. Por ejemplo, la línea siguiente especifica una imagen
de fondo fija:
BODY { background: white url(candybar.gif);
background-attachment: fixed }
Los autores también pueden usar la foma rápida de la propiedad
background, que está mejor soportada que la propiedad background-
attachment.

Background Position (Posición del fondo)


Sintaxis: background-position: <valor>
Valores posibles: [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center |
right]
Valor inicial: 0% 0%
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No
La propiedad background-position da la posición inicial de la background
image (imagen de fondo) especificada. Esta propiedad solo puede aplicarse a
elementos de nivel bloque y a elementos reemplazados. (Un elemento
reemplazado es aquel del que solo se conocen las dimensiones intrínsecas;
los elementos reemplazados HTML incluyen IMG, INPUT, TEXTAREA,
SELECT, y OBJECT.)
La forma más sencilla de asignar una ubicación de fondo es con palabras
clave:

• Palabras clave horizontales (left, center, right)


• Palabras clave horizontales verticales (top, center, bottom)
También pueden usarse porcentajes y longitudes para asignar la posición de
la imagen de fondo. Los porcentajes son relativos al tamaño del elemento.
Aunque se permiten longitudes, no se recomiendan debido a su inherente
debilidad al tratar con diferentes resoluciones de pantalla.
Al usar porcentajes o longitudes, la posición horizontal se especifica primero,
seguida de la posición vertical. Un valor como 20% 65% especifica que la
imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor
como 5px 10px especifica que la esquina superior izquierda de la imagen se
colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior
izquierda del elemento.
Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten
combinaciones de longitudes y porcentajes, ya que son posiciones negativas.
Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes y
longitudes no pueden combinarse con palabras clave.
Las palabras clave son interpretadas como sigue;

• top left = left top = 0% 0%


• top = top center = center top = 50% 0%
• right top = top right = 100% 0%
• left = left center = center left = 0% 50%
• center = center center = 50% 50%
• right = right center = center right = 100% 50%
• bottom left = left bottom = 0% 100%
• bottom = bottom center = center bottom = 50% 100%
• bottom right = right bottom = 100% 100%

Si la imagen de fondo está fija en relación al lienzo, la imagen es colocada en


relación al lienzo y no al elemento.
Los autores también pueden usar la foma rápida de la propiedad
background, que está mejor soportada que la propiedad background-
position.

Background (Fondo)
Sintaxis: background: <valor>
Valores <background-color> || <background-image> || <background-repeat> ||
posibles: <background-attachment> || <background-position>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: No
La propiedad background es una forma rápida para las propiedades más
específicas relacionadas con background. Algunos ejemplos de declaraciones
de background:
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../fondos/peon.png) #f0f8ff fixed }
TABLE { background: #0c0 url(hojas.jpg) no-repeat bottom right }
Un valor no especificado recibirá el valor inicial. Por ejemplo, en las tres
primeras reglas de arriba, la propiedad background-position será
establecida a 0% 0%.
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre
deberían especificarse juntas las propiedades background y color.

Nombre del
Posibles valores Ejemplos
atributo
FUENTES - FONT
color: #009900;
color valor RGB o nombre de color
color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No todos los nombres de colores son
admitidos en el estandar, es aconsejable entonces utilizar el valor RGB.
xx-small | x-small | small | medium | large |
font-size:12pt;
font-size x-large | xx-large
font-size: x-large;
Unidades de CSS
Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.
serif | sans-serif | cursive | fantasy |
font-family:arial,helvetica;
font-family monospace
font-family: fantasy;
Todas las fuentes habituales
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los
exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.
También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios
se utilizan comillas para que se entienda bien.
normal | bold | bolder | lighter | 100 | 200 | font-weight:bold;
font-weight 300 | 400 | 500 | 600 | 700 | 800 | 900 font-weight: 200;
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad.
Normal y 400 son el mismo valor, así como bold y 700.
font-style:normal;
font-style normal | italic | oblique
font-style: italic;
Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar al italic.
PÁRRAFOS - TEXT
line-height: 12px;
line-height normal y unidades CSS
line-height: normal;
El alto de una línea,y por tanto, el espaciado entre líneas. Es una de esas características que no se podian mofificar
utilizando HTML.
none | [ underline || overline || line- text-decoration: none;
text-decoration through ] text-decoration: underline;
Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado.
text-align: right;
text-align left | right | center | justify
text-align: center;
Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de
texto, aunque recuerda que no tiene por que funcionar en todos los sistemas.
text-indent: 10px;
text-indent Unidades CSS
text-indent: 2in;
Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.
text-transform capitalize | uppercase | lowercase | none text-transform: none;
text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabrs, todo en
mayúsculas o minúsculas.
FONDO - BACKGROUND
background-color: green;
Background-color Un color, con su nombre o su valor RGB
background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la página.
background-image: url(mármol.gif) ;
Background- El nombre de la imagen con su camino
background-image:
image relativo o absoluto
url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la página, se puede ver una página de
ejemplo
BOX - CAJA
margin-left: 1cm;
Margin-left Unidades CSS
margin-left: 0,5in;
Indicamos con este atributo el tamaño del margen a la izquierda
margin-right: 5%;
Margin-right Unidades CSS
margin-right: 1in;
Se utiliza para definir el tamaño del margen a la derecha
margin-top: 0px;
Margin-top Unidades CSS
margin-top: 10px;
Indicamos con este atributo el tamaño del margen arriba de la página
margin-bottom: 0pt;
Margin-bottom Unidades CSS
margin-top: 1px;
Con el se indica el tamaño del margen en la parte de abajo de la página
padding-left: 0.5in;
Padding-left Unidades CSS
padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es
parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-right: 0.5cm;
Padding-right Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de
este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-top: 10pt;
Padding-top Unidades CSS
padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este.
padding-right: 0.5cm;
Padding-bottom Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este.
border-color: red;
Border-color color RGB y nombre de color
border-color: #ffccff;
Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por separado
con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
none | dotted | solid | double | groove | border-style: solid;
Border-style ridge | inset | outset border-style: double;
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar), solid=solido,
double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D.
border-width: 10px;
border-width Unidades CSS
border-width: 0.5in;
El tamaño del borde del elemento al que lo aplicamos.
Para ver otros ejemlos de Box pulsar aquí
float none | left | right float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho
elemento. Igual que el atributo align en imagenes en sus valores right y left.
clear none | right | left clear: right;
Si este elemento tiene a su altura imagenes u otros elementos alineados a la derecha o la izquierda, con el atributo
clear hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que indiquemos.
Para ver una página que utiliza float y clear pulsar aquí

La especificación de estilos CSS es muy amplia, seguro que se queda en el tintero algún
atributo de estilo, pero creo que la inmensa mayoría están, y por supuesto la selección de
los más importantes.

Vamos a ver una serie de técnicas con hojas de estilo, imprescindibles para utilizar
esta tecnología con toda su potencia.

Las hojas de estilos son un tema largo del que se han escrito libros enteros. Nosotros nos
centramos en los temas prácticos y por ello vamos a acabar ya con este capítulo, en unos
cuantos puntos

Definir estilos utilizando clases

Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas
veces.

Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o
en un archivo externo a la página. Para definirlas utilizamos la siguiente sintaxis, un punto
seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta
manera:

.nombredelaclase {atributo: valor;atributo2:valor2; ...}

Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello
utilizaremos el atributo class, poniéndole como valor el nombre de la clase, de esta forma:

<ETIQUETA class="nombredelaclase">

Ejemplo de la utilización de clases

<html>
<head>
<title>Ejemplo de la utilizaci&oacute;n de clases</title>
<STYLE type="text/css">
.fondonegroletrasblancas {background-color:black;color:white;font-size:12;font-family:arial}
.letrasverdes {color:#009900}
</STYLE>
</head>

<body>
<h1 class=letrasverdes>Titulo 1</h1>
<h1 class=fondonegroletrasblancas>Titulo 2</h1>

<p class=letrasverdes>
Esto es un p&aacute;rrafo con estilo de letras verdes</p>
<p class=fondonegroletrasblancas>
Esto es un p&aacute;rrafo con estilo de fondo negro y las letras blancas. Es todo!</p>
</body>
</html>

Ver el ejemplo anterior

Estilo en los enlaces


Una técnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y
no se podía en HTML, es la definición de estilos en los enlaces, quitandoles el subrayado o
hacer enlaces en la misma página con distintos colores.

Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que
existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaración de estilos
global de la página (<STYLE>) o del sitio (Definición en un archivo externo):

Enlaces normales
A:link {atributos}

Enlaces visitados
A:visited {atributos}

Enlaces activos (Los enlaces están activos en el presiso momento en que se pincha sobre ellos)
A:active {atributos}

Enlaces hover (Cuando el ratón está encima de ellos, solo funciona en ieplorer)
A:hover {atributos}

El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color
es color:tu_color.

También podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo
style. De esta manera podemos hacer que determinados enlaces de la página se vean de
manera distinta

Ejemplo de estilos en enlaces

<html>
<head>
<title>Ejemplos de estilo en enlaces</title>
<STYLE type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;font-weight:bold}
</STYLE>
</head>

<body>

<a href="http://dominioinexistente.nofunciona.com">Enlace normal</a>


<br>
<br>
<a href="enlaces.html">Enlace visitado</a>
Pulsar este enlace para verlo activo,
poner el rat&oacute;n por encima para que cambie.

</body>
</html>

Ver el ejemplo anterior

URL como valor de un atributo:


Determinados atributos de estilos, como background-image necesitan una URL como
valor, para indicarlas podemos definir tanto caminos relativos como absolutos. Así pues,
podemos indicar la URL de la imagen de fondo de estas dos maneras:

background-image: url(fondo.gif) En caso de que la imagen esté en el mismo directorio que la página.
background-image: url(http://www.desarrolloweb.com/images/fondo.gif)

Ocultar estilos en navegadores antiguos

En caso de definir dentro de la etiqueta <STYLE> unas declaraciones de estilos debemos


asegurarnos que estas no se imprimirán en la página web con navegadores antiguos. Pensar
en un navegador que no reconozca la etiqueta <STYLE>, pensará que corresponde con algo
que no entiende y se olvidará de la etiqueta. Lo siguiente que encuentra es texto normal y
hará que este se vea en la página, como con cualquier otro texto.

Para evitarlo debemos ocultar con comentarios HTML (<!-- esto es un comentario -->) todo
lo que hay dentro de la etiqueta <STYLE>. Se puede ver un ejemplo de esto a continuación:

De este modo hemos terminado la primera parte del manual de CSS, que espero pueda
ayudar a hacer páginas mejores y más rápidamente. Ahora el manual continua explicando
conceptos sobre capas y maquetación CSS, entre otros asuntos.

Quiero recordaros que siempre es útil ver como han hecho sus páginas otros progradores de
Internet. Para ver una página definida enteramente con hojas de estilos podemos visitar
Web Site Album, que está incluso maquetada con CSS. También podemos visitar la dirección
www.guiarte.com, que está maquetada con tablas, pero todos los estilos se aplican con css.

Para ver otros manuales, artículos y enlaces a páginas que enseñan a utilizar las hojas de
estilos visitar la sección correspondiente a CSS de nuestro directorio.
Vemos las diferencias entre varias etiquetas para aplicar estilos y crear capas y
una pequeña introducción a las capas.

Veamos una pequeña introducción a lo que son las capas, la etiqueta HTML <DIV>
utilizada para construirla y los atributos CSS con los que podemos aplicar estilos.

Como ya hemos visto en nuestro manual de CSS, <SPAN> sirve para aplicarle estilo a una
pequeña parte de una página HTML. Por ejemplo, con ella podríamos hacer que una parte
de un párrafo se coloree en rojo. Con <SPAN> no es habitual englobar un trozo muy grande
de texto, por ejemplo el que comprenda a varios párrafos.

Con <DIV> también podemos aplicar estilo a partes de la página HTML.

La diferencia entre <SPAN> y <DIV> es que con esta última si que podemos aplicar estilo a
una parte más amplia de la página, por ejemplo a tres párrafos. Además que la etiqueta
<DIV> tiene un uso adicional que es el de crear divisiones en la página a las que
podremos aplicar una cantidad adicional de atributos para modificar sus
comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la división
al centro, izquierda, derecha o justificado. Pero su uso más destacado es el de convertir
esa división en una capa.

Una capa es una división, una parte de la página, que tiene un comportamiento muy
independiente dentro de la ventana del navegador, ya que la podemos colocar en
cualquier parte de la misma y la podremos mover por ella independientemente, por poner
dos ejemplos. En el uso de capas se basan muchos de los efectos más comunes del DHTML.

Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no
son compatibles más que con Netscape, por lo que es recomendable utilizar la etiqueta
<DIV> para hacer capas preferentemente a las otras dos.

Los atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos
recomendadas <SPAN> y <DIV>, son principalmente de estilos CSS. Estos atributos nos
permiten, como hemos podido ver en el manual de hojas de estilo en cascada de
desarrolloweb, modificar de una manera muy exhaustiva la presentación de los contenidos
en la página. Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de
esta manera:

<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>

<DIV style="color:red;font-size:10px">...</DIV>

Como ya pudimos ver muchos ejemplos en el manual de CSS, nos referimos a él para
ampliar esta información. Pero no habíamos visto todavía una serie de atributos que nos
sirven para posicionar la división en la página como una capa. Estos atributos se pueden
aplicar a la etiqueta <DIV> que es la que servía para crear capas compatibles con todos los
navegadores.

Los atributos para que la división sea una capa son varios y se pueden ver a
continuación.
<div id="c1" style="position:absolute; left: 200px; top: 100px;">
Hola!
</div>

El primero, position, indica que se posicione de manera absoluta en la página y los


segundos, left y top, son la distancia desde el borde izquierdo de la página y el borde
superior.

Hay otros atributos especiales para capas como width y height para indicar la anchura y
altura de la capa, Z-index que sirve para indicar qué capas se ven encima de qué otras,
clip que sirve para recortar una capa y hacer que partes de ella no sean visibles, o
visibility para definir si la capa es visible o no. Estos y otros atributos los veremos en el
siguiente capítulo, donde hablaremos del posicionamiento de capas.

Veamos el posicionamiento de capas y otros atributos que podemos utilizar al


definirlas.

Hemos visto en el capítulo anterior qué son las capas y algunas pequeñas muestras sobre
cómo crearlas y darle algún estilo. Ahora vamos a ver en detenimiento los atributos
específicos para aplicar posicionamiento a una capa y otros estilos.

Antes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que
hemos visto en el manual de CSS. Así, el atributo color indica el color del texto de la capa,
el atributo font-size indica el tamaño del texto y así con todos los atributos ya vistos.

Ahora bien, existen una serie de atributos que sirven para indicar la forma, el tamaño de las
capas, la visibilidad, etc, que no hemos visto en capítulos anteriores y que veremos a
continuación.

Atributo position

Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute.

- relative indica que la posición de la capa es relativa a el lugar donde se estaba escribiendo
en la página en el momento de escribir la capa con su etiqueta

- absolute indica que la posición de la capa se calcula con respecto al punto superior
izquierdo de la página.

Atributo top

Indica la distancia en vertical donde se colocará la capa. Si el atributo position es absolute,


top indica la distancia del borde superior de la capa con respecto al borde superior de la
página. Si el atributo position era relative, top indica la distancia desde donde se estaba
escribiendo en ese momento en la página hasta el borde superior de la capa.

Atributo left

Básicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la
distancia en horizontal a la que estará situada la capa.
Atributo height

Sirve para indicar el tamaño de la capa en vertical, es decir, su altura.

Atributo width

Indica la anchura de la capa

Atributo visibility

Sirve para indicar si la capa se puede ver en la página o permanece oculta al usuario. Este
atributo puede tener tres valores.

- visible sirve para indicar que la capa se podrá ver.


- hidden indicará que la capa está oculta.
- inherit es el valor por defecto, que quiere decir que hereda la visibilidad de la capa donde
está metida la capa en cuestión. Si la capa no está metida dentro de ninguna otra se supone
que está metida en la capa documento, que es toda la página y que siempre está visible.

Atributo z-index

Sirve para indicar la posición sobre el eje z que tendrán las distintas capas de la página.
Dicho de otra forma, con z-index podemos decir qué capas se verán encima o debajo de
otras, en caso de que estén superpuestas. El atributo z-index toma valores numéricos y a
mayor z-index, más arriba se verá la página.

Atributo clip

Es un atributo un poco difícil de explicar. En concreto sirve para recortar determinadas áreas
de la capa y que no se puedan ver. Una capa que está visible se puede recortar para que se
vea, pero que no se vea algún trozo de esta. El cliping se indica por medio de 4 valores, con
esta sintaxis.

rect (<top>, <right>, <bottom>, <left>)

Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar
en este esquema.
Este es un ejemplo de capa que utiliza todos los atributos que hemos visto en este artículo y
alguno más para aplicar estilo a la capa.

<div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left:


10px; top: 220px; position: absolute; visibility: visible; z-index:10; font-
size: 14pt; font-family: verdana; text-align: center; background-color:
#bbbbbb">

Esta capa tiene un cliping, por eso se ve entrecortada.


<br>
<br>
Esto es una capa de prueba

</div>

Puede verse el ejemplo en una página web, donde también podrá apreciarse el efecto
conseguido al realizar el cliping.

A veces el posicionamiento absoluto de capas es demasiado rígido, pues si la


definición de pantalla cambia de un usuario a otro las capas pueden quedar
colocadas en lugares donde no deseamos. He aquí una solución.

He recibido una consulta en mi correo sobre colocación de capas de manera absoluta, pero
en la que no nos importe la definición de la pantalla del usuario y otros ir y venir de los
elementos HTML. Nuestro compañero expresó su duda de la siguiente manera:

Si trabajamos con position:absolute dando un left y un top funciona si tienes tu página


alineada a la izquierda. Mi página está alineada en el centro, entonces lo que sucede es que
dependiendo de la resolución de pantalla que tengas (ancho de 800px,1024px,etc) me baila
toda la página y no cuadra nada.
Primero que todo, debemos saber que si trabajamos con el position
relative las capas se colocan en el lugar donde aparecen dentro del código
HTML. De este modo, si colocamos una capa con position relative dentro
de una celda de una tabla, dicha capa aparecería dentro de la celda donde
la estamos colocando, independientemente del lugar donde se sitúe la
celda al cambiar la definición de la pantalla.

El problema de esta solución es que la capa haría crecer la celda de la tabla donde
queremos colocarla (al igual que cualquier otro elemento HTML que colocásemos dentro de
la tabla) y es muy probable que nuestro diseño no nos permita este hecho. Seguramente ya
habrías notado este problema y si no es así te invito a que crees la capa que intentas
colocar con el atributo position a relative para ver si con eso tu problema ya está resuelto.

En casi todos los casos, la capa que intentamos colocar va a tener que tener el position
absolute, porque con relative no arreglamos totalmente el problema. Entonces volvemos a
el problema inicial, que era situar la capa con position absolute en el lugar exacto,
independientemente de la definición de pantalla.

La solución final que propongo pasa por aplicar algún truquillo. De hecho, estuve hace unos
días preguntándome sobre esa cuestión y al final encontré la solución, aunque no se me
ocurrió a mi, sino que la extraje de www.cross-browser.com.

La idea es un poco compleja y para su puesta en marcha debemos realizar una serie de
acciones que, sinceramente, considero excesivas para un problema inicialmente sencillo. Así
pues, que no asuste lo que voy a soltar a continuación, que luego trataré de explicarlo un
poco mejor.

Nuestro esquema de trabajo consistirá en una capa con posición relativa, que nos servirá de
"ancla" y otra con la posición absoluta, donde colocaremos el contenido final a mostrar en la
capa.

La capa relativa la colocaremos en el lugar aproximado donde queramos que aparezca la


capa absoluta. La capa absoluta la posicionaremos, una vez cargada la página, en un lugar
próximo a la capa relativa. Por supuesto, estas acciones las vamos a tener que realizar con
Javascript, que es el lenguaje que nos permite actualizar las posiciones de las capas
dinámicamente.

Detenidamente

Decíamos que habría que colocar una capa relativa cercana al lugar donde tiene que
aparecer la capa con position absolute. Insisto en que las capas relativas se colocan en el
lugar donde las metemos dentro del código HTML, por lo que será fácil colocar la capa
relativa en el lugar exacto y que este lugar sea válido para cualquier definición.

La segunda capa, la que tiene el contenido final, la pondremos inicialmente en una posición
cualquiera y escondida, de manera que no se vea que está mal colocada. Una vez terminada
de cargar la página, podremos acceder a la posición de la capa relativa, extrayendo sus
valores top y left y colocándolos en los correspondientes top y left de la capa con posición
absoluta. Una vez marcada la posición de la capa absoluta podemos volverla visible.

A la vista de la imagen siguiente, la capa con posición relativa la hemos colocado en el


enlace. En realidad habría tres capas con posición relativa para poder posicionar otras
tantas capas con posición absoluta. La parte que vemos sombreada de verde corresponde al
espacio que abarcaría la capa relativa.

Su posición sería la que está marcada por el aspa roja que aparece en su esquina superior
izquierda. Dicha posición depende del lugar donde aparezcan los enlaces en la página.

Luego, con Javascript deberíamos asignar la posición de la capa absoluta de una manera
parecida a esta.

left de la capa absoluta = left de la capa relativa


top de la capa absoluta = top de la capa relativa + altura de la capa relativa

Podemos sumarle algún píxel más a la posición de la capa, si es que queremos moverla un
poco abajo y a la derecha, tal como hemos visto en la imagen.

No pretendo en este artículo, muy a mi pesar y por falta de espacio y tiempo, explicar cómo
se hacen esas operaciones de Javascript. Advierto que si no se conoce nada de Javascript va
a ser imposible ponerse con una tarea tan tediosa como el manejo de capas. Si por el
contrario, ya hemos tenido contacto con Javascript y DHTML anteriormente, no debería ser
un problema realizar esas acciones.

Referencias Javascript

En DesarrolloWeb tenemos un par de manuales de Javascript, que sería necesario estudiar


para empezar a introducirse en el lenguaje.
- Programación en Javascript I
- Programación en Javascript II

En el Taller de Javascript tenemos algún artículo sobre tratamiento dinámico de capas.

En el momento en el que escribo estas líneas no tenemos un manual de DHTML y


tratamiento de capas completo, por lo que sería recomendable estudiarlo en alguno de los
enlaces recomendados de nuestra sección de DHTML del buscador.