Descargar la presentación
La descarga está en progreso. Por favor, espere
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) <link rel=”stylesheet” type=”text/css” href= “./estilo.css” />
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
Presentaciones similares
