Anatomía de una regla

Una regla se compone de dos partes:

• Selector: la parte anterior a la llave izquierda
• Declaración: la parte que se encuentra dentro de las llaves

  

El selector es el enlace que se encuentra entre el documento HTML y el estilo. Especifica a qué elementos afecta la declaración. La declaración es esa parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector es h1 y la declaración es "color: green". Por lo tanto, la declaración afectará a todos los elementos h1, es decir, éstos se volverán verdes. (La propiedad color simplemente afecta el color del texto de primer plano; existen otras propiedades para el fondo, el borde, etc.)

El selector anterior se basa en el tipo del elemento: selecciona todos los elementos de tipo "h1". Este tipo de selector se denomina selector de tipo. Cualquier tipo de elemento HTML puede utilizarse como un selector de tipo. Los selectores de tipo son los selectores más simples. Analizamos otros tipos de selectores en Consulte Selectores CSS. , "Selectores CSS".

Anatomía de una declaración

La declaración tiene dos partes separadas por dos puntos:

• Propiedad: la parte antes de los dos puntos
• Valor: la parte después de los dos puntos

  

La propiedad es una calidad o característica que algo posee. En el ejemplo anterior, es el color. CSS2 (consulte el cuadro por separado) define cerca de 120 propiedades y podemos asignar valores a todos ellos.

http://www.w3.org/TR/REC-CSS1


http://www.w3.org/TR/REC-CSS2
	  

El valor es una especificación precisa de la propiedad. En el ejemplo, es "verde", pero podría fácilmente ser azul, rojo, amarillo o de algún otro color.

El esquema que aparece a continuación muestra todos los componentes de una regla. Las llaves ({ }) y los dos puntos (:) posibilitan que el navegador distinga entre el selector, la propiedad y el valor.

Agrupación de selectores y reglas

Al diseñar CSS, la brevedad era el objetivo. Estimamos que si podíamos reducir el tamaño de las hojas de estilo, podíamos permitir a los diseñadores escribir y editar hojas de estilo "a mano". Además, las hojas de estilo cortas se cargan más rápido que las más largas. Por lo tanto, CSS incluye varios mecanismos para acortar hojas de estilo por medio de la agrupación de selectores y declaraciones.

Por ejemplo, considere estas tres reglas:

H1 { font-weight: bold }
H2 { font-weight: bold }
H3 { font-weight: bold }
	 

Estas tres reglas tienen exactamente la misma declaración; configuran la fuente en negrita. (Esto se realiza con la propiedad font-weight, que analizamos en Consultar Fuentes. .) Dado que estas tres declaraciones son idénticas, podemos agrupar los selectores en una lista separada por comas y únicamente enumerar la declaración una vez, como se detalla a continuación:

H1, H2, H3 { font-style: bold }

Esta regla producirá el mismo resultado que las tres primeras.

Es posible que el selector tenga más de una declaración. Por ejemplo, podemos escribir una hoja de estilo con estas dos reglas:

H1 { color: green }
H1 { text-align: center }

En este caso, configuramos todos los h1 en color verde y en una posición centrada en el lienzo. (Esto se realiza con la propiedad text-align, analizada en el capítulo 5).

Sin embargo, podemos lograr el mismo efecto más rápidamente mediante la agrupación de las declaraciones que se relacionan con el mismo selector en una lista separada por punto y coma, como se muestra a continuación:

H1 {
  color: green;
  text-align: center;
}

Todas las declaraciones deben estar incluidas dentro del par de llaves. El punto y coma separa las declaraciones y también puede aparecer, aunque no tiene porqué, al final de la última declaración. Asimismo, a fin de facilitar la lectura de su código, le sugerimos ubicar a cada una de las declaraciones en su propia línea, tal como lo hicimos aquí. (Los navegadores no lo tomarán en cuenta; simplemente ignorarán todos los espacios en blanco adicionales y las divisiones de líneas).

Ahora ya conoce los conceptos básicos sobre cómo crear hojas de estilo y reglas de CSS. Sin embargo, aún no ha terminado. Para que la hoja de estilo tenga algún efecto, usted tiene que "pegar" su hoja de estilo al documento HTML.

Pegar mediante el elemento STYLE

Puede pegar la hoja de estilo al documento HTML, colocando la hoja de estilo dentro del elemento style en la parte superior de su documento. El elemento style se introdujo en HTML específicamente para permitir que las hojas de estilo se insertasen dentro de los documentos HTML. A continuación, mostramos una hoja de estilo (en negrita) pegada a un documento de muestra mediante el elemento style . El resultado se muestra en la figura 2.3 .

<HTML>
  <TITLE>Página de inicio de Bach</TITLE>
  <STYLE>

	H1, H2 { color: green }
  </STYLE>
  <BODY>
	<H1>Página de inicio de Bach</H1>
	<P>Johann Sebastian Bach fue un compositor
		prolífico. Entre sus obras, se incluyen:
	<UL>

	  <LI>las Variaciones Goldberg
	  <LI>los Conciertos de Brandemburgo
	  <LI>el Oratorio de Navidad
	</UL>
	<H2>Perspectiva histórica</H2>
	<P>Bach compuso durante lo que se conoce como
	  el período barroco.
  </BODY>

</HTML>

Observe que el elemento style se coloca después del elemento title y antes del elemento body. El título del documento no aparece en el lienzo, de modo que los estilos de CSS no le afectan.

El contenido de un elemento style constituye una hoja de estilo. Sin embargo, mientras que el contenido de dichos elementos como h1, p y ul aparece en el lienzo, el contenido de un elemento style no aparece en éste. En su lugar, lo que aparece en el lienzo es el efecto del contenido del elemento style, la hoja de estilo. Por lo tanto, no ve "{ color: green }" en su pantalla; en cambio, ve dos elementos h1 de color verde. No se agregaron reglas que afecten a los demás elementos, de modo que esos elementos aparecen con el color predeterminado del navegador.

Tareas comunes: fuentes

Comencemos con las fuentes. Si ha utilizado aplicaciones de autoedición anteriormente, debe poder leer esta pequeña hoja de estilo:

H1 { font: 36pt serif }

La regla anterior configura la fuente para los elementos h1. La primera parte del valor (36pt) configura el tamaño de la fuente en 36 puntos. Un "punto" es una unidad de medida tipográfica que ha sobrevivido a la era digital. En el próximo capítulo, le comentaremos por qué debe usar la unidad "em" en lugar de "pt", pero por ahora centrémonos en los puntos. La segunda parte del valor (serif) le comunica al navegador que utilice una fuente con serifs (los pequeños ganchos que aparecen al final de los trazos, el capítulo 5 brindará información sobre ello). Las fuentes serif más decoradas se adaptan muy bien a la página de inicio de Bach, dado que las modernas fuentes de sans serif (fuentes sin trazos terminales) no se utilizaban en su tiempo. Este es el resultado:

La propiedad font es una propiedad de atajo para la configuración de otras varias propiedades de una sola vez. Al utilizarlo, puede acortar sus hojas de estilo y configurar valores en todas las propiedades que reemplaza. Si opta por utilizar la versión ampliada, tendrá que configurar todos estos para reemplazar el ejemplo anterior:

H1 {
  font-size: 36pt;
  font-family: serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: normal;
}

A veces, sólo quiere configurar uno de éstos. Por ejemplo, quizás desee inclinar el texto en algunos elementos. Aquí incluimos un ejemplo:

UL { font-style: italic }

La propiedad font-style no cambiará el tamaño de la fuente ni la familia de la fuente; sólo inclinará la fuente existente. Al estar configurado en el elemento ul, los elementos li que se encuentran dentro se volverán inclinados, dado que font-style se hereda. Este es el resultado cuando se aplica a la página de prueba que conoce hasta ahora:

De modo similar, la propiedad font-weight se utiliza para cambiar el peso, el espesor, de las letras. Asimismo, puede enfatizar los ítems de la lista mediante la configuración de su antecesor en negrita:

UL {
  font-style: italic;
  font-weight: bold;
}
	 

Lo que resulta en:

Las últimas propiedades, font-variant y line-height, no fueron ampliamente admitidas en los navegadores hasta el momento y, por lo tanto, aún no se utilizan con frecuencia.

Tareas comunes: márgenes

La configuración del espacio alrededor de los elementos es una herramienta básica en la tipografía. El titular que aparece antes de este párrafo tiene espacio por encima y (ligeramente menos) por debajo de él. Esta párrafo, tal como figura impreso en el libro, tiene espacio a la izquierda y (ligeramente menos) a la derecha. CSS puede utilizarse para expresar cuánto espacio debe haber alrededor de los diferentes tipos de elementos.

De manera predeterminada, su navegador sabe bastante sobre la forma de mostrar los diferentes tipos de elementos en HTML. Por ejemplo, sabe que se pretende que las listas y los elementos blockquote los separen del resto del texto. Como diseñador, puede agregar estas configuraciones mientras al mismo tiempo realiza sus propias mejoras. Vamos a utilizar el elemento blockquote como ejemplo. A continuación, incluimos un documento de prueba:

<HTML>

  <TITLE>Fredrick el Grande conoce a Bach</TITLE>
  <BODY>
	<P>Una noche, justo cuando Fredrick el Grande estaba
	  preparando su flauta y sus músicos
	  se estaban reuniendo, un oficial le alcanzó una
	  lista de los extraños que habían llegado. Con
	  su flauta en la mano, repasó la lista,
	  pero miró de inmediato a los
	  músicos reunidos y dijo, algo
	  agitado:
	<BLOCKQUOTE>"Señores, el viejo Bach ha llegado".
	</BLOCKQUOTE>
	<P>En ese momento, dejó la flauta a un lado y el viejo Bach, quien
	  se había alojado en las habitaciones de su hijo, fue llamado de inmediato
	  a Palacio.
  </BODY>

</HTML>

La captura de pantalla siguiente muestra cómo un típico navegador HTML visualizaría el documento:

Como puede ver, el navegador ha agregado espacio en todos los lados del texto citado. En CSS, este espacio se denomina "márgenes" y todos los elementos tienen márgenes en los cuatro lados. Las propiedades se denominan: margin-top (margen superior), margin-right (margen derecho), margin-bottom (margen inferior) y margin-left (margen izquierdo). Puede cambiar la forma en que el elemento blockquote se muestra al escribir una pequeña hoja de estilo:

BLOCKQUOTE {
  margin-top: 1em;
  margin-right: 0em;
  margin-bottom: 1em;
  margin-left: 0em;
  font-style: italic;
}

La unidad "em" será tratada en detalle en el próximo capítulo, pero ya podemos revelar su secreto en este mismo momento: escala en relación con el tamaño de la fuente. Por lo tanto, el ejemplo anterior dará como resultado que los márgenes verticales sean tan altos como el tamaño de fuente (1em) del blockquote y sus márgenes horizontales tengan un ancho cero. Para asegurarse de que el texto citado aún pueda distinguirse, se le ha dado una inclinación en cursiva. El resultado es:

Así como font es una propiedad de atajo que sirve para configurar de una sola vez varias propiedades relacionadas con las fuentes, margin es una propiedad de atajo que configura todas las propiedades de los márgenes. Por lo tanto, el ejemplo anterior puede escribirse así:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
}

La primera parte del valor (1em) se asigna al margen superior. Desde ahí, se disponen en el sentido de las agujas del reloj: 0em se asigna a margin-right, 1em se asigna a margin-bottom y 0em se asigna a margin-left.

Al configurar el margen izquierdo en cero, el texto citado requiere de un mayor estilo para configurarlo de manera separada al resto del texto. La configuración de font-style en cursiva resulta útil y el agregado de un color de fondo amplía además la cita:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
}

El resultado es:

Tal como se esperaba, se ha modificado el color de fondo que aparece por detrás de la cita. A diferencia de los ejemplos anteriores, el color se especificó en los componentes rojo/verde/azule (RGB, por sus siglas en inglés). Los colores RGB se describen en detalle en el capítulo 11.

Un problema estilístico del ejemplo anterior es que el color de fondo apenas cubre el texto citado. El espacio que se encuentra alrededor de la cita, el área de los márgenes, no utiliza el color de fondo del elemento. CSS tiene otro tipo de espacio, que se denomina padding (relleno) y que utiliza el color de fondo del elemento. En otros sentidos, las propiedades padding se asemejan a las propiedades de márgenes: agregan espacio alrededor del elemento. Agreguemos algo de padding a la cita:

BLOCKQUOTE {
  margin: 1em 0em 1em 0em;
  font-style: italic;
  background: #EDB;
  padding: 0.5em;
}

El resultado de configurar el padding consiste en espacio agregado entre el texto y el rectángulo que lo rodea:

Observe que se le asignó un solo valor (0.5em) a la propiedad padding. Tal como ocurre con la propiedad margin, padding pudo haber tomado 4 valores que se hubieran asignado al padding superior, derecho, inferior e izquierdo respectivamente. Sin embargo, cuando el mismo valor se configura en todos los lados, enumerarlo sólo una vez será suficiente. Esto se aplica tanto al padding como al margin (así como a algunas otras propiedades de los bordes, que se describen en Consultar Espacio alrededor de los cuadros. ).

Tareas comunes: enlaces

A fin de facilitar la navegación de los usuarios en los documentos con hipertextos, los enlaces deben tener un estilo que los distinga del texto normal. A menudo, los navegadores HTML tiene texto con hipervínculos subrayados. Asimismo, se han utilizado diferentes combinaciones de colores para indicar si el usuario ha visitado o no el enlace previamente. Dado que los hipervínculos son una parte tan fundamental de la Web, CSS cuenta con una compatibilidad especial para darles estilo. A continuación, incluimos un sencillo ejemplo:

A:link { text-decoration: underline }

El ejemplo anterior especifica que los enlaces no visitados deben estar subrayados:

Los enlaces están subrayados, tal como lo hemos especificado, pero también aparecen en color azul, que no lo hemos especificado. Cuando los autores no especifican todos los estilos posibles, los navegadores utilizan estilos predeterminados para completar las diferencias. La interacción entre los estilos de los autores, los estilos predeterminados del navegador y los estilos de los usuarios (las propias preferencias del usuario) es otro ejemplo de las reglas de resolución de conflictos de CSS. Se denomina la cascada (la "C" de CSS). Analizaremos la cascada a continuación.

El selector (A:link) se merece una consideración especial. Es probable que reconozca "A" como un elemento HTML, pero la última parte es nueva. ":link" es una de las tantas denominadas pseudo-clases de CSS. Las pseudo-clases se utilizan para darle estilo a elementos basados en la información que aparece por fuera del propio documento. Por ejemplo, el autor del documento no puede saber si un determinado enlace será visitado o no. Las pseudo-clases se describen en detalle en el capítulo 4 y daremos únicamente algunos ejemplos aquí:

A:visited { text-decoration: none }

Esta regla le da estilo a los enlaces visitados, tal como A:link dio estilo a los enlaces no visitados. A continuación, incluimos un ejemplo un poco más complejo:

A:link, A:visited { text-decoration: none }
A:hover { background: cyan }

La última regla introduce una nueva pseudo-clase: hover. Suponiendo que el usuario está moviendo un dispositivo de señalización (como el mouse), el estilo especificado se aplicará al elemento cuando el usuario mueva el puntero por encima ("mantenerse" sobre) del enlace. Un efecto común consiste en cambiar el color de fondo. Así es como se ve:

La historia de la pseudo-clase :hover es interesante. Se introdujo en CSS2 después de que el efecto hover se hiciera popular entre los programadores de JavaScript. La solución JavaScript requiere de un código complicado en comparación con la pseudo-clase de CSS y éste es un ejemplo de los efectos de extracción de CSS que se hicieron populares entre los diseñadores web.