Anuncios

CSS avanzado

image

Capítulo 1: Técnicas imprescindibles
Capítulo 2: Buenas prácticas
Capítulo 3: Selectores
Capítulo 4: Propiedades avanzadas
Capítulo 5: Frameworks
Capítulo 6: Técnicas avanzadas

Descargar libro en PDF

Capítulo 1. Introducción………………………………………………………………………. 7
1.1. ¿Qué es CSS? ……………………………………………………………………………… 7
1.2. Breve historia de CSS ……………………………………………………………………. 7
1.3. Especificación oficial ……………………………………………………………………… 8
1.4. Funcionamiento básico de CSS…………………………………………………………. 8
1.5. Cómo incluir CSS en un documento XHTML…………………………………………. 10
1.5.1. Incluir CSS en el mismo documento HTML ……………………………………..10
1.5.2. Definir CSS en un archivo externo ………………………………………………. 10
1.5.3. Incluir CSS en los elementos HTML ……………………………………………… 11
1.6. Glosario básico …………………………………………………………………………… 12
1.7. Medios CSS ……………………………………………………………………………….. 12
1.8. Comentarios………………………………………………………………………………. 14
1.9. Sintaxis de la definición de cada propiedad CSS ……………………………………15
Capítulo 2. Selectores………………………………………………………………………… 17
2.1. Selectores básicos……………………………………………………………………….. 17
2.1.1. Selector universal ………………………………………………………………….. 17
2.1.2. Selector de tipo o etiqueta………………………………………………………… 17
2.1.3. Selector descendente………………………………………………………………. 19
2.1.4. Selector de clase ……………………………………………………………………. 20
2.1.5. Selectores de ID ……………………………………………………………………. 22
2.1.6. Combinación de selectores básicos ……………………………………………… 23
2.2. Selectores avanzados …………………………………………………………………… 23
2.2.1. Selector de hijos ……………………………………………………………………. 23
2.2.2. Selector adyacente …………………………………………………………………. 24
2.2.3. Selector de atributos ………………………………………………………………. 25
2.3. Agrupación de reglas ……………………………………………………………………. 26
2.4. Herencia …………………………………………………………………………………… 27
2.5. Colisiones de estilos …………………………………………………………………….. 27
Capítulo 3. Unidades de medida y colores …………………………………………….. 29
3.1. Unidades de medida …………………………………………………………………….. 29
3.1.1. Unidades relativas ………………………………………………………………….. 29
3.1.2. Unidades absolutas ………………………………………………………………… 33
3.1.3. Porcentajes ………………………………………………………………………….. 33
3.1.4. Recomendaciones ………………………………………………………………….. 34
3.2. Colores…………………………………………………………………………………….. 35
3.2.1. Palabras clave ………………………………………………………………………. 35
3.2.2. RGB decimal…………………………………………………………………………. 36
3.2.3. RGB porcentual……………………………………………………………………… 36
3.2.4. RGB hexadecimal …………………………………………………………………… 37
3.2.5. Colores del sistema ………………………………………………………………… 38
3.2.6. Colores web safe ……………………………………………………………………. 39
Capítulo 4. Box model ……………………………………………………………………….. 40
4.1. Anchura y altura …………………………………………………………………………. 42
4.1.1. Anchura ………………………………………………………………………………. 42
4.1.2. Altura …………………………………………………………………………………. 43
4.2. Margen y relleno …………………………………………………………………………. 44
4.2.1. Margen ……………………………………………………………………………….. 44
4.2.2. Relleno ……………………………………………………………………………….. 49
4.3. Bordes …………………………………………………………………………………….. 51
4.3.1. Anchura ………………………………………………………………………………. 51
4.3.2. Color ………………………………………………………………………………….. 53
4.3.3. Estilo ………………………………………………………………………………….. 54
4.3.4. Propiedades shorthand…………………………………………………………….. 57
4.4. Margen, relleno, bordes y box model ………………………………………………… 58
4.5. Fondos …………………………………………………………………………………….. 61
Capítulo 5. Posicionamiento y visualización ………………………………………….. 69
5.1. Tipos de elementos ……………………………………………………………………… 69
5.2. Posicionamiento………………………………………………………………………….. 70
5.3. Posicionamiento normal ………………………………………………………………… 71
5.4. Posicionamiento float……………………………………………………………………. 74
5.5. Posicionamiento absoluto ………………………………………………………………. 81
5.6. Visualización ……………………………………………………………………………… 85
5.6.1. Display y visibility ………………………………………………………………….. 85
5.6.2. Overflow ……………………………………………………………………………… 87
5.6.3. Z-index……………………………………………………………………………….. 89
Capítulo 6. Texto ………………………………………………………………………………. 91
6.1. Tipografía …………………………………………………………………………………. 91
6.2. Texto ………………………………………………………………………………………. 97
Capítulo 7. Enlaces ………………………………………………………………………….. 111
7.1. Estilos básicos ………………………………………………………………………….. 111
7.1.1. Tamaño, color y decoración …………………………………………………….. 111
7.1.2. Pseudo-clases ……………………………………………………………………… 111
7.2. Estilos avanzados………………………………………………………………………. 113
7.2.1. Decoración personalizada ……………………………………………………….. 113
7.2.2. Imágenes según el tipo de enlace……………………………………………… 114
7.2.3. Mostrar los enlaces como si fueran botones …………………………………. 115
Capítulo 8. Imágenes ………………………………………………………………………. 116
8.1. Estilos básicos ………………………………………………………………………….. 116
8.1.1. Eliminar el borde de las imágenes con enlaces ……………………………… 116
8.2. Estilos avanzados………………………………………………………………………. 116
8.2.1. Sombra (drop shadow) ………………………………………………………….. 116
Capítulo 9. Listas…………………………………………………………………………….. 119
9.1. Estilos básicos ………………………………………………………………………….. 119
9.1.1. Viñetas personalizadas…………………………………………………………… 119
9.1.2. Menú vertical sencillo…………………………………………………………….. 123
9.1.3. Menú vertical avanzado………………………………………………………….. 126
9.2. Estilos avanzados………………………………………………………………………. 126
9.2.1. Menú horizontal básico…………………………………………………………… 126
9.2.2. Menú horizontal con solapas ……………………………………………………. 130
9.2.3. Menú horizontal avanzado ………………………………………………………. 130
Capítulo 10. Tablas………………………………………………………………………….. 132
10.1. Estilos básicos ………………………………………………………………………… 132
10.2. Estilos avanzados …………………………………………………………………….. 135
Capítulo 11. Formularios ………………………………………………………………….. 140
11.1. Estilos básicos ………………………………………………………………………… 140
11.1.1. Mostrar un botón como un enlace ……………………………………………. 140
11.1.2. Mejoras en los campos de texto………………………………………………. 140
11.1.3. Labels alineadas y formateadas ………………………………………………. 141
11.2. Estilos avanzados …………………………………………………………………….. 145
11.2.1. Formulario en varias columnas ……………………………………………….. 145
11.2.2. Resaltar el campo seleccionado ………………………………………………. 146
Capítulo 12. Layout …………………………………………………………………………. 148
12.1. Estilos básicos ………………………………………………………………………… 148
12.1.1. Centrar una página completa …………………………………………………. 148
12.2. Estructura o layout …………………………………………………………………… 151
12.2.1. Diseño a 2 columnas con cabecera y pie de página ………………………. 151
12.2.2. Diseño a 3 columnas con cabecera y pie de página ………………………. 154
12.3. Alturas/anchuras máximas y mínimas ……………………………………………. 156
12.4. Estilos avanzados …………………………………………………………………….. 113
Capítulo 13. Otros …………………………………………………………………………… 160
13.1. Propiedades shorthand………………………………………………………………. 160
13.2. Versión para imprimir ……………………………………………………………….. 161
13.3. Personalizar el cursor………………………………………………………………… 163
13.4. Hacks y filtros…………………………………………………………………………. 167
13.5. Prioridad de las declaraciones CSS………………………………………………… 168
13.6. Validador ………………………………………………………………………………. 170
13.7. Recomendaciones generales sobre CSS ………………………………………….. 170
13.7.1. Atributos ID y class …………………………………………………………….. 170
13.7.2. CLASSitis y DIVitis………………………………………………………………. 171
13.7.3. Estructuración del código CSS ………………………………………………… 171
13.7.4. División de los estilos en varios archivos CSS ……………………………… 173
Capítulo 14. Recursos útiles ……………………………………………………………… 175
14.1. Extensiones de Firefox ………………………………………………………………. 175
14.1.1. Firebug ……………………………………………………………………………. 175
14.1.2. Web Developer ………………………………………………………………….. 176
14.1.3. HTML Validator…………………………………………………………………… 176
14.1.4. Otras extensiones……………………………………………………………….. 177
14.2. Enlaces de interés ……………………………………………………………………. 179
14.2.1. Recomendación oficial ………………………………………………………….. 179
14.2.2. Recursos ………………………………………………………………………….. 179
14.2.3. Foros ………………………………………………………………………………. 179
14.2.4. Galerías de páginas …………………………………………………………….. 179
Capítulo 15. Ejercicios ……………………………………………………………………… 180
Capítulo 16. Ejercicios resueltos………………………………………………………… 199

Anuncios

Acerca de ArturoMezDa

Ing.Sistemas Computacionales

Publicado el 15 julio, 2010 en Cursos, Desarollo, Diseño, Internet, Manuales, Sin categoría, Tecnologias y etiquetado en , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Guarda el enlace permanente. 1 comentario.

  1. Gracias por el aporte ^^

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: