CSS3

Introducció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.