Sintaxis de estilo (CSS)

Mayo 2013

Definición de un estilo

Al definir un estilo se utilizan reglas de texto simples para describir el aspecto de los elementos de la página. Una regla CSS se caracteriza por dos elementos principales:

Un selector de tipo para especificar a qué etiquetas del documento se aplica el estilo.
Una declaración de estilo, que se define entre paréntesis, para especificar qué estilo aplicar a las etiquetas seleccionadas. A su vez, la declaración está compuesta por:
- una o más propiedades, seguidas por el carácter ":" (dos puntos)
- uno o más valores asociados a cada propiedad, entre comillas y separados por comas si hay múltiples valores, y todos seguidos por un punto y coma.

Por lo tanto, la sintaxis es:

Sintaxis de una regla CSS

La siguiente sintaxis define, a forma de ejemplo, el estilo a aplicar a hipervínculos (etiqueta <A>), específicamente fuente Verdana de 18 píxeles de tamaño, en negrita y en color amarillo:

A {
					  font-family: Verdana;
					  font-size: 18px;
					  font-style: bold;
					  color: yellow
					  }

Selectores de tipo

Los "selectores de tipo" (o "selectores de elementos de tipo") son las palabras que están delante de los paréntesis y que indican las etiquetas a las que se aplica el estilo que aparece entre paréntesis.

Para definir el estilo de una etiqueta HTML en particular, sólo debe usarse el nombre de la etiqueta (sin los caracteres < y >). Por ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--

tag {properties}
		-->
		</STYLE>
	</HEAD>
<BODY>

<tag> ... </tag>

...
</BODY>
</HTML>

Selectores múltiples

También se puede aplicar un estilo a múltiples etiquetas al separar los nombres de las mismas con una coma (,). La sintaxis de tal selector, denominado selector múltiple, es:

type-selector1, type-selector2  { /* style */  }

Selector universal

A través del selector universal ("*") se puede definir un estilo que se aplicará a todos los elementos HTML. La sintaxis del selector universal es:

*  { /* style */  }

El selector universal generalmente no se implementa en navegadores.

Selectores anidados

Se puede seleccionar una etiqueta dentro de un contexto dado, es decir, según los elementos que se encuentran alrededor, mediante selectores contextuales.

Existen varios tipos de selectores contextuales:

El selector anidado se usa para crear una regla que se aplica solamente cuando el elemento Y está anidado dentro del elemento X. Su sintaxis es:
```
selector_X selector_Y { /* style; */ }
```
Para el siguiente código HTML:
```
 Nota, esto es una advertencia 
 Leer detenidamente 
```
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por etiquetas que están a su vez anidadas dentro de un grupo de etiquetas ):
```
P B { font-weight: bold; color: red; } 
```
El selector de hermanos adyacentes se usa para crear una regla que se aplica solamente cuando el elemento Y le sigue inmediatamente al elemento X. Su sintaxis es:
```
selector_X + selector_Y { /* style; */ }
```
Para el siguiente código HTML:
```
 Nota, esto es una advertencia 
 Leer detenidamente 
```
La siguiente regla sólo afecta a la palabra "advertencia" (la única rodeada por etiquetas que a su vez siguen al grupo de etiquetas <l>):
```
I + B { font-weight: bold; color: red; } 
```
El selector de hijo se usa para crear una regla que solamente se aplica cuando el elemento Y es descendiente del elemento X. La regla no se aplica si Y se encuentra dentro de una o más etiquetas intermediarias. Su sintaxis es:
```
selector_X > selector_Y { /* style; */ }
```
Para el siguiente código HTML:
```
 Nota , esto es una advertencia 
 Leer detenidamente 
```
La siguiente regla sólo afecta al elemento " Nota " (la única rodeada por etiquetas que están a su vez dentro de un grupo de etiquetas ):
```
P > B { font-weight: bold; color: red; } 
```

Propiedades de estilo

Comentarios

Es posible (y se recomienda) documentar las hojas de estilo a través de la incorporación de comentarios que aportan información adicional (una razón para elegir un estilo u otro, el tipo de documento al que se va a aplicar, el contexto, etc.). Los comentarios CSS están marcados con los signos /* y */:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
	<HEAD>
		<STYLE type="text/css">
		<!--
/* Esto es un comentario */
tagA {properties}
tagB {properties}
tagC {properties}
		-->
		</STYLE>
	</HEAD>
<BODY>
...
</BODY>
</HTML>

Un estilo puede aplicarse "en línea" a cualquier etiqueta HTML, exceptuando lo siguiente: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE