CSS rápido (Parte 2)

Las palabras sirven para comunicar ideas, para que entendamos de lo que estamos hablando. El CSS tiene su propio lenguaje y no hace daño darle una mirada para tratar de familiarizarse con cierta terminología pseudo-tecnológica.

Selectores:

El selector es el elemento que está conectado a un estilo particular. Cualquier elemento HTML es un posible selector CSS. Por ejemplo, en:

P { text-indent: 3em }

el selector es P

Selectores de clase:

Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos.

B.ejemplo1 { color:#191970 }
B.ejemplo2  { color: red }

En el ejemplo de arriba se han creado dos clases, ejemplo1 y ejemplo2 para usar con el elemento B de HTML.

El atributo CLASS se usa para indicar la clase de un elemento, por ejemplo:

<P CLASS=advertencia>
  Solo se permite una clase por selector.
  Por ejemplo, B.ejemplo1.ejemplo2 no es válida.
</P>

Las clases también pueden ser declaradas sin elementos asociados:

.ejemplo3 { font-size: small }

en este caso, la clase ejemplo3 puede usarse con cualquier elemento

Selectores ID:

Los selectores ID son asignados individualmente con el propósito de una definición por elemento. Un selector ID se asigna mediante el uso del indicador # para preceder un nombre. Por ejemplo:

#ejemplo4 { text-indent: 3em }

esto sería referenciado en HTML por el atributo ID:

<P ID="ejemplo4">Texto con sangría 3em</P>

Selectores de contexto:

Los selectores de contexto son cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y 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 y, por ejemplo, el texto con énfasis en otro tag no sería afectado.

Propiedades y valores:

Se asigna una propiedad a un selector a fin de manipular su estilo. En la siguiente declaración:

P { color: yellow; margin-left:20px }

color y margin-left son las propiedades.

El valor de declaración es la asignación que recibe la propiedad. En el siguiente ejemplo:

P { color: aqua }

la propiedad color recibe el valor aqua.

Agrupamiento:

A fin de disminuir declaraciones repetitivas 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:

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

Si definimos un color para el BODY este color también será aplicado al texto de los párrafos.

Comentarios:

Los comentarios se indican dentro de hojas de estilo con colocándolos entre /* y */. Una muestra de comentario tendría el siguiente formato:

P { color: aqua } /* color de los párrafos */

Pseudo-clases y pseudo-elementos:

Las pseudo-clases y los pseudo-elementos son clases y elementos especiales reconocidos automáticamente por los navegadores que soportan CSS.

Las pseudo-clases distinguen entre los diferentes tipos de elementos (por ejemplo, los enlaces visitados y los enlaces activos se pueden representar como dos tipos diferentes). Los pseudo-elementos se refieren a subpartes de elementos, como la primera letra de un párrafo.

Las reglas con pseudo-clases o pseudo-elementos tiene este tipo de sintaxis:

Selector:PseudoClaseElemento { propiedad: valor }

o bien :

Selector.NombreClase:PseudoClaseElemento { propiedad: valor }

Pseudo-clases Anchor:

Las pseudo-clases puede asignarse al elemento A para mostrar enlaces, enlaces visitados y enlaces activos en forma diferente:

A:link { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

Peudo-elemento First-Line:

Con frecuencia, la primera línea de texto de un artículo se muestra en negrita y con todas las letras en mayúsculas. CSS ha incluido esta capacidad como un peudo-elemento.

Un pseudo-elemento first-line puede usarse en cualquier elemento de bloque como P, H1, etc:

P:first-line { font-variant: small-caps; font-weight: bold }

Pseudo-elemento First Letter:

El pseudo-elemento first-letter se emplea para crear letras iniciales y otros efectos. La primera letra de texto dentro de un selector asignado se representará de acuerdo al valor asignado. Por ejemplo:

P:first-letter { font-size: 300%; float: left }

crearía una letra inicial tres veces mayor que el tamaño normal de fuente.