Saltar índice de contenido - Desplazarse al índice de navegación.
Contenido: Lo básico. Reglas. Medios. Cascada. Herencia. Cómputo. Selectores. Pseudo-clases y pseudo-elementos. Especificidad. Valoración. Comentarios.
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.
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.
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:
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.
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):
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:
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):
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; }
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.
Afortunadamente contamos con diferentes modalidades de selector, que por supuesto aumentan notablemente las posibilidades de ejemplos anteriores. Son las siguientes:
p
) table strong
) ol>li
) h5+p
) th~td
) span[onclick]
). input[type="text"]
). img[title*="mapa"]
). del[datetime^="199"]
). a[href$=".zip"]
). p[class~="Clase"]
). td[lang|="en"]
). #Identificador
)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.
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:
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.
:link
, enlaces no visitados.:visited
, enlaces visitados.: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".:target
(CSS3):lang( )
: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). 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. :contains( )
(CSS3):not( )
(CSS3):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.
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:
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.
CSS no es simplemente una centena anónima de propiedades. Antes y por encima de todas ellas hay un esquema de funcionamiento y aplicación, como ha quedado patente. Y éste, aun a pesar del incompleto soporte que exhiben ciertos navegadores, constituye un abanico de posibilidades a tener en cuenta.
Publicado por Gonzalo, 27/01/06, 12:37
Probe poner un estilo solo para los radiobutton de la siguiente manera
input[type="radio"]{
background-color: #F5F5F5;
width:15px;
height:15px;
border-width:thin;
border-style:solid;
border-color:gray;
color:#000000;
}
Y no paso nada, lo probe en IE6 y en Firefox. Como puedo hacer para definir un estilo para todos los radiobutton en mi pagina?? sin usar un class o ID ??
Publicado por Mauricio, 18/04/06, 08:13
Por una breve pasada en busqueda de algo que me ayudara, este manual me ha salvado. Por lo poco que vi y por la ayuda que me dio para solucionar el problema voy a decirte que te pasaste. MIL GRACIASSS!!!!!!
Publicado por hola yo, 29/09/06, 07:15
si tengo un css donde estan todos los atributos de la pagina web, como es una tabla, y quiero que una tabla me quede diferente a las anteriores como hago?
lo necsito de urgencia
me parecio muy interesante el tutorial
Publicado por Matuxtreme, 02/11/06, 12:06
Muy buena info, estaría mejor aun si pones algo al respecto de como importar una font con algunos ejemplos y poner una tabla de compatibilidades entre los browsers....por ejemplo todo lo que sea CSS 3 no funciona en IE 5.5+, etc.
Un saludo!
Publicado por xzfigcvajn, 10/03/07, 07:00
Hi! Very nice site! Thanks you very much! uutzeddrpurxfy
Publicado por johanbliss, 11/04/07, 01:22
hola yo nesecito para ya que pongan el funcionamiento de una hoja de calculo y lo ponen en la pagina del funcionamiento y hablan de otra verga que les pasa vusquen su pagina de lo que ustedes hablan........
byyyyyeeee loles
Publicado por jcc, 12/08/07, 03:38
Sí señor, esto es una guía en condiciones. Es completa, clara, está bien estructurada y muy bien explicado todo.
Muchas gracias!
Publicado por letal, 14/11/07, 05:32
El doc esta letal
Publicado por Sigmo, 15/11/07, 11:39
Me explico, entre la casilla del checkbox y el texto, ¿¿¿¿como puedo introducir más espacio???? Me estoy volviendo loco...
Gracias por todo.
31/03/2003. sysifus. Taller nº 7.
Estás en: tierra de nómadas > tallerWeb > Principios básicos de CSS.