1. Hojas de estilo en cascada (CSS)

• Introduccin a las hojas de estilos

CSS Cascade Style Sheets

Juan Ignacio Rodrguez de Len

jileon (arroba) parcan.es

2. Qu son las hojas de estilo?

Las hojas de estilo son una forma sencilla de modificar la apariencia de una pgina web cambiando tipografa, colores, fondos, efectos de texto, etc...

3. Ventajas de usar CSS

Consistencia en el estilo de las pginas

Mayor control sobre la apariencia y la disposicin de los elementos

Optimizacin de la descarga

Cdigo HTML ms simple y fcil de mantener

Interaccin con javascript

4. Estructura del CSS

Una hoja de estilos se compone de una serie de reglas ( rules )

Cada regla, a su vez, consiste en un selector y una declaracin

El selector definecuandose debe aplicar la regla

La declaracin consiste en una lista de caractersticas que definen el estilo

5. Ejemplo

h1 {

• color: blue;

• background-color: silver;

• }

El selector es h1: Esta regla slo se aplica a los encabezados de nivel 1

La declaracin define dos caractersticas: Las letras sern azules y el fondo gris plata.

6. Las declaraciones (1)

Las declaraciones consisten en dos valores separados por el caracter dos puntos (:)

La primera parte es el nombre del atributo a modificar

la segunda parte es el valor de dicho atributo

font-size: 12pt;

7. Las declaraciones (2)

La lista de declaraciones debe ir separada por el caracter punto y coma (;)

Si se ponen varios valores y no se separan adecuadamente, la declaracin fallar

Si una declaracin no se refleja en la pgina, lo primero que hay que hacer es mirar si la declaracin anterior termina en punto y coma.

8. Aplicando CSS

Hay tres formas de aplicar hojas de estilo a una pgina:

• En lnea (inline)

• Declaracin interna (Internal)

• Declaracin externa (External)

9. En linea (inline)

Consiste en definir la apariencia de una etiqueta dentro de la misma, usando el atributostyle .

Hola

NO se recomienda este estilo, porque debemos intentar en lo posible separar el contenido de los datos de la presentacin de los mismos.

10. Representacin Interna

Incluyendo las declaraciones de estilo en la seccinheadde la pgina HTML

p { color: navy; }

...

11. Representacin externa

Consiste en enlazar con un archivo externo que incluye las declaraciones de la hoja de estilos.

...

12. Longitudes y porcentajes

Hay una serie de unidades que se pueden usar para expresar una longitud:

• px pixels

• em El ancho que ocupa la m en la fuente actual

• ex La altura de la x en la fuente actual

• pt puntos tipogrficos (1 punto equivale a 1/72 pulgadas)

• cm, mm, in Centmetros, milmetros, pulgadas

• Cuando el valor es 0, no es necesario indicar las unidades

13. Colores

Para especificar colores se pueden usar tres sintxis diferentes:

• Usando los nombres predefinidos de 17 colores:

• • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

• Usando la expresin rgb(r,g,b), donde r, g y b son los componente rojo, verde y azul del color en valores decimales entre 0 y 255

• Usando la expresin #RRGGGG, donde RR, GG y BBson los componente rojo, verde y azul en hexadecimal

14. La propiedad display

Controla la forma de visualizacin de cada elemento, puede tener los siguientes valores:

• none El elemento no se visualizar

• block El elemento se mostrar como un bloque, con un salto de lnea antes y otro despus

• inline El elemento se mostrar como un elemento en lnea, sin saltos antes ni despus

• list-item El elemento forma parte de una lista

15. Posicionamiento

Podemos indicar las posiciones de los elementos de cuatro maneras distintas

• Static

• Relative

• Absolute

• Fixed

16. Posicionamiento con Static

Statices el valor por defecto, posiciona las cosas segn el orden en que estan dispuestas en la pgina HTML

17. Posicionamiento con Relative

Relativees muy parecidad a lastatic , pero podemos desplazar el elemento desde la posicin predeterminada dando valores a los atributosleft ,right ,topybottom .

18. Posicionamiento con Absolute

Absolutenos permite ubicar un elemento de forma absoluta, es decir, indicando su posicin con respecto a la pgina, de nuevo usando los atributosleft ,right ,topybottom .

19. Posicionamiento con Fixed

Fixedes similar aAbsolute , la diferencia es que el elemento quedar fijo en la posicion indicada, aun cuando nos desplazemos por el contenido. Las propiedadesleft ,right ,topybottomse toman en referencia a la ventana del navegador, en vez de a la pgina.

20. Elemento flotantes

Un elemento puede definir un valor del atributofloat , asignadole un valor denone(por defecto),leftoright . En ese caso, el elemento se desplazar en el eje x en la direccin indicada, y el resto de los contenidos de la pgina fluir en el espacio libre que quede

Un uso habitual es posicionar una foto a la derecha, por ejemplo, y que el texto se ajuste por la izquierda.

21. Ejemplo de elemento float