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.ÍndiceIntroducció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 R
eservoir - 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.ÍndiceIntroducció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 R
eservoir - 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 