Familiarizarse con CSS requiere de un cierto trabajo previo. Y es que CSS no es sólo un lenguaje con un número determinado de vocablos para 'traducir' textos, sino que ofrece, más allá de eso, una serie de herramientas con un amplio potencial de uso. Con un reducido número de aplicaciones se pueden obtener una gran variedad de opciones de diseño.
Este libro va dirigido tanto al principiante ambicioso como al usuario avanzado, ya que incluye una completa introducción de conceptos básicos y una parte práctica que abarca las 'recetas' básicas para los elementos Web más sencillos y el desarrollo, paso a paso, de un sitio Web completo: desde la estructura semántica hasta la elaboración de complejos diseños.
Le recomendamos que utilice desde el principio el material adicional que acompaña a cada capítulo como material de práctica para poder detectar así cualquier interpretación dudosa o incompleta que pudieran dar los diferentes navegadores. A menudo no se indica claramente si el navegador X soporta la característica Y, ya que en muchos casos depende del contexto en que se asignó la característica. En casos así le será de inmensa ayuda el entrenamiento hands-on que adquirirá con los contenidos del material adicional, que podrá encontrar en la sección del libro de la página web de Marcombo: www.marcombo.com.

Ralph G. Schulz trabaja en Berlín como docente, autor y desarrollador web independiente desde los primeros días de la www. El punto fuerte de los trabajadores de su agencia son la concepción y el desarrollo de ofertas web con las mínimas barreras posibles.
Su compromiso con los estándares Web y sus trabajos libres de barreras fueron premiados en el 2005 con el Premio Especial BIENE a uno de sus proyectos.

Ahorra Con Agapea
"Compra "DISEÑO WEB CON CSS" junto a "Hipatia de Alejandría":

Por solo 40 € Gastos de envío gratis^**

INTRODUCCIÓN

Parte A

Fundamentos CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Capítulo 1 ¿POR QUÉ CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

1.1 ¿Qué aporta separar la estructura del diseño? . . . . . . . . . . . 4

1.2 Un ejemplo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Capítulo 2 FUNDAMENTOS CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1 Sintaxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.2 Vincular hojas de estilo en archivos HTML . . . . . . . . . . . . . . 20

2.3 Selectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

2.4 Propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

2.5 Valores para datos de estilo . . . . . . . . . . . . . . . . . . . . . . . . . . 35

2.6 Jerarquía de estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

2.7 Herencia (inheritance) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Capítulo 3 CONCEPTOS CSS PARA CUADROS

Y SUS PROPIEDADES . . . . . . . . . . . . . . . . . . . . . . . . . . 45

3.1 El cuadro modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

3.2 Parentesco entre cuadros . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

3.3 Representación de los cuadros . . . . . . . . . . . . . . . . . . . . . . . . 54

3.4 Posicionamiento de los cuadros . . . . . . . . . . . . . . . . . . . . . . . 58

3.5 Opciones de muestra de los cuadros . . . . . . . . . . . . . . . . . . . 68

Capítulo 4 CONSTRUCCIÓN DE PÁGINAS WEB . . . . . . . . . . . . . . 71

4.1 Planificar la estructura HTML . . . . . . . . . . . . . . . . . . . . . . . . . 72

4.2 Hojas de estilo para formatos y plantillas . . . . . . . . . . . . . . . 80

4.3 Hojas de estilo variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Capítulo 5 MÁS TRABAJO CON LOS NAVEGADORES . . . . . . . . . . 95

5.1 Navegadores en general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

5.2 Agujeros del navegador - Browser Bugs . . . . . . . . . . . . . . . . 103

5.3 Trucos y bifurcaciones en CSS . . . . . . . . . . . . . . . . . . . . . . . . 109

5.4 Agujeros frecuentes en Internet Explorer . . . . . . . . . . . . . . . 121

5.5 ¿Una reprimenda a Internet Explorer? . . . . . . . . . . . . . . . . . . 132

Parte B

Práctica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

Capítulo 6 DISEÑO DE PÁGINAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

6.1 Asignación de fuentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

6.2 Asignar color y fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143

6.3 Áreas de página . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147

6.4 ¿Fijo, fluido o elástico? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

6.5 Orden de los bloques de contenido . . . . . . . . . . . . . . . . . . . . 153

6.6 Centrar el diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

6.7 Diseños escalados horizontalmente . . . . . . . . . . . . . . . . . . . . 157

6.8 'Columnas' seguidas (Faux Columns) . . . . . . . . . . . . . . . . . 159

6.9 Llenar todo el alto de pantalla . . . . . . . . . . . . . . . . . . . . . . . . 162

6.10 Falsas columnas y altura completa . . . . . . . . . . . . . . . . . . . . . 166

6.11 Áreas fijas (Faux Frames) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Capítulo 7 ELEMENTOS DE PÁGINA . . . . . . . . . . . . . . . . . . . . . . . 181

7.1 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

7.2 Menús . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

7.3 Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

7.4 Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

El modelo de tabla CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Capítulo 8 (NO SÓLO) GENERALIDADES . . . . . . . . . . . . . . . . . . . . 217

8.1 'Botones' de menú . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

8.2 Teaser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

8.3 Teaser escalable con vértices redondeados . . . . . . . . . . . . . . 221

8.4 Vínculos con iconos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

8.5 Listas con iconos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

8.6 Substitución de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

8.7 Mapas de imágenes (ImageMaps) con CSS . . . . . . . . . . . . . 229

8.8 Un pequeño cuadro info . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

8.9 Líneas de separación (regla horizontal) . . . . . . . . . . . . . . . . . 238

8.10 Tooltipp I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238

8.11 Tooltipp II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

8.12 Iniciales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

8.13 Acrónimos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

8.14 Pasar páginas sin saltos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242

8.15 Propietarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

8.16 Consejos para una variante de texto . . . . . . . . . . . . . . . . . . . 245

8.17 Consejos sobre estilos para una variante de impresión . . . . 248

8.18 Hojas de estilo ordenadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

8.19 Obstáculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

8.20 Una breve mirada al futuro . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Parte C

Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

Capítulo 9 PROPIEDADES CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

9.1 Índice de propiedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

9.2 Colores y fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

9.3 Fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268

9.4 Texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

9.5 Propiedades de cuadro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

9.6 Opciones de muestra y 'representación' . . . . . . . . . . . . . . . 283

9.7 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

9.8 Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290

9.9 Internacionalización . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292

9.10 Contenidos generados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293

9.11 Diseño (layout) de página y salto de página . . . . . . . . . . . . . 296

9.12 Entorno de programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

9.13 Emisión de voz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300