Introduccion Css – [PDF Document]

Captulo 1. Introduccin………………………………………………………………………. 7

1.1. Qu es CSS?……………………………………………………………………………… 71.2. Breve historia de CSS……………………………………………………………………. 71.3. Especificacin oficial ……………………………………………………………………… 81.4. Funcionamiento bsico de CSS…………………………………………………………. 81.5. Cmo incluir CSS en un documento XHTML………………………………………….10

1.5.1. Incluir CSS en el mismo documento HTML ……………………………………..101.5.2. Definir CSS en un archivo externo ……………………………………………….101.5.3. Incluir CSS en los elementos HTML ………………………………………………11

1.6. Glosario bsico ……………………………………………………………………………121.7. Medios CSS………………………………………………………………………………..121.8. Comentarios……………………………………………………………………………….141.9. Sintaxis de la definicin de cada propiedad CSS ……………………………………15

Captulo 2. Selectores………………………………………………………………………… 17

2.1. Selectores bsicos………………………………………………………………………..172.1.1. Selector universal …………………………………………………………………..172.1.2. Selector de tipo o etiqueta…………………………………………………………172.1.3. Selector descendente……………………………………………………………….192.1.4. Selector de clase…………………………………………………………………….202.1.5. Selectores de ID …………………………………………………………………….222.1.6. Combinacin de selectores bsicos ………………………………………………23

2.2. Selectores avanzados ……………………………………………………………………232.2.1. Selector de hijos …………………………………………………………………….232.2.2. Selector adyacente………………………………………………………………….242.2.3. Selector de atributos ……………………………………………………………….25

2.3. Agrupacin de reglas …………………………………………………………………….262.4. Herencia ……………………………………………………………………………………272.5. Colisiones de estilos ……………………………………………………………………..27

Captulo 3. Unidades de medida y colores …………………………………………….. 29

3.1. Unidades de medida ……………………………………………………………………..293.1.1. Unidades relativas …………………………………………………………………..293.1.2. Unidades absolutas …………………………………………………………………333.1.3. Porcentajes …………………………………………………………………………..333.1.4. Recomendaciones …………………………………………………………………..34

3.2. Colores……………………………………………………………………………………..353.2.1. Palabras clave ……………………………………………………………………….353.2.2. RGB decimal………………………………………………………………………….363.2.3. RGB porcentual………………………………………………………………………363.2.4. RGB hexadecimal ……………………………………………………………………373.2.5. Colores del sistema …………………………………………………………………383.2.6. Colores web safe…………………………………………………………………….39

Captulo 4. Box model ……………………………………………………………………….. 40

Introduccin a CSS

www.librosweb.es 3

4.1. Anchura y altura ………………………………………………………………………….424.1.1. Anchura ……………………………………………………………………………….424.1.2. Altura ………………………………………………………………………………….43

4.2. Margen y relleno………………………………………………………………………….444.2.1. Margen ………………………………………………………………………………..444.2.2. Relleno ………………………………………………………………………………..49

4.3. Bordes ……………………………………………………………………………………..514.3.1. Anchura ……………………………………………………………………………….514.3.2. Color …………………………………………………………………………………..534.3.3. Estilo…………………………………………………………………………………..544.3.4. Propiedades shorthand……………………………………………………………..57

4.4. Margen, relleno, bordes y box model …………………………………………………584.5. Fondos ……………………………………………………………………………………..61

Captulo 5. Posicionamiento y visualizacin ………………………………………….. 69

5.1. Tipos de elementos ………………………………………………………………………695.2. Posicionamiento…………………………………………………………………………..705.3. Posicionamiento normal …………………………………………………………………715.4. Posicionamiento float…………………………………………………………………….745.5. Posicionamiento absoluto ……………………………………………………………….815.6. Visualizacin ………………………………………………………………………………85

5.6.1. Display y visibility …………………………………………………………………..855.6.2. Overflow ………………………………………………………………………………875.6.3. Z-index………………………………………………………………………………..89

Captulo 6. Texto ………………………………………………………………………………. 91

6.1. Tipografa ………………………………………………………………………………….916.2. Texto ……………………………………………………………………………………….97

Captulo 7. Enlaces ………………………………………………………………………….. 111

7.1. Estilos bsicos ………………………………………………………………………….. 1117.1.1. Tamao, color y decoracin …………………………………………………….. 1117.1.2. Pseudo-clases……………………………………………………………………… 111

7.2. Estilos avanzados………………………………………………………………………. 1137.2.1. Decoracin personalizada ……………………………………………………….. 1137.2.2. Imgenes segn el tipo de enlace……………………………………………… 1147.2.3. Mostrar los enlaces como si fueran botones …………………………………. 115

Captulo 8. Imgenes ………………………………………………………………………. 116

8.1. Estilos bsicos ………………………………………………………………………….. 1168.1.1. Eliminar el borde de las imgenes con enlaces ……………………………… 116

8.2. Estilos avanzados………………………………………………………………………. 1168.2.1. Sombra (drop shadow) ………………………………………………………….. 116

Captulo 9. Listas…………………………………………………………………………….. 119

9.1. Estilos bsicos ………………………………………………………………………….. 1199.1.1. Vietas personalizadas…………………………………………………………… 119

Introduccin a CSS

www.librosweb.es 4