saregune CC 2009 CSS
CSS: Instrucciones para modelar visualmente la página web
Con CSS se puede: Determinar: color, fondo, márgenes, rellenos, tipografía, posición, comportamiento
Donde colocamos: En un fichero de estilo (.css) enlazado (link) con la página web.
En HEAD (cabecera) <link rel=”stylesheet” type=”text/css” href= “./estilo.css” />
Evitar uso en: h1 { color: red }
Sintaxis Selector { reglas }. h1 { color:red ; font-weight: bold;}
CSS: COLOR literal inglés: red, black, white.
CSS: Color Hexadecimal: 0.9ABCDEF #rrggbb #FA5000 #rgb #CCC #c #f
Bit: 0-1 Byte: 8bits Kbyte: 1024bytes – C HEXADECIMAL
CSS: Unidades de medida relativas: px100px em1em ex0.5ex %20%
CSS: Unidades de medida absolutas: mm15mm cm1cm pt8pt
CSS: algunas propiedades Color background-color Margin text-align text- transform text-indent
SELECTORES (I) * (universal) etiqueta_HTML #identificador.clase
selector universal: * * { margin: 0 ; padding: 0 } Otros: reset CSS
Selectores html: etiqueta h1 {... } body {.. } ul { } li { }
Selectores identificador: # #cabecera div#cabecera #lista
Selectores clase:..cabecera div.cabecera ul.opciones
Aplicar varios selectores:, h1, h2, h3 { color: red }
No es lo mismo h1, h2, h3 { color: red } que h1 h2 h3 { color: red }
SELECTORES (II) contextual hijo de hermano
àrbol HTML div h1 ul li h2 madre hijo hija descen. hijo
selector contextual: espacio #cabecera li Una etiqueta dentro de otra, afectan a la segunda. #contenido p #contenido h2 #noticia div.cabecera
selector hijo: > #menu > li Una etiqueta dentro de otra y además hija (afecta a la segunda) ul > li ul > li > ul > li
selector hermano: + p + p Una etiqueta seguida de otras y son hermanas, (afecta a la segunda) li + li li + li + li