M.I. CSS

Agradecimientos

Sobre el autor

Prólogo

Introducción
El sueño del viejo maquetador: De las tablas al diseño flexible
CSS, la reivindicación de un estándar para dar estilo a la Web
¿Por qué CSS? Entrevista con Håkon Wium Lie
Los navegadores, el duelo de titanes por las reglas CSS
Entrevista con Arun Ranganathan, impulsor de estándares Web en Mozilla Corporation
Entrevista con David Salgado, developer evangelist de Microsoft Ibérica
La W3C y las diferentes normas

Cómo usar este libro
A quién va dirigido el libro
Estructura del libro
Un apunte sobre la forma de escribir código CSS
Herramientas y consejos

Capítulo 1. Los primeros pasos
¿Qué son las hojas de estilo en cascada?
¿Por qué utilizar CSS?
Herencia y cascada
Herencia
Interrumpir la herencia
Cascada
Utilizar CSS en un documento
Sintaxis de un estilo CSS básico
La importancia de un código limpio y bien estructurado
El uso de comentarios

Capítulo 2. Diferentes estilos CSS para diferentes medios
Cómo usar dos o más hojas de estilo en un mismo documento
Aplicar dos hojas de estilo a un mismo documento, un ejemplo práctico

Capítulo 3. Uso de selectores para aplicar estilos
Un amplio abanico de selectores
Los selectores básicos
Selectores universales
Selectores de etiqueta o selectores tipo
Selectores de clase
Selectores ID
Los selectores avanzados
Selectores descendentes
Selectores hijo
Selectores adyacentes
Selectores de atributos
Agrupación de declaraciones y reglas
Pseudo-elementos
Pseudo-clases

Capítulo 4. Medidas y colores
Las medidas
Unidades de medida absolutas
Pulgadas (in)
Centímetros (cm)
Milímetros (mm)
Puntos (pt)
Picas (pc)
Unidades de medida relativas
Píxeles (px)
EM
EX
Unidades de medida porcentuales
El uso del color
Palabras clave
Valores RGB hexadecimales
Valores RGB Decimales
Valores RGB porcentuales
Uso de Colorschemer Studio

Capítulo 5. El modelo de caja
Si quieres diseñar, en una caja has de confiar
Cuidado con Internet Explorer
Propiedades del modelo caja
Width
Height
Margin
Padding
Border
Outline
Background

Capítulo 6. Posicionamiento y visualización con CSS
Elementos a nivel de bloque y elementos a nivel de línea
Propiedades de posicionamiento
Posicionamiento estático (static)
Posicionamiento relativo (relative)
Posicionamiento absoluto (absolute)
Posicionamiento fijo (fixed)
Posicionamiento flotante (float)
Propiedades de visualización
Display
Visibility
Overflow
Z-index
Clip
White-space

Capítulo 7. Tomando el control de la tipografía y los textos
Seleccionando la mejor tipografía
Trucos para utilizar otras fuentes tipográficas
Método sIFR
La tipografía
Color
Font-family
Font-size
Font-style
Font-variant
Font-weight
Letter-spacing
Los textos
Direction
Line-height
Text-align
Text-decoration
Text-indent
Text-transform
Unicode-bidi
Vertical-align
Word-spacing
Otras propiedades de texto más sofisticadas
First-letter
First-line
Resaltando textos como si utilizara un marcador fluorescente
Aplicando sombras a los textos
Aplicando gradientes a los titulares

Capítulo 8. Tratamiento de vínculos
Cambiar las propiedades básicas de los vínculos
Cambiar las propiedades avanzadas de los vínculos
Colocar un icono al final de un vínculo
Crear un menú con vínculos rollover

Capítulo 9. Aplicar estilos a las imágenes
Estilos básicos a aplicar a las imágenes
Eliminar el borde de una imagen cuando actúe de enlace
Crear marcos fotográficos a las imágenes
Imágenes de fondo
Aplicar un gradiente repetido en el eje x
Aplicar dos imágenes de fondo al documento
Sobreimprimir información a una imagen

Capítulo 10. Dar estilo a las listas
Las listas en HTML
Propiedades de lista
List-style-type
List-image
List-position
Crear divisores de línea entre elementos de lista
Convertir una lista en un menú horizontal

Capítulo 11. Las tablas, esas viejas olvidadas
Nociones básicas de creación de tablas en HTML
Dando formato a la tabla
Bordes de las tablas
Estilos dentro de celdas de tabla y de filas de tabla
Efectos de resaltado sobre celdas
Modificando las propiedades de la leyenda de tabla
Ocultar las celdas vacías

Capítulo 12. Diseñando la página
Diseño fijo de una columna con cabecero, menú, contenido y faldón
Mezcla de diseño fijo y fluido de una columna con cabecero, contenido y faldón
Diseño a tres columnas con cabecero y pie
Centrar un layout en la ventana del navegador

Capítulo 13. Construir una Web real con la ayuda de CSS
La etapa del diseño gráfico: El karma
Creación de la estructura en HTML
Creación de los estilos CSS
El fondo (background) del proyecto
El envoltorio
Letras semitransparentes
El bloque de los contenidos
La primera línea de contenidos
La segunda línea de contenidos
La tercera línea de contenidos
La cuarta línea de contenidos
Las letras invertidas
La imagen de la novia en posición absoluta

Capítulo 14. Diseñar la Web de un organismo público con CSS y Server Side Includes
El proyecto
La estructura
Server Side Includes
El diseño con Photoshop
La programación del proyecto
El fondo del proyecto
El contenedor de contenedores
El cabecero
La pestaña informativa superior con la fecha
El logotipo y las pestañas de servicios
La foto principal y el menú vertical
El área de noticias y el lateral derecho, la información
El faldón

Apéndice
Recursos Web sobre CSS
Webs realizadas con CSS seleccionadas por el autor
Aplicaciones para el diseño con hojas de estilo

Índice alfabético

Las hojas de estilo en cascada se han convertido en un recurso imprescindible en el diseño Web. Entre sus principales virtudes se encuentra la reducción del peso global de una página Web, su independencia con respecto al código, y su flexibilidad para aportar estilos para diferentes medios, como pantallas de ordenador, dispositivos móviles, impresoras o dispositivos de Braille, entre otros.

Este Manual Imprescindible enseña los conocimientos básicos sobre CSS. Con la ayuda y opiniones de importantes especialistas se realiza un viaje por el interior de las hojas de estilo en cascada, su estructura, marcado, integración y uso en documentos HTML o XHTML. Aprenderá a organizar el marcado a la hora de diseñar, a transformar un diseño creado con un editor gráfico como Photoshop en una hoja de estilos limpia y preparada, y a completar la transición de la vieja filosofía de trabajo con tablas HTML al nuevo modelo de caja.

En este libro han colaborado el estadounidense Christopher Schmitt, reconocido autor de libros sobre CSS; Aravind Ajith, programador y diseñador freelance afincado en Bangalore, India, o el padre de las hojas de estilo en cascada, el noruego Hakon Wium Lie, que responde a interesantes preguntas planteadas por el autor sobre el futuro de CSS. También han participado los principales evangelistas sobre hojas de estilo en cascada de Mozilla Firefox y Microsoft Internet Explorer.