Selectores, unidades y validador CSS

Ya sabemos que toda regla CSS empieza por un selector. Los selectores seleccionan el cuadro de la página web al que se aplicará formato, y son una de las siguientes tres cosas, o una combinación de las mismas:

- El nombre de un elemento HTML.
- Una ID.
- Una clase (class).

Ya hemos visto una regla como esta:
h2
{
font-size: 130%;
}

El selector más sencillo es el nombre del cuadro al que se aplicará el formato y tambien se le llama selector de tipo, porque selecciona todos los elementos de un determinado tipo.

"VARIOS CUADROS A LA VEZ"
h1,h2
{
font-family:verdana, Arial, Helvetica, sans-serif;
}

Si queremos aplicar un tamaño de letra diferente agregamos una linea adicional:

h1{font-size: 150%}
h2{font-size: 130%}

"TODOS LOS CUADROS DE LA PAGINA: SELECTOR UNIVERSAL"

Se utiliza muy pocas veces, pero existe. Es el asterisco como selector universal, que afecta a todas las cajas.

*
{
padding: 0;
margin: 0;
}

Este ejemplo establece las caracteristicas padding y margin de todos los elementos HTML en null.

Recordatorio

* Una hoja de estilos o stylesheet es una recopilación de patrones de formato.
* Las posibilidades de formato de CSS se pueden dividir en tres grupos:

- Fuentes y colores: formato del contenido de los cuadros.
- Distancias y bordes: formato de los propios cuadros.
- Layout: modificar la posición de los cuadros en la página web.

* El elemento Link vincula un archivo HTML con una hoja de estilos.
* Nociones importantes sobre la sintaxis CSS
- Un selector selecciona a que parte de una página web se aplicará el formato
- Una declaración es una instrucción de formato y se compone de una propiedad y
un valor para la propiedad.

Las propiedades CSS más utilizadas para dar formato a elementos son:

- Color para el color de fuente.
- background-color para el color de fondo.
- font-family para el tipo de fuente.
- font-size para el tamaño de la fuente.

* a{text-decoration:none;} elimina el subrayado de los vinculos
* Para el formato de los distintos estados de los vinculos existen varias pseudoclases en CSS
- a:link y a:visited
- a:hover y a:focus
- a:active

* Para guardar los estilos tenemos tres opciones:
- Un archivo externo CSS.
- En el head.
- En el elemento HTML con el atributo style.

Estilos en tres sitios distintos

Hasta ahora solo conocemos las reglas CSS en una hoja de estilos externa, pero en realidad existen tres posibilidades para guardar reglas CSS.

1.- Reglas CSS en un archivo externo.
2.- En el Head de la página.
3.- Directamente en un elemento HTML: en un atributo style="..."


* Las reglas CSS en un elemento HTML tienen prioridad por encima de las head de una página.

* Las reglas CSS en el head tienen prioridad por encima de las definidas en un archivo externo.

Escribe tanto como te sea posible en un archivo externo CSS y limita al máximo el uso de los estilos en el código fuente HTML.

Formato de los hipervínculos

Aplicar formato a los hipervinculos con CSS es un tema apreciado.

Hipervinculos: el elemento HTML a

Los hipervinculos se definen en el código fuente con el elemento a. CSS permite asignar un nuevo formato a los hipervinculos, eliminando por ejemplo el subrayado característico.

Añade al final la siguiente regla:

a
{
text-decoration: none; {Eliminar subrayado}
}

Esta regla elimina el subrayado de los vínculos.

A muchos diseñadores les encanta este truco, pero siempre es necesario asegurarse de que los hipervinculos se puedan reconocer como tales.

Formato de la dirección

La mayoria de los navegadores representan este elemento en cursiva, pero con la ayuda de CSS no tiene porque ser asi.

address
{
text-align: center; /*centrar*/
font-size: 80%; /*mas pequeño*/
font-style: normal; /*fuente normal no cursiva*/
letter-spacing: 2px; /*Distancia entre letras*/
line-height: 1.5em; /*Distancia entre las lineas*/
}
Ahora ya modificamos el texto de address, centrado, algo mas pequeño que el resto de la pagina 80%, ya no esta en cursiva, la distancia entre letras se ha ampliado a 2 pixeles y la distancia entre las líneas se ha aumentado a una vez y media al tamaño de la fuente.

Style: estructura de una regla CSS

CSS es un lenguaje y todos los lenguajes utilizan un léxico y una gramática.

Selector
{
Propiedad: valor;
Propiedad: valor;
}

Selector.- El selector se coloca antes del par de llaves y determina a que cuadros de la página se aplicará el formato.


Declaración.- Entre el par de llaves se encuentra una ó varias declaraciones. Éstas describen el formato de los elementos a los que afecta el selector. Toda declaración esta formada por una pareja "propiedad:valor" y termina con un punto y coma.

Propiedad.- La propiedad (color, tipo de fuente, etc.) del elemento se coloca antes de los dos puntos. Los espacios en blanco antes y despues de los dos puntos son opcionales.

Valor.- El valor que debe adquirir la propiedad se define despues de los dos puntos. Despues se añade un punto y coma para finalizar la declaración.

Los terminos style, estilo, regla CSS, instrucción de formato y padron de formato suelen utilizarce como sinónimos. Algunos autores tambien lo llaman "regla de estilo".

Tamaño de fuente de los titulos

Todos los elementos han adquirido un tamaño de fuente a excepcion de los titulos. Los navegadores creen que los titulos deben ser mas grandes que el texto normal, y puesto que todavia no hemos definido nada para el titulo, todavia se aplica el formato de la hoja de estilos integrada en el navegador.

Definiremos el tamaño para titulos de primer y segundo nivel:

1.- Añade las siguientes lineas al final de la stylesheet:

h1 {font-size: 150%;}
h2 {font-size: 130%;}

2.- Guarda la hoja de estilos y prueba.

La indicación porcentual nos permite mantener la relación de tamaños entre texto y títulos cuando cambiemos el tamaño de fuente de body.