PDF de programación - css avanzado

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 propiedades diferentes. Este tipo de propiedades se
denominan "propiedades shorthand" y todos los diseñadores web profesionales las utilizan.

La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho más
concisas y por tanto, mucho más fáciles de leer. A continuación s