Acerca del Web Design Group

Estructura y reglas de CSS


[ Sintaxis básica | Seudo-clases y Seudo-elementos | Orden de cascada]


Sintaxis básica

Reglas

Selectores

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.

Selectores de clase

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.

Selectores ID

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>
Selectores de contexto

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.

Declaraciones

Propiedades

Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.

Valores

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).

Agrupamiento

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 }

Herencia

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.

Comentarios

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 */

Seudo-clases y seudo-elementos

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 }

Seudo-clases Ancla (Anchor)

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% }

Seudo-elemento Primera línea

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 }

Seudo-elemento First letter

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.

Orden de Cascada

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.

  1. ! important

    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}
  2. Origen de las reglas (del autor frente a las del lector)

    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.

  3. Reglas de selector: Calculando especificidad

    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.

    1. Cuente el número de atributos ID en el selector.
    2. Cuente el número de atributos CLASS en el selector.
    3. Cuente el número nombres de etiquetas HTML en el 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 */
    
  4. Orden de especificación

    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


Web Design Group ~ ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.