1 saregune CC 2009 CSS

2 CSS: Instrucciones para modelar visualmente la página web

3 Con CSS se puede: Determinar: color, fondo, márgenes, rellenos, tipografía, posición, comportamiento

4 Donde colocamos: En un fichero de estilo (.css) enlazado (link) con la página web.

5 En HEAD (cabecera)

6 Evitar uso en: h1 { color: red }

7 Sintaxis Selector { reglas }. h1 { color:red ; font-weight: bold;}

8 CSS: COLOR literal inglés: red, black, white. http://es.wikipedia.org/wiki/Colores_HTML

9 CSS: Color Hexadecimal: 0.9ABCDEF #rrggbb #FA5000 #rgb #CCC #c #f http://es.wikipedia.org/wiki/Colores_HTML

10 Bit: 0-1 Byte: 8bits Kbyte: 1024bytes 11000001 – C1 - 193 HEXADECIMAL

11 CSS: Unidades de medida relativas: px100px em1em ex0.5ex %20%

12 CSS: Unidades de medida absolutas: mm15mm cm1cm pt8pt

13 CSS: algunas propiedades Color background-color Margin text-align text- transform text-indent

14 SELECTORES (I) * (universal) etiqueta_HTML #identificador.clase

15 selector universal: * * { margin: 0 ; padding: 0 } Otros: reset CSS http://meyerweb.com/eric/tools/css/reset/

16 Selectores html: etiqueta h1 {... } body {.. } ul { } li { }

17 Selectores identificador: # #cabecera div#cabecera #lista

18 Selectores clase:..cabecera div.cabecera ul.opciones

19 Aplicar varios selectores:, h1, h2, h3 { color: red }

20 No es lo mismo h1, h2, h3 { color: red } que h1 h2 h3 { color: red }

21 SELECTORES (II) contextual hijo de hermano

22 àrbol HTML div h1 ul li h2 madre hijo hija descen. hijo

23 selector contextual: espacio #cabecera li Una etiqueta dentro de otra, afectan a la segunda. #contenido p #contenido h2 #noticia div.cabecera

24 selector hijo: > #menu > li Una etiqueta dentro de otra y además hija (afecta a la segunda) ul > li ul > li > ul > li

25 selector hermano: + p + p Una etiqueta seguida de otras y son hermanas, (afecta a la segunda) li + li li + li + li