www. librosweb .es avanzado Javier Eguíluz Pérez CSS avanzado Sobre este libro... ▪ Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento - No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/ 3.0/deed.es) ▪ Esta versión impresa se creó el 2 de enero de 2009 y todavía está incompleta. La versión más actualizada de los contenidos de este libro se puede encontrar en http://www.librosweb.es/css_avanzado ▪ Si quieres aportar sugerencias, comentarios, críticas o informar sobre errores, puedes enviarnos un mensaje a [email protected] www.librosweb.es 2 CSS avanzado Capítulo 1. Técnicas imprescindibles .......................................................................................................... 5 1.1. Propiedades shorthand ........................................................................................................................... 5 1.2. La propiedad hasLayout de Internet Explorer ......................................................................................... 7 1.3. Limpiar floats ........................................................................................................................................... 9 1.4. Elementos de la misma altura ............................................................................................................... 13 1.5. Sombras................................................................................................................................................. 15 1.6. Transparencias....................................................................................................................................... 19 1.7. Sustitución de texto por imágenes ........................................................................................................ 21 1.8. Sustitución de texto por Flash ............................................................................................................... 24 1.9. Esquinas redondeadas........................................................................................................................... 27 1.10. Rollovers y sprites................................................................................................................................ 31 1.11. Texto.................................................................................................................................................... 38 Capítulo 2. Buenas prácticas......................................................................................................................42 2.1. Inicializar los estilos ............................................................................................................................... 42 2.2. Comprobar el diseño en varios navegadores ........................................................................................ 45 2.3. Mejora progresiva ................................................................................................................................. 47 2.4. Depuración ............................................................................................................................................ 51 2.5. Hojas de estilos...................................................................................................................................... 57 2.6. Rendimiento .......................................................................................................................................... 62 2.7. Recursos imprescindibles ...................................................................................................................... 63 Capítulo 3. Selectores................................................................................................................................65 3.1. Selector de hijos .................................................................................................................................... 65 3.2. Selector adyacente ................................................................................................................................ 66 3.3. Selector de atributos ............................................................................................................................. 67 3.4. Pseudo-clases ........................................................................................................................................ 68 3.5. Pseudo-elementos................................................................................................................................. 71 3.6. Selectores de CSS 3................................................................................................................................ 73 Capítulo 4. Propiedades avanzadas ...........................................................................................................76 4.1. Propiedad white-space.......................................................................................................................... 76 4.2. Propiedad display .................................................................................................................................. 80 4.3. Propiedad outline .................................................................................................................................. 88 4.4. Propiedad quotes .................................................................................................................................. 91 4.5. Propiedad counter-reset ....................................................................................................................... 95 4.6. Propiedad counter-increment ............................................................................................................. 100 4.7. Propiedad content............................................................................................................................... 104 Capítulo 5. Frameworks...........................................................................................................................111 5.1. El framework YUI ................................................................................................................................. 111 5.2. Primeros pasos con el framework YUI................................................................................................. 112 5.3. Inicializando estilos con el framework YUI .......................................................................................... 115 5.4. Texto con el framework YUI ................................................................................................................ 117 5.5. Layouts con el framework YUI ............................................................................................................. 119 5.6. Otros frameworks................................................................................................................................ 129 www.librosweb.es 3 CSS avanzado Capítulo 6. Técnicas avanzadas................................................................................................................130 6.1. Imágenes embebidas........................................................................................................................... 130 6.2. Mapas de imagen ................................................................................................................................ 132 6.3. Variables en las hojas de estilos .......................................................................................................... 137 6.4. Estilos alternativos............................................................................................................................... 142 6.5. Comentarios condicionales, filtros y hacks.......................................................................................... 145 6.6. Selector de navegador......................................................................................................................... 149 www.librosweb.es 4 CSS avanzado Capítulo 1. Técnicas imprescindibles Capítulo 1. Técnicas imprescindibles El estándar CSS 2.1 incluye más de 100 propiedades de todo tipo para diseñar el aspecto de las páginas HTML. No obstante, los diseños web más actuales muestran recursos gráficos que no se pueden realizar con CSS, como sombras, transparencias, esquinas redondeadas y tipografía avanzada. Por ese motivo, es preciso que los diseñadores web profesionales conozcan las técnicas imprescindibles para crear diseños web avanzados. En las próximas secciones se muestran las siguientes técnicas imprescindibles: ▪ Propiedades shorthand para crear hojas de estilos concisas. ▪ La propiedad hasLayout de Internet Explorer, imprescindible para solucionar muchos errores de ese navegador. ▪ Limpiar floats, para trabajar correctamente con los elementos posicionados de forma flotante. ▪ Cómo crear elementos de la misma altura, imprescindible para el layout o estructura de las páginas. ▪ Sombras, transparencias y esquinas redondeadas, que no se pueden crear con CSS 2.1. ▪ Sustitución de texto por imágenes y por Flash, para utilizar cualquier tipografía en el diseño de las páginas. ▪ Rollovers y sprites CSS para mejorar el tiempo de respuesta de las páginas. ▪ Técnicas para trabajar con el texto y la tipografía. 1.1. Propiedades shorthand Algunas propiedades del estándar CSS 2.1 son especiales, ya que permiten establecer simultáneamente el valor de varias