[ Sintaxis básica | Seudo-clases y Seudo-elementos | Orden de cascada]
Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente el elemento que está conectado a un estilo particular. Por ejemplo, el selector en:
P { text-indent: 3em }es P.
Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el código en un color diferente dependiendo del idioma:
code.html { color: #191970 }
code.css { color: #4b0082 }El ejemplo de arriba ha creado dos clases, css y html para usar con el elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase de un elemento, por ejemplo,
<P CLASS=advertencia>Solo se permite una clase por selector.
Por ejemplo, code.html.proprietario no es válida.</p>Las clases también pueden ser declaradas sin elementos asociados:
.nota { font-size: small }En este caso, la clase nota puede usarse con cualquier elemento.
Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequeña (small), pero este nombre perdería todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequeña.
Los selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse así:
#svp94O { text-indent: 3em }Esto sería referenciado en HTML por el atributo ID:
<P ID=svp94O>Texto con sangría 3em</P>Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector de contexto en:
P EM { background: yellow }es P EM. Esta regla dice que el texto con énfasis dentro del párrafo debería tener un fondo amarillo; el texto con énfasis en un encabezado no sería afectado.
Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.
El valor de declaración es la asignación que recibe la propiedad. Por ejemplo, la propiedad color podría recibir el valor red (rojo).
A fin de disminuir declaraciones repetitivas dentro de hojas de estilo, se permite el agrupamiento de selectores y declaraciones. Por ejemplo, todos los encabezados en un documento podrían tener idénticas declaraciones mediante un agrupamiento:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }Prácticamente todos los selectores que estén anidados dentro de selectores, heredarán los valores de propiedades asignados al selector exterior, salvo que se modifiquen de otra manera. Por ejemplo, un color definido por BODY también será aplicado al texto en un párrafo.
Hay algunos casos donde el selector interior no hereda los valores del selector exterior, pero éstos deberían ser evidentes. Por ejemplo, la propiedad margin-top no es heredada; intuitivamente, un párrafo no tendría que tener el mismo margen superior del cuerpo del documento.
Los comentarios se indican dentro de hojas de estilo con las mismas convenciones usadas en la programación C. Una muestra de comentario CSS1 tendría el siguiente formato:
/* LOS COMENTARIOS NO PUEDEN ANIDARSE */Las seudo-clases y los seudo-elementos son "clases" y "elementos" especiales reconocidos automáticamente por los navegadores que soportan CSS. Las seudo-clases distinguen entre los diferentes tipos de elementos (por ej., los enlaces visitados y los enlaces activos representan dos tipos de anclas). Los seudo-elementos se refieren a sub partes de elementos, como la primera letra de un párrafo.
Las reglas con seudo-clases o seudo-elementos toman la forma
selector:seudo-clase { propiedad: valor }o
selector:seudo-elemento { propiedad: valor }Las seudo-clases y seudo-elementos no deberían especificarse con el atributo CLASS de HTML. Las clases normales pueden usarse con seudo-clases y seudo-elementos de la siguiente manera:
selector.clase:seudo-clase { propiedad: valor }o
selector.clase:seudo-elemento { propiedad: valor }Las seudo-clases puede asignarse al elemento A para mostrar enlaces, enlaces visitados y enlaces activos en forma diferente. El elemento ancla puede asignar a la seudo-clase link (enlace), el estado de visitada, o activa. Un enlace visitado puede definirse para representar un color diferente e inclusive un diferente tamaño y estilo de fuente.
Un efecto interesante podría ser tener un enlace actualmente seleccionado (o "activo") mostrado en un tamaño de fuente ligeramente más grande y de un color diferente. Entonces, cuando la página se vuelva a seleccionar, el enlace visitado podría mostrarse en un tamaño de fuente más pequeño y con un color diferente. La hoja de estilo de muestra podría lucir así:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }Con frecuencia, en artículos de periódicos, como los del Wall Street Journal, la primera línea de texto de un artículo se muestra en negrita y con todas las letras en mayúsculas. CSS1 ha incluido esta capacidad como un seudo-elemento. Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como P, H1, etc.). Un ejemplo de un seudo-elemento first-line sería:
P:first-line {
font-variant: small-caps;
font-weight: bold }El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos. La primera letra de texto dentro de un selector asignado se representará de acuerdo al valor asignado. Un seudo-elemento first-letter puede usarse en cualquier elemento de nivel de bloque. Por ejemplo:
P:first-letter { font-size: 300%; float: left }crearía una letra capital tres veces mayor que el tamaño normal de fuente.
Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. En estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalecerá. Las siguientes características determinarán el resultado de hojas de estilo que se contraponen.
Puede establecerse una regla como importante al especificar ! important. Un estilo designado como importante prevalecerá sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector pueden especificar reglas importantes, la regla del autor primará sobre la regla del lector en casos de importancia. Una muestra del uso de la sentencia ! important:
BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important}Como ya se mencionó, tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor prevalecerán sobre las reglas del lector de similar peso. Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo incorporadas del navegador.
Los autores deberían ser cautelosos con el empleo de reglas ! important ya que primarán sobre las reglas ! important del lector. Un usuario puede, por ejemplo, necesitar de grandes tamaños de fuentes o colores especiales debido a problemas de visión, y tal usuario querrá declarar que ciertas reglas de estilo sean ! important, ya que algunos estilos son vitales para que pueda leer una página. Cualquier regla ! important prevalecerá sobre las reglas normales, por lo que se aconseja a los autores usar reglas normales casi exclusivamente para asegurar que los usuarios con necesidades especiales de estilos puedan leer la página.
Las hojas de estilo también pueden primar sobre hojas de estilo en conflicto basándose en su nivel de especificidad, donde un estilo más específico siempre prevalecerá sobre uno menos específico. Simplemente es cuestión de contar para calcular la especificidad de un selector.
Finalmente, escriba los tres números en orden exacto sin espacios ni comas para obtener un número de tres dígitos. (Nota: puede necesitar convertir los números a una base mayor para terminar con tres dígitos.) La lista final de números que corresponden a selectores determinará fácilmente la especificidad, donde los números más altos priman sobre los más bajos. La siguiente es una lista de selectores ordenados por especificidad:
#id1 {xxx} /* a=1 b=0 c=0 --> especificidad = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> especificidad = 013 */
LI.red {xxx} /* a=0 b=1 c=1 --> especificidad = 011 */
LI {xxx} /* a=0 b=0 c=1 --> especificidad = 001 */
Para hacerlo sencillo, cuando dos reglas tienen el mismo peso, prima la última regla especificada.
[ Sintaxis básica | Seudo-clases y Seudo-elementos | Orden de cascada]
Mantenido por John Pozadzides y Liam Quinn
ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS
Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.