Introducción
Audiencia
Suposiciones que hace este libro
Contenido de este libro
Convenciones utilizadas en este libro
Código fuente
Capítulo 1. General
Introducción
Utilizar CSS con HTML
Problema
Solución
Explicación
Utilizar diferentes selectores para aplicar estilos
Problema
Solución
Explicación
Selectores de tipo
Selectores de clase
Selectores ID
Selectores descendientes
Selectores hijo
Selectores universales
Selectores hermano adyacentes
Selectores atributo
Pseudo-clases
Pseudo-elementos
Determinar cuándo utilizar clases y selectores ID
Problema
Solución
Explicación
Entender las propiedades CSS
Problema
Solución
Explicación
Entender el modelo caja
Problema
Solución
Explicación
Entender DOCTYPES y efectos en diseño de navegador
Problema
Solución
Explicación
Asociar estilos a una página Web
Problema
Solución
Explicación
Cuándo utilizar estilos en línea
Cuándo utilizar hojas de estilo internas
Cómo utilizar diferentes tipos de hojas de estilo
Problema
Solución
Explicación
Añadir comentarios dentro de CSS
Problema
Solución
Explicación
Organizar los contenidos de una hoja de estilo
Problema
Solución
Explicación
Organizar archivos de hoja de estilo
Problema
Solución
Explicación
Trabajar con propiedades abreviadas
Problema
Solución
Explicación
Establecer una hoja de estilo alternativa
Problema
Solución
Explicación
Utilizar flotantes con imágenes
Problema
Solución
Explicación
Utilizar posicionamiento absoluto
Problema
Solución
Explicación
Utilizar posicionamiento relativo
Problema
Solución
Explicación
Utilizar CSS en Adobe Dreamweaver
Problema
Solución
Explicación
Utilizar CSS en Microsoft Expression Web Designer
Problema
Solución
Explicación
Capítulo 2. Tipografía Web
Introducción
Especificar fuentes
Problema
Solución
Explicación
Especificar medidas y tamaños de fuente
Problema
Solución
Explicación
Unidades de longitud
Unidades relativas
Establecer el tamaño de fuentes en cero o un valor negativo
Adquirir más control sobre el tamaño de fuente
Problema
Solución
Explicación
Utilizar píxeles
Accesibilidad y tipografía Web
Utilizar palabras clave de fuente
Utilizar unidades em para controlar el tipo de letra
Forzar los tamaños de fuente
Problema
Solución
Explicación
Centrar texto
Problema
Solución
Explicación
Configurar texto para que esté justificado
Problema
Solución
Explicación
Eliminar espacio entre encabezados y párrafos
Problema
Solución
Explicación
Establecer una sencilla mayúscula inicial
Problema
Solución
Explicación
Establecer una mayúscula inicial centrada y más grande
Problema
Solución
Explicación
Establecer una mayúscula inicial con decoración (imagen)
Problema
Solución
Explicación
Crear un encabezado con texto con estilo
Problema
Solución
Explicación
Crear un encabezado con texto con estilo y bordes
Problema
Solución
Explicación
Aplicar estilo a un encabezado con texto y una imagen
Problema
Solución
Explicación
Crear una cita con texto HTML
Problema
Solución
Explicación
Crear una cita con bordes
Problema
Solución
Explicación
Crear citas con imágenes
Problema
Solución
Explicación
Establecer la sangría en la primera línea de un párrafo
Problema
Solución
Explicación
Establecer la sangría de párrafos enteros
Problema
Solución
Explicación
Crear una sangría colgante
Problema
Solución
Explicación
Sangrías colgantes seguras
La sangría colgante emparejada
Aplicar estilo a la primera línea de un párrafo
Problema
Solución
Explicación
Aplicar estilo a la primera línea de un párrafo con una imagen
Problema
Solución
Explicación
Crear un efecto de texto resaltado
Problema
Solución
Explicación
Cambiar el espaciado de línea
Problema
Solución
Explicación
Añadir un tratamiento gráfico a texto HTML
Problema
Solución
Explicación
Situar sombra detrás del texto
Problema
Solución
Explicación
Ajustar el espaciado entre letras y palabras
Problema
Solución
Explicación
Capítulo 3. Imágenes
Introducción
Poner un borde alrededor de una imagen
Problema
Solución
Explicación
Eliminar bordes establecidos en imágenes de forma predeterminada en algunos navegadores
Problema
Solución
Explicación
Establecer una imagen de fondo
Problema
Solución
Explicación
Crear una línea de imágenes de fondo
Problema
Solución
Situar una imagen de fondo en una página Web
Problema
Solución
Explicación
Utilizar múltiples imágenes de fondo en un selector
Problema
Solución
Explicación
Crear una imagen de fondo fija
Problema
Solución
Explicación
Superponer texto HTML en una imagen
Problema
Solución
Explicación
Reemplazar texto HTML con una imagen
Problema
Solución
Explicación
Origen del método de sustitución de imagen
Problema con el método FIR
El método de sustitución de imagen Phark
Enfoque CSS 3 de sustitución de imagen
Reemplazar texto HTML con texto Flash
Problema
Solución
Explicación
Utilizar múltiples imágenes PNG con transparencia
Problema
Solución
Explicación
Crear una presentación panorámica de imagen
Problema
Solución
Explicación
Combinar diferentes formatos de imagen
Problema
Solución
Explicación
Redondear esquinas con columnas de ancho fijo
Problema
Solución
Explicación
Redondear esquinas (técnica de puertas corredizas)
Problema
Solución
Explicación
Esquinas redondeadas (técnica de esquinas en escalera)
Problema
Solución
Explicación
Redondear esquinas con JavaScript
Problema
Solución
Explicación
Colores diferentes
Tamaños diferentes
Elementos diferentes
Esquinas específicas
Situar una sombra detrás de una imagen
Solución
Explicación
Situar una sombra suavizada detrás de una imagen
Problema
Solución
Explicación
Hacer escalables las imágenes
Problema
Solución
Explicación
Crear bocadillos de diálogo
Problema
Solución
Explicación
Impedir que la gente robe sus imágenes
Problema
Solución
Explicación
Barra de herramientas Imagen de Microsoft
Ninguna imagen está segura
Insertar reflejos en imágenes automáticamente
Problema
Solución
Explicación
Características de personalización
Problemas conocidos de navegador
Utilizar representaciones digitales de imagen
Problema
Solución
Explicación
Capítulo 4. Elementos de página
Introducción
Eliminar márgenes de página
Problema
Solución
Explicación
Colorear la barra de desplazamiento
Problema
Solución
Explicación
Técnicas para centrar elementos en una página Web
Problema
Solución
Explicación
Tablas
Imágenes
Centrado vertical
Colocar un borde de página
Problema
Solución
Explicación
Personalizar una regla horizontal
Problema
Solución
Explicación
Añadir el script lightbox
Problema
Solución
Explicación
Configurar los archivos
Crear una presentación de diapositivas
Problemas conocidos de navegador
Capítulo 5. Listas
Introducción
Cambiar el formato de una lista
Problema
Solución
Explicación
Crear sangría para múltiples navegadores en listas
Problema
Solución
Explicación
Situar divisores entre elementos de lista
Problema
Solución
Explicación
Crear marcadores de texto personalizados para listas
Problema
Solución
Explicación
Crear marcadores personalizados de imagen para listas
Problema
Solución
Explicación
Insertar marcadores de imagen personalizados grandes para listas
Problema
Solución
Explicación
Enriquecer una presentación de lista con imágenes
Problema
Solución
Explicación
Crear listas en línea
Problema
Solución
Explicación
Crear sangrías colgantes en una lista
Problema
Solución
Explicación
Mover el marcador dentro de la lista
Problema
Solución
Explicación
Capítulo 6. Vínculos y navegación
Introducción
Eliminar subrayados de vínculos (y añadir otra decoración)
Problema
Solución
Explicación
Cambiar colores de vínculo
Problema
Solución
Explicación
Cambiar los colores de vínculo en diferentes apartados de una página
Problema
Solución
Explicación
Situar un icono al final del vínculo
Problema
Solución
Explicación
Cambiar cursores
Problema
Solución
Explicación
Crear rollover sin JavaScript
Problema
Solución
Explicación
Crear menús de navegación de texto y rollover
Problema
Solución
Explicación
Crear menús de navegación horizontales
Problema
Solución
Explicación
Crear un menú de navegación con teclas de acceso
Problema
Solución
Explicación
Crear ruta de navegación
Problema
Solución
Explicación
Crear rollover basados en imágenes
Problema
Solución
Explicación
Crear menús desplegables
Problema
Solución
Explicación
Crear menús contextuales
Problema
Solución
Explicación
Crear cuadros descriptivos de ayuda con el atributo title
Problema
Solución
Explicación
Diseñar un menú visual dinámico
Problema
Solución
Explicación
Aplicar estilos dinámicamente a una página Web
Problema
Solución
Explicación
Menús desplegables CSS puros
Capítulo 7. Formularios
Introducción
Modificar el espaciado alrededor de un formulario
Problema
Solución
Explicación
Establecer estilos para elementos de entrada de datos
Problema
Solución
Explicación
Aplicar diferentes estilos a diferentes elementos de entrada de datos en el mismo formulario
Problema
Solución
Explicación
Establecer estilos para elementos de área de texto
Problema
Solución
Explicación
Establecer estilos para elementos select y option
Problema
Solución
Explicación
Crear un campo de búsqueda al estilo Macintosh
Problema
Solución
Explicación
Atributos del campo de búsqueda
Mejores prácticas
Aplicar estilo a botones de formulario
Problema
Solución
Explicación
Crear una imagen de botón de envío
Problema
Solución
Explicación
Establecer un botón de envío una sola vez
Problema
Solución
Explicación
Crear un botón Submit que se parece a texto HTML
Problema
Solución
Explicación
Hacer que un vínculo de texto HTML funcione como un botón Submit
Problema
Solución
Explicación
Diseñar un formulario Web sin tablas
Problema
Solución
Diseñar un formulario de dos columnas sin tablas
Problema
Solución
Explicación
Resaltar campos de formulario
Problema
Solución
Explicación
Integrar feedback de formulario con un formulario
Problema
Solución
Explicación
Aplicar estilo a teclas de acceso en formularios Web
Problema
Solución
Explicación
Agrupar elementos comunes de formulario
Problema
Solución
Explicación
Incorporar datos en un formulario como una hoja de cálculo
Problema
Solución
Explicación
Diseño de ejemplo: Formulario de autenticación
Diseño de ejemplo: Formulario de registro
Capítulo 8. Tablas
Introducción
Establecer el espaciado de celda
Problema
Solución
Explicación
Establecer los bordes y relleno de celda
Problema
Solución
Explicación
Establecer el estilo del título
Problema
Solución
Explicación
Establecer los estilos dentro de celdas de tabla
Problema
Solución
Explicación
Establecer estilos para elementos de encabezado de tabla
Problema
Solución
Explicación
Eliminar espacios de imágenes situadas en celdas de tabla
Problema
Solución
Explicación
Utilizar Document Type Definition (DTD)
Eliminar espacios entre celdas de tabla
Problema
Solución
Explicación
Crear colores alternativos de fondo en filas de tabla
Problema
Solución
Explicación
Utilizar JavaScript
Utilizar soluciones del lado del servidor
Añadir un efecto resaltado sobre una fila de tabla
Problema
Solución
Explicación
Diseño de ejemplo: Un calendario elegante
Capítulo 9. Diseños de página
Introducción
Crear un diseño de una columna
Problema
Solución
Explicación
Crear un diseño de dos columnas
Problema
Solución
Explicación
Crear un diseño de dos tablas con columnas de ancho fijo
Problema
Solución
Explicación
Crear un diseño multicolumna flexible con flotantes
Problema
Solución
Explicación
Crear un diseño multicolumna de ancho fijo con flotantes
Problema
Solución
Explicación
Crear un diseño multicolumna flexible con posicionamiento
Problema
Solución
Explicación
Crear un diseño multicolumna de ancho fijo con posicionamiento
Problema
Solución
Explicación
Utilizar flotantes para mostrar columnas en cualquier orden
Problema
Solución
Explicación
El código
Definir las columnas
Crear espacio en blanco
Ajustar el orden de las columnas
Algoritmo de diseño de página
Columnas falsas
Una solución alternativa
Diseñar un diseño asimétrico
Problema
Solución
Explicación
Capítulo 10. Imprimir
Introducción
Crear una versión de página para la impresora
Problema
Solución
Explicación
Utilizar @import cuando se asignan tipos de medios
Utilizar @media cuando se asignan tipos de medios
Crear un formulario Web listo para imprimir
Problema
Solución
Explicación
Utilizar selectores de atributo para diferenciar elementos de formulario
Añadir amigabilidad
Mostrar URI detrás de vínculos
Problema
Solución
Explicación
Situar el nombre de dominio delante de vínculos absolutos
Insertar caracteres especiales delante de vínculos
Problema
Solución
Explicación
Diseño de ejemplo: una página con CSS para impresión
Configurar la página para imprimir en blanco y negro
Diseñar el encabezado principal
Aplicar estilo al encabezado del artículo y nombre de autor
Llamar la atención por medio de un aviso
Mostrar URI detrás de vínculos
Terminar con el pie de página
Capítulo 11. Hacks, soluciones alternativas y solución de problemas
Introducción
Aislar estilos para Netscape Navigator 4.x
Problema
Solución
Explicación
Hack Caio
Solución alternativa @media
Selectores descendientes
Proporcionar estilos específicos a Internet Explorer 5.x para Windows
Problema
Solución
Explicación
Hack de estrella de HTML
Otro enfoque: hack de modelo de caja de Tantek
Eliminar el parpadeo de página Web en Internet Explorer 5.x para Windows
Problema
Solución
Explicación
Mantener imágenes de fondo fijas en Internet Explorer 6 para Windows
Problema
Solución
Explicación
Utilizar los comentarios condicionales de Internet Explorer para Windows para enviar estilos
Problema
Solución
Explicación
Ocultar reglas CSS de Internet Explorer 5 para Macintosh
Problema
Solución
Explicación
Establecer un sistema de gestión inteligente de hack
Problema
Solución
Explicación
Diagnosticar errores y problemas de navegador
Problema
Solución
Explicación
Comprobar el diseño de un sitio en más de una plataforma con sólo un ordenador
Problema
Solución
Si tiene un PC
Si tiene un Macintosh
Si tiene una estación de trabajo Linux
Explicación
Instalar más de una versión de Internet Explorer para Windows en un ordenador
Problema
Solución
Explicación
Comprobar un sitio Web con un navegador en modo texto
Problema
Solución
Explicación
Capítulo 12. Diseñar con CSS
Introducción
Agrandar texto excesivamente
Problema
Solución
Explicación
Crear incongruencias inesperadas
Problema
Solución
Explicación
Combinar elementos diferentes para crear contraste
Problema
Solución
Explicación
Guiar la mirada por medio del contraste
Problema
Solución
Explicación
Comprobar el suficiente contraste de color
Problema
Solución
Explicación
Enfatizar una cita
Problema
Solución
Explicación
Apéndice A. Recursos
HTML general y formación de CSS
Roadmap to Standards, de Dave Shea
Página Web para diseñadores - Tutorial CSS
Community MX: Fundamentos básicos de posicionamiento CSS
Propiedad flotante CSS - Tutorial
Selectores CSS - Tutorial
Recursos de diseño
A List Apart: Temas CSS
Layout Reservoir - BlueRobot.com
CSS-Edge
CSS Zen Garden
Glish.com - Técnicas de diseño CSS
Microformats
Real World Style
SimpleQuiz
Typetester
Grupos de discusión
Babble List
css-discuss
Boletín de noticias de hojas de estilo Usenet
www-style (Lista de distribución de estilo de W3C)
Referencias
Gráficas de soporte CSS en navegador
DTD recomendados de W3C
Página de CSS de W3C
Especificación CSS 2.1
Especificación HTML 4.01
Especificación XHTML 1.0
Herramientas
BrowserCam
iCapture
SelectORacle
Servicio de validación de CSS del W3C
Validador HTML de W3C
Extensión de navegador Web Developer
Xyle scope
Apéndice B. CSS 2.1. Propiedades y extensiones propietarias
Apéndice C. CSS 2.1. Selectores, pseudo-clases y pseudo-elementos
Apéndice D. Aplicar estilo a elementos de formulario
Casillas de verificación
Incorporar archivos
Botones de opción
Campos de texto
Múltiples opciones
Elemento Select
Botón Enviar
Elemento Textarea
Índice alfabético
CSS (Cascading Style Sheets) es una sintaxis sencilla, estandarizada, que proporciona a los diseñadores un amplio control sobre la presentación de sus páginas Web. De este modo, CSS representa ya un componente esencial del diseño Web en la actualidad.
Este libro está dirigido a diseñadores y desarrolladores Web que se enfrentan a los problemas de diseñar con CSS para solucionar los entresijos comunes asociados a este trabajo. El curso le proporciona cientos de ejemplos detallados con este código que puede utilizar inmediatamente, así como material de gran valor en esta materia, incluidos tópicos que van desde la tipografía Web básica y diseño de página a técnicas para formatear listas, formularios y tablas.
