Cascading Style Sheets

Mejorar el impacto que las páginas web producen en el cliente es objetivo esencial de los diseñadores de todo el mundo. Las hojas de estilo en cascada (Cascading Style Sheets, CSS), permiten desarrollar la creatividad en el diseño con una intuición sin precedentes.

Las CSS constituyen un mecanismo para asociar estilos de composición a documentos estructurados, del tipo HTML o XML. Aplicables a cualquier navegador, admiten un mayor control sobre los distintos elementos de una página, permitiendo definir el estilo de las fuentes, el color, el espaciado del texto, la posición del contenido, e incluso variaciones en el sonido en los elementos auditivos. Estos estilos pueden definirse para luego ser aplicados al código de cualquier documento.

Los diseñadores han encontrado una herramienta con ventajas para mejorar su trabajo, donde destacan la posibilidad de acceder a las propiedades de los objetos de manera dinámica, y el hecho de poder modificar elementos a los que antes no se tenía acceso, como son las barras de desplazamiento del navegador, los elementos de formulario o el mismo puntero del ratón.

Este libro explica con claridad este lenguaje de hojas de estilo, con el que alcanzará una comunicación más ordenada, útil y eficiente.

Sobre los autores
Owen Briggs
Steven Champeon
Eric Costello
Matt Patterson

Introducción
¿A quién va dirigido este libro?
¿Qué necesito para empezar?
Lorem Ipsum
Convenciones de estilo
Códigos de ejemplo

Parte I. CSS y XHTML: visión de conjunto

1. Conceptos básicos
Introducción
Breve historia de la Web
¿Cuál es el origen del HTML?
¿Qué le pasó al HTML?
Inaccesibilidad
Resultado degradado
Excesivo trabajo de producción
Introducción a las hojas de estilo en cascada (CSS)
El nacimiento de CSS
¿Qué es CSS?
La separación de estructura y presentación
Accesibilidad
Resultado mejorado
Disminución del trabajo de producción
Resumen

2. Introducción a la presentación
Introducción
Presentación
Identificar la lógica de la presentación
Identificar componentes de documento
Aplicar la presentación a los componentes del documento
Optimizar la presentación
Resumen

3. Código con significado
Introducción
Los orígenes del código semántico
Vocabularios
Definir su tipo de documento
Incorporar estructuras arbitrarias de documento en XHTML
Análisis del documento
Tipos de documentos bien definidos
Análisis del documento de arriba a abajo
Análisis del documento de abajo a arriba
Elegir una convención de nombre
Integrar la estructura con la lógica de presentación
Resumen

Parte II. Escribir páginas CSS y XHTML

4. Fundamentos
Introducción
Bloque y en línea
Herencia y Cascada
Herencia
Cascada
Invalidar estilos de autor
Prioridad de hoja de estilo
El modelo de cuadro
Resumen

5. Reglas
Introducción
Estructura de una regla
Formas abreviadas
Valores
Color
Tamaño
Selectores
Selección contextual
Selector descendiente
Selector hijo
Selector hermano adyacente
Selectores de atributo
Selectores de clase
Selectores ID
Pseudo-clases y pseudo-elementos
Pseudo-clases
Pseudo-clases de primer hijo
Pseudo-clases de vínculo
Pseudo-elementos
Pseudo-elementos de primera línea
Pseudo-elementos de primera letra
Resumen

6. Anexar CSS a su código
Introducción
Estilos en línea
Hojas de estilo incorporadas
Pros y contras de las hojas de estilo incorporadas
Hojas de estilo externas
El elemento
La directiva @import
Hojas de estilo alternativas, persistentes y preferidas
Resumen

7. Tipografía
Introducción
¿Qué es tipografía?
Tipografía en la Web
Fundamentos tipográficos
Especificar fuentes
font-family
font-size
line-height
font-weight
font-style
text-decoration
La propiedad font: abreviada
Color y tipo
Medida
Influir en los saltos de línea
Bloques de tipo
Párrafos en texto continuo
El espacio entre bloques
¿Por encima o debajo?
Cabeceras
Listas
Problemas con Netscape 4
Cuadros en línea
Formatear vínculos
El estado por defecto del vínculo
El estado visited
El estado active
El estado hover
Otras posibilidades de vínculo
Texto superior e inferior
Unidades relativas: describir la relación entre elementos
Aspectos prácticos
Resumen

8. Cuadros, cuadros, cuadros
Introducción
Flujo
Posición relativa
Posición absoluta
Posición fija
Float
Índice z
Conjuntos de cuadros
Centrado
Dos filas
Dos columnas
Tres columnas
Tres columnas más fila superior
Tres columnas más filas superior e inferior
Anidado
Inferior de nuevo
Imágenes de fondo
En marcha
Resumen

Parte III. El mundo real

9. CSS multi-navegador
Introducción
Más allá de los grandes
@import
Aviso de actualización
Cascada
La hoja de estilo básica
Herencia
Color de fondo
Bordes
Información de posicionamiento
Imagen de fondo
Más
El inconformismo del trío
Problemas comunes
Modelo de cuadro
Barra de desplazamiento
Overflow
whitespace
Instante de contenido sin estilo
Imagen de fondo
Problemas específicos de presentación
Centrar con Opera
Centrar con IE
Netscape y margen superior
Cuadros flotantes y Explorer
Problemas relacionados con el contenido
Por ejemplo
¿Qué sucede?
¿Qué hacer?
Cuando no existen márgenes de cuadro
¿Es todo?
Resumen
Y por último

10. Solución de problemas
Introducción
El hardware
Utopía
Menos que utopía
El independiente poco reconocido
El software
Validador W3C
Su navegador
Una regla
La materia gris
Encontrar el problema
Etapa 1: estructura de presentación
Etapa 2: Añadir márgenes, relleno y bordes refinados
Etapa 3: Añadir contenido real
Ajustar el problema
Un cuento aleccionador
Resumen

Parte IV. Proyectos CSS

11. Proyecto: La galería
El código
Las hojas de estilo
Resumen

12. Proyecto: El registro personal
El código
Las hojas de estilo
Resumen

13. Proyecto: La tienda online
El código
Las hojas de estilo
Resumen

Índice alfabético