Capítulo 1
Dado que en este primer capítulo todavía no se crean listados o talleres, en
este punto mostramos una vez más toda la estructura del libro:
Parte A - Introducción
1. ¿Por qué CSS?
- 1.1 ¿Qué aporta separar la estructura del diseño?
Menos código y más transparente
Facilita las actualizaciones
Accesibilidad
Usabilidad
Buscadores
El factor de los costes
- 1.2 Un ejemplo
Extracto de código fuente
Análisis de una página Web "clásica"
Con CSS
Sin CSS
2. Fundamentos CSS
- 2.1 Sintaxis
Estructura de las instrucciones de estilo
Convenciones de escritura
Comentarios
Formas de escritura resumidas y abreviadas
Sintaxis propietarias
- 2.2 Vincular hojas de estilo en archivos HTML
Instrucciones de estilo directamente en la etiqueta HTML (inline)
Instrucciones de estilo en la cabecera del documento (embedded)
Hojas de estilo vinculadas (extern)
- 2.3 Selectores
Selector universal
Selectores de elemento o de tipo
Selectores de clase
Selectores ID
Selectores avanzados
selectores descendientes (descendant selectors)
Selectores hijo (child selectors)
Selectores de hermanos adyacentes (adjacent sibling selectors)
Selectores de atributo
Pseudo clases
Pseudo clases de estructura
Pseudo elementos
Resumen de problemas con Internet Explorer
- 2.4 Propiedades
- 2.5 Valores para datos de estilo
Medidas y unidades
Colores
URLs
- 2.6 Jerarquía de estilos
Cascada
La regla !important
Specificity
Resumen
- 2.7 Herencia
Herencia de valores relativos
inherit
3. Conceptos CSS para cuadros y sus propiedades
- 3.1 El cuadro modelo
width:, height:, padding:, border: y margin:
Medidas del cuadro
Collapsing Margins
- 3.2 Parentesco entre cuadros
Antepasados y padres, hijos y hermanos
- 3.3 Representación de los cuadros
Cuadros bloque
Cuadros inline
Modelos de cuadro inline
Cuadro anónimo
Elementos substituidos
display
- 3.4 Posicionamiento de los cuadros
Posición absoluta
Posición relativa
Posición fija
float:
clear: - finalizar la flotación
- 3.5 Opciones de muestra de los cuadros
overflow
clip
visibility
4. Construcción de páginas Web
- 4.1 Planificar la estructura HTML
Conforme al estándar
Valider Code
Separación clara entre estructura y contenidos
Estructura lógica y textos resaltados
Agrupar los elementos de página
Sin barreras
Prejuicios
Características
- 4.2 Hojas de estilo para formatos y plantillas
- 4.3 Hojas de estilo variables
Variantes de estilo
Representaciones alternativas
Ejemplo: la variante de texto
Estilos específicos al medio
Ejemplo: la variante de impresión
Vincular variantes de estilo
Estilos importados
5. Más trabajo con los navegadores
- 5.1 Navegadores en general
Cuarta generación
Navegadores actuales
El problemático Internet Explorer
Layout (hasLayout)
- 5.2 Agujeros del navegador - Browser Bugs
El laboratorio de pruebas
Análisis de errores
Error detectado - ¿Y ahora?
¡Mantenga la calma!
- 5.3 Trucos y bifurcaciones en CSS
Hacks
HTML Stern
Bifurcaciones
Comentarios condicionales - Conditional Comments
- 5.4 Agujeros frecuentes en Internet Explorer
Box Model Bug
Cómo limitar los daños
Doctype Switching
Excurso: Doctypes
Modo estándar
Modo quirks
¿Estándar o quirks?
El agujero Peekaboo
El agujero Guillotine
3 Pixel Jog
- 5.5 ¿Una reprimenda a Internet Explorer?
Parte B - Práctica
6. Diseño de páginas
- 6.1 Asignación de fuentes
- 6.2 Asignar color y fondo
- 6.3 Áreas de página
- 6.4 ¿Fijo, fluido o elástico?
Fijo
Fluido
Elástico
- 6.5 Orden de los bloques de contenido
- 6.6 Centrar el diseño
- 6.7 Diseños escalados horizontalmente
- 6.8 "Columnas" seguidas (Faux Columns)
- 6.9 Llenar todo el alto de pantalla
- 6.10 Falsas columans y altura completa
- 6.11 Áreas fijas (Faux Frames)
Header y footer fijos
Header y footer mejorados
7. Elementos de página
- 7.1 Listas
Sangrado de los niveles de la lista
Formato de los elementos de lista
Vínculos en las listas
- 7.2 Menús
Menús verticales con listas
Menús horizontales con listas
Menú con pestañas
Menú desplegable horizontal
- 7.3 Formularios
Posicionamiento de los elementos de formulario
Dar formato a los elementos de formulario
Label
Input
Textarea - Área de texto
Radiobuttons y Checkboxes - Botones de radio y cuadros
de validación
Listas de selección - Select y Option
Fieldset y Legend
- 7.4 Tablas
El modelo de tabla CSS
8. (No sólo) Generalidades
- 8.1 "Botones" de menú
- 8.2 Teaser
- 8.3 Teaser escalable con vértices redondeados
- 8.4 Vínculos con iconos
- 8.5 Listas con iconos
- 8.6 Substitución de imágenes
Fahrner Image Replacement (FIR)
El método Gilder/Levin
- 8.7 Mapas de imágenes (ImageMaps) con CSS
- 8.8 Un pequeño cuadro info
- 8.9 Líneas de separación (regla horizontal)
- 8.10 Tooltip I
- 8.11 Tooltip II
- 8.12 Iniciales
- 8.13 Acrónimos
- 8.14 Pasar páginas sin saltos
- 8.15 Proprietarios
Scrollbar - Barra de desplazamiento
Opacity - Opacidad
Ángulos redondeados
- 8.16 Consejos para una variante de texto
- 8.17 Consejos sobre estilos para una variante de impresión
- 8.18 Hojas de estilo ordenadas
- 8.19 Obstáculos
- 8.20 Una breve mirada al futuro
Parte C - Referencia
9. Propiedades CSS
- 9.1 Índice de propiedades
- 9.2 Colores y fondo
color
background-color
background-image
background-repeat
background-position
background-attachment
background
- 9.3 Fuente
font-size
font-family
font-weight
font-style
font-variant
font
font-size-adjust
font-stretch
- 9.4 Texto
text-decoration
text-transform
word-spacing
letter-spacing
text-shadow
cursor
- 9.5 Propiedades de cuadro
width
max-width
min-width
height
max-height
min-height
margin
padding
border-width
border-style
border-color
border
text-align
white-space
text-indent
line-height
vertical-align
- 9.6 Opciones de muestra y "representación"
display
float
clear
position
top, right, bottom, left
z-index
overflow
clip
visibility
- 9.7 Listas
list-style-type
list-style-image
list-style-position
list-style
marker-offset
- 9.8 Tablas
caption-side
table-layout
border-collapse
border-spacing
empty-cells
- 9.9 Internacionalización
direction
unicode-bidi
- 9.10 contenidos generagos
Los pseudo-elementos :before y :after
content
quotes
counter-reset
counter-increment
- 9.11 Diseño (layout) de página y salto de página
@page
size
marker
page-break-after
page-break-before
page-break-inside
orphans
widows
- 9.12 Entorno de programa
outline-width
outline-style
outline-color
outline (forma abreviada)
- 9.13 Emisión de voz
azimuth
cue-before
cue-after
cue (forma abreviada)
elevation
pause-before
pause-after
pause (forma abreviada)
pitch
pitch-range
play-during
richness
speak
speak-header
speak-punctuation
speek-numeral
speech-rate
stress
voice-family
volume
Inicio página