Prólogo

Prefacio
A quién va dirigido este libro
Suposiciones en las que se basa este libro
Contenidos del libro
Convenciones usadas en este libro
Utilización de los códigos de ejemplo

Capítulo 1. Utilizar los fundamentos básicos de HTML
Introducción
Estructuración de documentos
Marcación semántica
Evitar una sopa de etiquetas antiguas
HTML es estructura de documentos
Elegir un editor de texto
Problema
Solución
Explicación
Más robusto y aún así gratuito
Soluciones IDE
Véase también
Codificar una página HTML básica
Problema
Solución
Explicación
Véase también
DOCTYPE y sus efectos en la composición en el navegador
Problema
Solución
Explicación
El modo arbitrario
¿Por qué no utilizar la última definición DOCTYPE?
La página web más pequeña de todos los tiempos
Véase también
Etiquetar encabezados
Problema
Solución
Explicación
Véase también
Construir citas apropiadas
Problema
Explicación
Véase también
Añadir una imagen
Problema
Solución
Explicación
Trucos adicionales
Formatos de archivo
Sensibilidad a caracteres en mayúsculas o minúsculas
Véase también
Añadir audio con HTML5
Problema
Solución
Explicación
Compatibilidad de audio
Véase también
Incorporar vídeo con HTML5
Problema
Solución
Explicación
Véase también
Utilizar strong y em de una forma efectiva
Problema
Solución
Explicación
Véase también
Crear listas
Problema
Solución
Explicación
Véase también
Crear un vínculo a una página Web
Problema
Solución
Explicación
Vincular otra página en el mismo sitio
Desplazamiento por carpetas
Vincular elementos dentro de una página Web
Véase también
Codificar tablas
Problema
Solución
Explicación
Véase también
Creación de una tarjeta de visita en HTML
Problema
Solución
Explicación
Mejorar las tarjetas hCard
Véase también
Etiquetar una cita (hCalendar)
Problema
Solución
Explicación
Véase también
Validar HTML
Problema
Solución
Explicación
Crear un bookmarklet de validación HTML
Véase también

Capítulo 2. Fundamentos básicos de CSS
Introducción
Aplicar reglas CSS a una página Web
Problema
Solución
Explicación
El contenedor de las reglas CSS
Véase también
Utilizar selectores básicos para aplicar estilos
Problema
Solución
Explicación
Selectores de tipo
Selectores de clase
Selectores ID
Selectores descendientes
Selectores universales
Véase también
Aplicar selectores hijo
Problema
Solución
Explicación
Véase también
Aplicar selectores adyacentes
Problema
Solución
Explicación
Véase también
Aplicar selectores de atributo
Problema
Solución
Explicación
Véase también
Utilizar seudo-clases
Problema
Solución
Explicación
Seudo-clases de CSS3
Véase también
Utilizar seudo-elementos
Problema
Solución
Explicación
Véase también
Determinar cuándo utilizar selectores de clase o selectores ID
Problema
Solución
Explicación
Divisiones HTML5
Véase también
Aprender más sobre las propiedades de CSS
Problema
Solución
Explicación
Véase también
El modelo de cajas
Problema
Solución
Explicación
Véase tambié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
Véase también
Conocer el origen
Problema
Solución
Explicación
Véase también
Comprender el sentido de ordenación en CSS
Problema
Solución
Explicación
Véase también
Utilizar !important para anular algunas reglas CSS
Problema
Solución
Explicación
El usuario controla su experiencia
Véase también
¿Qué es la especificidad?
Problema
Solución
Explicación
Véase también
Configurar diferentes tipos de hojas de estilo
Problema
Solución
Explicación
Véase también
Añadir comentarios a una hoja de estilo
Problema
Solución
Explicación
Véase también
Organizar los contenidos de una hoja de estilo
Problema
Solución
Explicación
Véase también
Trabajar con propiedades abreviadas
Problema
Solución
Explicación
Véase también
Configurar hojas de estilo alternativas
Problema
Solución
Explicación
Véase también
Marcos flotantes
Problema
Solución
Explicación
Véase también
Elementos flotantes que se despejan a sí mismos
Problema
Solución
Explicación
Consideraciones del navegador
Utilizar overflow
Véase también
Posicionamiento absoluto
Problema
Solución
Explicación
Véase también
Posicionamiento relativo
Problema
Solución
Explicación
Véase también
Posicionamiento forzado
Problema
Solución
Explicación
Véase también
Apilar elementos con z-index
Problema
Solución
Explicación
Véase también
Validar reglas CSS
Problema
Solución
Explicación
Crear un bookmarklet de validación CSS
Véase también

Capítulo 3. Tipografía Web
Introducción
Especificación de fuentes
Problema
Solución
Explicación
Problemas al encontrar fuentes
Heredar fuentes a través de una página
Véase también
Utilizar fuentes seguras para la Web
Problema
Solución
Explicación
Ampliación del listado de fuentes seguras para la Web
Un conjunto de fuentes más robusto
Véase también
Un símbolo & decorativo
Problema
Solución
Explicación
Símbolos & con estilo
Véase también
Archivos de fuentes incrustados
Problema
Solución
Explicación
Incrustación en plataformas cruzadas de navegadores
El problema de las fuentes incrustadas
Soluciones de terceros
Otras técnicas
Véase también
Forzar un salto en palabras realmente largas
Problema
Solución
Explicación
Véase también
Especificar medidas y tamaños de letra
Problema
Solución
Explicación
Unidades de longitud
Unidades relativas
Establecer el tamaño de una fuente a cero o a un valor negativo
Véase también
Obtener una mejor consistencia en plataformas cruzadas de navegadores para el tamaño de fuente
Problema
Solución
Explicación
Utilizar píxeles
Utilizar palabras clave
Utilizar unidades em para controlar el tamaño de letra
Véase también
Guiones, guiones eme y guiones ene
Problema
Solución
Explicación
Véase también
Centrar texto
Problema
Solución
Explicación
Véase también
Justificar texto
Problema
Solución
Explicación
Véase también
Marcar un desbordamiento de texto con puntos suspensivos
Solución
Explicación
Véase también
Eliminar espacio entre encabezados y párrafos
Problema
Solución
Explicación
Véase también
Configurar una letra capitular sencilla
Solución
Explicación
Véase también
Configurar una letra capitular más grande y centrada
Problema
Solución
Explicación
Véase también
Crear una letra capitular con imágenes
Problema
Solución
Explicación
Accesibilidad
Véase también
Crear un encabezado con texto de diseño
Problema
Solución
Explicación
Véase también
Crear un encabezado con texto con estilo y bordes
Problema
Solución
Explicación
Véase también
Dar estilo a un encabezado con texto y una imagen
Problema
Solución
Explicación
Véase también
Crear una cita con texto HTML
Problema
Solución
Explicación
Véase también
Colocar una cita en una columna lateral
Problema
Solución
Explicación
Véase también
Crear una cita con bordes
Problema
Solución
Explicación
Véase también
Crear una cita con imágenes
Problema
Solución
Explicación
Véase también
Establecer sangrado para la primera línea de párrafo
Problema
Solución
Explicación
Véase también
Sangrar párrafos enteros
Problema
Solución
Explicación
Véase también
Crear una sangría francesa
Problema
Solución
Explicación
Sangrías francesas seguras
Sangrías francesas emparejadas
Véase también
Dar estilo a la primera línea de un párrafo
Problema
Solución
Véase también
Dar estilo a la primera línea de un párrafo con una imagen
Problema
Solución
Explicación
Véase también
Crear un efecto de marcador
Problema
Solución
Explicación
Véase también
Cambiar el color de selección del texto
Problema
Solución
Explicación
Véase también
Cambiar el espaciado de línea
Problema
Solución
Explicación
Véase también
Dar un tratamiento gráfico al texto HTML
Problema
Solución
Explicación
Véase también
Colocar una sombra detrás del texto
Problema
Solución
Explicación
Establecer la opacidad de la sombra
Crear un aspecto de biselado
Añadir una llamarada roja en el borde superior de un texto
Soportes conocidos
Texto sombreado en Internet Explorer
Véase también
Ajustar el espacio entre letras y palabras
Problema
Solución
Explicación
Kerning y tracking
Buenas prácticas
Véase también
Armonizar líneas base en la tipografía Web
Problema
Solución
Explicación
Véase también
Superíndices y subíndices sin ensuciar la línea base del texto
Problema
Solución
Explicación
Véase también
Configurar varias columnas de texto
Problema
Solución
Explicación
Problemas conocidos
Véase también

Capítulo 4. Imágenes
Introducción
Transformar imágenes en color a blanco y negro en IE con CSS
Problema
Solución
Explicación
Véase también
Establecer un borde alrededor de una imagen
Problema
Solución
Explicación
Véase también
Establecer un borde redondeado alrededor de una imagen
Problema
Solución
Explicación
Especificar esquinas
Problemas conocidos
Véase también
Quitar los bordes de las imágenes que ponen por defecto algunos navegadores
Problema
Solución
Explicación
Véase también
Configurar una imagen de fondo
Problema
Solución
Explicación
Véase también
Crear una fila de imágenes de fondo
Problema
Solución
Explicación
Véase también
Colocar una imagen de fondo
Problema
Solución
Explicación
Véase también
Utilizar varias imágenes de fondo en un elemento HTML
Problema
Solución
Explicación
Propiedades abreviadas
No está preparado para un uso diario
Véase también
Utilizar imágenes en un borde
Problema
Solución
Explicación
Véase también
Crear una imagen de fondo estática
Problema
Solución
Explicación
Véase también
Estirar imágenes cuando se redimensiona el navegador
Problema
Solución
Explicación
Véase también
Estirar una imagen por toda la ventana del navegador
Problema
Solución
Explicación
Utilizar el tamaño de fondo
Utilizar iframe
Véase también
Hacer imágenes escalables
Problema
Solución
Explicación
Limitar el tamaño de las imágenes
Véase también
Definir cómo muestra las imágenes un navegador
Problema
Solución
Explicación
Suavizar imágenes en Internet Explorer
Véase también
Girar imágenes con CSS
Problema
Solución
Explicación
Véase también
Establecer degradados con CSS
Problema
Solución
Explicación
Gradientes en Safari
Degradados en Firefox
Transparencia con degradados
Véase también
Crear imágenes PNG transparentes para IE6 y versiones posteriores
Problema
Solución
Explicación
Véase también
Utilizar imágenes PNG transparentes con JavaScript
Problema
Solución
Explicación
Cómo funciona el script
Véase también
Superponer texto HTML sobre una imagen
Problema
Solución
Explicación
Véase también
Sustituir texto HTML con una imagen
Problema
Solución
Explicación
Método de sustitución de imágenes de Fahrner
Método de sustitución de imágenes de Phark
El enfoque de CSS3 para la sustitución de imágenes
Véase también
Construir una presentación con una imagen panorámica
Problema
Solución
Explicación
Véase también
Combinar diferentes formatos de imagen
Problema
Solución
Explicación
Véase también
Redondear esquinas con columnas de anchura fija
Problema
Solución
Explicación
Anchura flexible
Véase también
Esquinas redondeadas (la técnica de la puerta corredera)
Problema
Solución
Explicación
Véase también
Esquinas redondeadas (la técnica del pico de montaña)
Problema
Solución
Explicación
Véase también
Redondear esquinas con JavaScript
Problema
Solución
Explicación
Colores diferentes
Tamaños diferentes
Elementos diferentes
Esquinas específicas
Véase también
Definir una sombra para un elemento con CSS
Problema
Solución
Explicación
Véase también
Colocar una sombra tras una imagen
Problema
Solución
Explicación
Véase también
Colocar una sombra suavizada detrás de una imagen
Problema
Solución
Explicación
Véase también
Crear globos o bocadillos
Problema
Solución
Explicación
Véase también
Dificultar que la gente pueda robar nuestras imágenes
Problema
Solución
Explicación
La barra de herramientas de imágenes de Microsoft
Ninguna imagen está segura
Véase también
Insertar automáticamente reflejos en las imágenes
Problema
Solución
Explicación
Características personalizables
Problemas conocidos en los navegadores
Véase también
Utilizar iconos
Problema
Solución
Explicación
Véase también
Recortar imágenes de fondo
Problema
Solución
Explicación
Véase también
Aplicar máscaras a imágenes y bordes
Problema
Solución
Explicación
Véase también

Capítulo 5. Elementos de página
Introducción
Eliminar márgenes de página
Problema
Solución
Explicación
Véase también
Restablecer los estilos por defecto del navegador para los elementos
Problema
Solución
Explicación
Ampliar el restablecimiento CSS
Véase también
Colorear la barra de desplazamiento en IE
Problema
Solución
Explicación
Manejar el modo arbitrario
Colorear barras de desplazamiento en IE8
Véase también
Técnicas para centrar elementos en una página Web
Problema
Solución
Explicación
Tablas
Imágenes
Centrar verticalmente
Véase también
Crear un borde de página
Problema
Solución
Explicación
Bordes en imágenes
Véase también
Colocar un borde alrededor de la ventana del navegador
Problema
Solución
Explicación
Véase también
Personalizar una regla horizontal
Problema
Solución
Explicación
Véase también
Crear una caja de transparencias
Problema
Solución
Explicación
Configurar los archivos
Configurar una presentación de diapositivas
Problemas conocidos con los navegadores
Véase también
Cambiar la opacidad de los elementos
Problema
Solución
Explicación
Soporte en navegadores
Véase también
Ajustar la opacidad de los colores de fondo
Problema
Solución
Explicación
Soporte en Internet Explorer
Véase también

Capítulo 6. Listas
Introducción
Cambiar el formato de una lista
Problema
Solución
Explicación
Véase también
Cambiar el color de las viñetas
Problema
Solución
Explicación
Véase también
Escribir código de sangrado de listas para plataformas cruzadas de navegadores
Problema
Solución
Explicación
Pérdida de marcadores
Véase también
Colocar líneas divisorias entre los elementos de la lista
Problema
Solución
Explicación
Véase también
Crear marcadores de texto personalizados para listas
Problema
Solución
Explicación
Véase también
Crear marcadores de imágenes personalizadas para listas
Problema
Solución
Explicación
Detener la herencia
Véase también
Insertar imágenes personalizadas grandes como marcadores para listas
Problema
Solución
Explicación
Véase también
Enriquecer una presentación de lista con imágenes
Problema
Solución
Explicación
Véase también
Crear listas en línea
Problema
Solución
Explicación
Véase también
Establecer una sangría francesa en una lista
Problema
Solución
Explicación
Véase también
Mover el marcador dentro de la lista
Problema
Solución
Explicación
Véase también
Dar estilo a una lista de definiciones
Problema
Solución
Explicación
Utilizar contenido generado
Véase también
Dar estilo a un guión con el elemento dialogo de HTML5
Problema
Solución
Explicación
Véase también
Convertir una lista en un árbol de directorios
Problema
Solución
Explicación
Utilizar CSS3
Véase también
Crear un ranking de clasificaciones con estrellas
Problema
Solución
Explicación
Véase también

Capítulo 7. Vínculos y navegación
Introducción
Generar fácilmente menús y sub-menús basados en texto
Problema
Solución
Explicación
Véase también
Quitar el subrayado de los vínculos (y añadir otros estilos)
Problema
Solución
Explicación
Véase también
Cambiar los colores de los vínculos
Problema
Solución
Explicación
Véase también
Eliminar líneas punteadas cuando se hace clic sobre un vínculo en Internet Explorer
Problema
Solución
Explicación
Véase también
Cambiar el color de los vínculos en diferentes secciones de una página
Problema
Solución
Explicación
Véase también
Colocar iconos al final de diferentes tipos de vínculos
Problema
Solución
Explicación
Véase también
Cambiar cursores
Problema
Solución
Explicación
Véase también
Crear un efecto rollover sin JavaScript
Problema
Solución
Explicación
Problemas conocidos
Véase también
Animación de rollover en vínculos con transiciones CSS3
Problema
Solución
Explicación
La función de control de tiempo
Duración y retraso
La propiedad transition-property
Propiedad abreviada
Ampliar las transiciones a otras propiedades
Véase también
Crear menús de navegación de texto y rollover
Problema
Solución
Explicación
Configurar la lista
Dar estilo a los vínculos
Listas no ordenadas para la navegación
Véase también
Añadir submenús a un menú vertical
Problema
Solución
Explicación
Limitación de estilos
Véase también
Construir menús de navegación horizontales
Problema
Solución
Explicación
Véase también
Construir menús de navegación horizontales con menús desplegables
Problema
Solución
Explicación
Menús desplegables con Flash
Véase también
Construir menús de navegación con accesskey
Problema
Solución
Explicación
Problemas conocidos de navegadores
Véase también
Crear un sistema de migas de pan para la navegación
Problema
Solución
Explicación
Véase también
Crear efectos rollover basados en imágenes
Problema
Solución
Explicación
Sustitución de imágenes Leahy-Langridge
El método Pixy
Véase también
Crear menús contraíbles
Problema
Solución
Explicación
Véase también
Crear menús contextuales
Problema
Solución
Explicación
Véase también
Crear ayudas visuales con el atributo title
Problema
Solución
Explicación
Véase también
Diseñar un menú dinámico con fichas
Problema
Solución
Explicación
Véase también
Cambiar un estilo a través de un vínculo
Problema
Solución
Explicación
Menús contraíbles sólo con CSS
Problemas conocidos en los navegadores
Véase también

Capítulo 8. Formularios
Introducción
Modificar el espacio alrededor de un formulario
Problema
Solución
Explicación
Véase también
Eliminar el espacio alrededor de un formulario
Problema
Solución
Explicación
Véase también
Establecer estilos para elementos input
Problema
Solución
Explicación
Utilizar selectores de atributo
Véase también
Cambiar el estilo de los elementos de un formulario cuando el usuario hace clic sobre ellos
Problema
Solución
Explicación
Véase también
Aplicar diferentes estilos a diferentes elementos de entrada en el mismo formulario
Problema
Solución
Explicación
Utilizar selectores de atributo
Véase también
Dar estilo a elementos textarea
Problema
Solución
Explicación
Véase también
Configurar estilos para elementos select y option
Problema
Solución
Explicación
Véase también
Crear un campo de búsqueda al estilo Macintosh
Problema
Solución
Explicación
Atributos del campo de búsqueda
Buenas prácticas
Véase también
Dar formato a los botones de un formulario
Problema
Solución
Explicación
Véase también
Utilizar una imagen para el botón de envío
Problema
Solución
Explicación
Véase también
Configurar un botón de envío de un solo uso
Problema
Solución
Explicación
Véase también
Crear un botón de envío que parezca texto HTML
Problema
Solución
Explicación
Soporte en navegadores
Véase también
Hacer que un vínculo HTML actúe como botón de envío
Problema
Solución
Explicación
Véase también
Diseñar formularios Web sin tablas
Problema
Solución
Explicación
Véase también
Diseñar un formulario a dos columnas sin tablas
Problema
Solución
Explicación
Véase también
Integrar información para el usuario en un formulario
Problema
Solución
Explicación
Véase también
Dar estilo a teclas de acceso en formularios Web
Problema
Solución
Explicación
Véase también
Agrupar elementos comunes de un formulario
Problema
Solución
Explicación
Véase también
Introducir datos en un formulario similar a una hoja de cálculo
Problema
Solución
Explicación
Véase también
Ejemplo de diseño: un formulario de registro
Ejemplo de diseño: un formulario de inscripción

Capítulo 9. Tablas
Introducción
Establecer los bordes y el relleno de celdas de una tabla
Problema
Solución
Explicación
Problemas en navegadores
Definir los bordes de las celdas
Véase también
Configurar el espaciado de celdas
Problema
Solución
Explicación
Véase también
Dar formato a una leyenda o título de tabla
Problema
Solución
Explicación
Véase también
Establecer estilos dentro de las celdas de una tabla
Problema
Solución
Explicación
Véase también
Configurar los estilos para los elementos de cabeceras de tabla
Problema
Solución
Explicación
Véase también
Eliminar huecos en imágenes colocadas en las celdas de una tabla
Problema
Solución
Explicación
Alineación vertical
Véase también
Eliminar huecos entre celdas de tablas
Problema
Solución
Explicación
Véase también
Crear colores de fondo alternos en las filas de tabla
Problema
Solución
Explicación
Soluciones alternativas
Véase también
Crear un efecto de resaltado en una fila de una tabla
Problema
Solución
Explicación
Véase también
Ejemplo de diseño: un calendario elegante

Capítulo 10. Diseño de páginas Web para impresión
Introducción
Aplicar una hoja de estilos para impresión a una página Web
Problema
Solución
Explicación
Tipos de medios
Utilizar @import para la asignación de tipos de medios
Utilizar @media cuando se asignan tipos de medios
Véase también
Sustituir un logotipo en color por una versión en blanco y negro para páginas impresas
Problema
Solución
Explicación
Véase también
Convertir un formulario Web a un formato apto para la impresión
Problema
Solución
Explicación
Utilizar selectores de atributo para diferenciar los elementos del formulario
Mejorar la experiencia del usuario
Véase también
Mostrar URI después de los vínculos
Problema
Solución
Explicación
Colocar el nombre del dominio delante de los vínculos absolutos
Problemas conocidos en navegadores
Véase también
Insertar caracteres especiales antes de los vínculos
Problema
Solución
Explicación
Problemas conocidos en navegadores
Véase también
Configurar saltos de página en un documento impreso
Problema
Solución
Explicación
Utilizar selectores de clase
Véase también
Ejemplo de diseño: una página para impresión con CSS
Configurar la página para una impresión en blanco y negro
Diseño del encabezado principal
Dar estilo a las cabeceras del artículo
Llamar la atención en el resumen
Mostrar URI después de los vínculos
Completar el diseño con el pie de página

Capítulo 11. Esquemas de página
Introducción
Construir un diseño de una columna
Problema
Solución
Explicación
Crear una columna de anchura fija
Véase también
Construir un diseño a dos columnas
Problema
Solución
Explicación
Dar la vuelta al diseño
Véase también
Construir un diseño a dos columnas con anchuras fijas
Problema
Solución
Explicación
Dar la vuelta al diseño
Véase también
Crear un diseño flexible de varias columnas con float
Problema
Solución
Explicación
Véase también
Crear un diseño de ancho fijo de varias columnas con float
Problema
Solución
Explicación