CSS (Cascading Style Sheets, hojas de estilo en cascada) es un lenguaje empleado para establecer el aspecto de un documento de marcas (HTML, XHTML, XML). Con él podemos dar formato y estilo a una página Web y conseguir que sea muy atractiva. CSS3 introduce importantes mejoras con las que es posible crear fácilmente efectos que antes sólo podían hacerse con imágenes o Flash, como por ejemplo: bordes redondeados, sombras, gradientes o animaciones. Esto supone un gran ahorro de tiempo en el desarrollo y mantenimiento de un sitio. La Guía Práctica de CSS3 parte desde cero para enseñarnos cómo definir el estilo o aspecto de los distintos elementos de una página Web. De forma organizada y gradual avanza hasta mostrar algunas de las posibilidades que ofrece CSS3 con un enfoque muy práctico: cómo crear un menú, formularios atractivos, catálogos de elementos, cómo usar sprites o cómo crear una estructura base con cabecera, menú, varias columnas y un pie. Este es el libro perfecto tanto para usuarios principiantes que desean crear fácilmente páginas Web atractivas ahorrando tiempo y trabajo, como para los que con un mayor nivel quieren conocer más detalles, técnicas y novedades sobre CSS3.ÍndiceIntroducción Cómo usar este libro 1. Introducción ¿Qué es CSS? ¿Qué más podemos hacer con CSS? ¿Qué es CSS3? ¿Usar CSS tiene alguna otra ventaja? ¿Qué más debo saber para utilizar CSS? 2. Conceptos básicos de CSS Los navegadores y CSS Concepto de modelo de cajas Primeros pasos con hojas de estilo: CSS en línea Creación de hojas de estilo: CSS interno y CSS externo CSS interno CSS externo ¿Mejor la definición en línea, interna o externa? Selectores id y class 3. Texto Introducción color Valores Ejemplo font-family Valores Ejemplo font-size Valores Ejemplo font-weight Valores Ejemplo font-style Valores Ejemplo font-variant Valores Ejemplo font Valores Ejemplo @font-face Definición Ejemplo text-decoration Valores Ejemplo text-transform Valores Ejemplo letter-spacing Valores Ejemplo word-spacing Valores Ejemplo text-align Valores Ejemplo text-indent Valores Ejemplo line-height Valores Ejemplo white-space Valores Ejemplo text-shadow Valores Ejemplo 4. Fondos Introducción background-color Valores Ejemplo background-image Valores Ejemplo background-repeat Valores Ejemplo background-attachment Valores Ejemplo background-position Valores Ejemplo background-size Valores Ejemplo background-origin Valores background-clip Valores background Valores Ejemplo 5. Enlaces Introducción a:link a:visited a:hover a:active Ejemplo completo outline y cómo eliminar el recuadro del enlace 6. Cursor Introducción cursor Valores Ejemplo 7. Listas Introducción list-style-type Valores list-style-image Valores list-style-position Valores list-style Valores 8. Tablas Introducción CSS en tablas border-collapse Valores Ejemplo caption-side Valores Ejemplo 9. Bordes Introducción border-style Valores Ejemplo border-width Valores Ejemplo border-color Valores Ejemplo border Valores Ejemplo Bordes individuales Ejemplo 10. Márgenes Introducción padding Valores Ejemplo Márgenes internos individuales margin Valores Ejemplo Márgenes externos individuales 11. Dimensiones Introducción width Valores Ejemplo height Valores Ejemplo min-width Valores Ejemplo min-height Valores Ejemplo max-width Valores Ejemplo max-height Valores Ejemplo resize Valores Ejemplo 12. Posición Introducción float Valores Ejemplos position, left, top, right y bottom Valores Ejemplo clip Valores Ejemplo z-index Valores Ejemplo overflow Valores Ejemplo clear Valores Ejemplo 13. Presentación y visibilidad Introducción display Valores Ejemplo visibility Valores Ejemplo opacity Valores Ejemplo 14. Tipos de medios Introducción Tipos de medios Regla @media Atributo media 15. Mejorando el diseño con CSS3 Introducción Transformación: transform Valores Ejemplo 1: rotate Ejemplo 2: scale Ejemplo 3: skew Sombras: box-shadow Valores Ejemplo 1: box-shadow Ejemplo 2: box-shadow y transform:rotate Esquinas redondeadas: border-radius Valores Ejemplo Degradado lineal: linear-gradient Valores Ejemplo 1: gradiente con dos colores Ejemplo 2: gradiente con tres colores 16. Animaciones Introducción Propiedades animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation Regla @keyframes Ejemplo 17. CSS Práctico Introducción Estructura base con dos columnas Estructura base con tres columnas Alineación de elementos Sprites Menú Formulario A. Colores Introducción Nombres de colores Formato RGB Formato hexadecimal B. Unidades Introducción Unidades Ejemplo con unidad em Ejemplo con unidades % y px Otros ejemplos C. Fuentes Introducción Fuentes serif Fuentes sans serif Fuentes monospac Índice alfabético
CSS (Cascading Style Sheets, hojas de estilo en cascada) es un lenguaje empleado para establecer el aspecto de un documento de marcas (HTML, XHTML, XML). Con él podemos dar formato y estilo a una página Web y conseguir que sea muy atractiva. CSS3 introduce importantes mejoras con las que es posible crear fácilmente efectos que antes sólo podían hacerse con imágenes o Flash, como por ejemplo: bordes redondeados, sombras, gradientes o animaciones. Esto supone un gran ahorro de tiempo en el desarrollo y mantenimiento de un sitio. La Guía Práctica de CSS3 parte desde cero para enseñarnos cómo definir el estilo o aspecto de los distintos elementos de una página Web. De forma organizada y gradual avanza hasta mostrar algunas de las posibilidades que ofrece CSS3 con un enfoque muy práctico: cómo crear un menú, formularios atractivos, catálogos de elementos, cómo usar sprites o cómo crear una estructura base con cabecera, menú, varias columnas y un pie. Este es el libro perfecto tanto para usuarios principiantes que desean crear fácilmente páginas Web atractivas ahorrando tiempo y trabajo, como para los que con un mayor nivel quieren conocer más detalles, técnicas y novedades sobre CSS3.ÍndiceIntroducción Cómo usar este libro 1. Introducción ¿Qué es CSS? ¿Qué más podemos hacer con CSS? ¿Qué es CSS3? ¿Usar CSS tiene alguna otra ventaja? ¿Qué más debo saber para utilizar CSS? 2. Conceptos básicos de CSS Los navegadores y CSS Concepto de modelo de cajas Primeros pasos con hojas de estilo: CSS en línea Creación de hojas de estilo: CSS interno y CSS externo CSS interno CSS externo ¿Mejor la definición en línea, interna o externa? Selectores id y class 3. Texto Introducción color Valores Ejemplo font-family Valores Ejemplo font-size Valores Ejemplo font-weight Valores Ejemplo font-style Valores Ejemplo font-variant Valores Ejemplo font Valores Ejemplo @font-face Definición Ejemplo text-decoration Valores Ejemplo text-transform Valores Ejemplo letter-spacing Valores Ejemplo word-spacing Valores Ejemplo text-align Valores Ejemplo text-indent Valores Ejemplo line-height Valores Ejemplo white-space Valores Ejemplo text-shadow Valores Ejemplo 4. Fondos Introducción background-color Valores Ejemplo background-image Valores Ejemplo background-repeat Valores Ejemplo background-attachment Valores Ejemplo background-position Valores Ejemplo background-size Valores Ejemplo background-origin Valores background-clip Valores background Valores Ejemplo 5. Enlaces Introducción a:link a:visited a:hover a:active Ejemplo completo outline y cómo eliminar el recuadro del enlace 6. Cursor Introducción cursor Valores Ejemplo 7. Listas Introducción list-style-type Valores list-style-image Valores list-style-position Valores list-style Valores 8. Tablas Introducción CSS en tablas border-collapse Valores Ejemplo caption-side Valores Ejemplo 9. Bordes Introducción border-style Valores Ejemplo border-width Valores Ejemplo border-color Valores Ejemplo border Valores Ejemplo Bordes individuales Ejemplo 10. Márgenes Introducción padding Valores Ejemplo Márgenes internos individuales margin Valores Ejemplo Márgenes externos individuales 11. Dimensiones Introducción width Valores Ejemplo height Valores Ejemplo min-width Valores Ejemplo min-height Valores Ejemplo max-width Valores Ejemplo max-height Valores Ejemplo resize Valores Ejemplo 12. Posición Introducción float Valores Ejemplos position, left, top, right y bottom Valores Ejemplo clip Valores Ejemplo z-index Valores Ejemplo overflow Valores Ejemplo clear Valores Ejemplo 13. Presentación y visibilidad Introducción display Valores Ejemplo visibility Valores Ejemplo opacity Valores Ejemplo 14. Tipos de medios Introducción Tipos de medios Regla @media Atributo media 15. Mejorando el diseño con CSS3 Introducción Transformación: transform Valores Ejemplo 1: rotate Ejemplo 2: scale Ejemplo 3: skew Sombras: box-shadow Valores Ejemplo 1: box-shadow Ejemplo 2: box-shadow y transform:rotate Esquinas redondeadas: border-radius Valores Ejemplo Degradado lineal: linear-gradient Valores Ejemplo 1: gradiente con dos colores Ejemplo 2: gradiente con tres colores 16. Animaciones Introducción Propiedades animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation Regla @keyframes Ejemplo 17. CSS Práctico Introducción Estructura base con dos columnas Estructura base con tres columnas Alineación de elementos Sprites Menú Formulario A. Colores Introducción Nombres de colores Formato RGB Formato hexadecimal B. Unidades Introducción Unidades Ejemplo con unidad em Ejemplo con unidades % y px Otros ejemplos C. Fuentes Introducción Fuentes serif Fuentes sans serif Fuentes monospac Índice alfabético 