Sinopsis

Este libro sobre las CSS3 está dirigido a desarrolladores implicados en la gestión de páginas web que requieren el uso de las hojas de estilo CSS. Cuando finalice su lectura, estará en condiciones de comprender, modificar y adaptar los estilos CSS creados por los diseñadores gráficos, a fin de integrarlos en el desarrollo de sus proyectos.

A lo largo de sus páginas descubrirá cómo utilizar las CSS, lo que implica conocer su sintaxis y las nociones indispensables de herencia y de cascada. Las propiedades CSS estudiadas se ilustran con ejemplos prácticos. Cada capítulo está dedicado a una temática de las CSS: las fuentes tipográficas, el texto, las listas, las tablas y los formularios. El autor trata el tema de la gestión de los contenedores, que permiten aplicar determinadas técnicas para diseñar páginas (cajas flotantes y cajas fijas o en posición absoluta). Presenta la noción de diseño web adaptativo (Responsive Web Design) para crear páginas web que se adaptan a los diferentes soportes de difusión (pantalla de ordenador, tableta y smartphone). Describe las técnicas de animación, transformación y transición. En el último capítulo se proporcionan ejemplos de composición de páginas.

Todos los ejemplos que se utilizan en el libro pueden descargarse desde www.ediciones-eni.com.

Índice

Utilizar las hojas de estilos en cascada
1. Objetivos del libro
2. La evolución de las CSS
2.1 Los módulos CSS3
2.2 Etapas en la concepción de las CSS3
3. Los prefijos de los navegadores
4. El sitio Can I use
5. Las propiedades CSS
6. Estructura del libro
7. Ejemplos para descargar
Crear hojas de estilos CSS
1. Objetivo
2. La sintaxis
2.1 Principios básicos
2.2 Un ejemplo simple
2.3 Las reglas de escritura
2.4 Las reglas de nomenclatura
3. ¿ Dónde crear la hoja de estilos ?
3.1 Las diferentes posibilidades
3.2 En el elemento HTML
3.3 En la página HTML
3.4 En un archivo CSS
3.5 El vínculo con <link>
3.6 El vínculo con @import
3.7 Creación, vinculación e importación múltiple de reglas CSS
4. Los comentarios
5. Los selectores
5.1 Uso de los selectores
5.2 El selector universal
5.3 Los selectores de tipo
5.4 Los selectores de atributo
5.5 Los selectores de ID
5.6 Los selectores de clase
5.7 Las pseudoclases dinámicas de vínculo
5.8 Las pseudoclases dinámicas de acción
5.9 La pseudoclase de destino
5.10 La pseudoclase de idioma
5.11 Las pseudoclases de estado
5.12 La pseudoclase raíz
5.13 Las pseudoclases de primer y último hijo
5.14 La pseudoclase de primeros hijos
5.15 La pseudoclase de últimos hijos
5.16 Las pseudoclases del primer y del último hijo de un tipo
5.17 Las pseudoclases de los primeros y los últimos hijos de un tipo
5.18 La pseudoclase de los elementos sin hermanos
5.19 La pseudoclase de los elementos sin hermanos de un tipo
5.20 La pseudoclase de los elementos vacíos
5.21 La pseudoclase de negación
5.22 Los pseudoelementos
6. Las combinaciones de selectores
6.1 El uso de combinaciones
6.2 Los selectores descendentes
6.3 El selector de hijos
6.4 El selector de hijos adyacentes
6.5 El selector de hijo general
6.6 Los grupos de selectores
7. La herencia en la anidación de elementos
8. La cascada en la aplicación de las propiedades
8.1 Utilización de la cascada
8.2 El orden de la cascada
8.3 Segundo nivel: la regla de importancia
8.4 Tercer nivel: la especificidad de los selectores
8.5 Cuarto nivel: la proximidad de los selectores
9. Las unidades usadas en las CSS
9.1 Utilización de las unidades
9.2 Las unidades numéricas
9.3 Las unidades de medida absolutas
9.4 Las unidades de medida relativas
9.5 Otras unidades
10. Los colores
10.1 Utilización de los colores
10.2 La notación nominal
10.3 La notación hexadecimal
10.4 La notación RGB
10.5 La notación HSL
11. Las direcciones de Internet
Las fuentes
1. Objetivo
2. La aplicación de las fuentes tipográficas
3. Las fuentes locales
4. Las fuentes incrustadas
4.1 Los formatos de fuente
4.2 La regla @font-face
4.3 El nombre de las fuentes
4.4 Las fuentes incrustadas locales
4.5 Indicar varios formatos
4.6 Los estilos tipográficos
5. Las fuentes en línea
5.1 Las Google Fonts
6. El grosor de los caracteres
7. La anchura de los caracteres
8. El estilo de los caracteres
9. El tamaño de los caracteres
10. Ajustar el tamaño de los caracteres
11. Las versalitas
12. La propiedad genérica
13. El color de los caracteres
14. Los desplazamientos verticales de los caracteres
15. Otras propiedades (a punto de llegar)
El texto
1. Objetivo
2. Los modos de escritura
3. El interletraje (espaciado entre letras)
4. El espaciado entre palabras
5. La decoración
5.1 La propiedad CSS 2.1
5.2 Las propiedades CSS 3
5.3 La sombra paralela
6. La caja del texto (mayúsculas/minúsculas)
7. La alineación del texto
8. La sangría de primera línea
9. El interlineado
10. Los espacios blancos
11. Las tabulaciones
12. Los saltos de línea y la partición de palabras a final de línea
12.1 Los saltos de línea
12.2 La partición de palabras a final de línea sin guion
13. Partición de palabras con guion
13.1 Definir las particiones de palabras con guion
13.2 Las excepciones en la partición de palabras
14. El contenido generado
14.1 El contenido textual antes y después
14.2 Los contadores
14.3 Las CSS3
15. El desborde de texto
Las listas
1. Objetivo
2. Los estilos de marcas
3. Las marcas con imágenes
4. La posición de las marcas
5. La sintaxis corta
6. Las CSS3
Tablas y formularios
1. Objetivo
2. Las tablas
2.1 La anchura de las tablas
2.2 Los bordes de las tablas
2.3 El espacio entre celdas
2.4 La gestión de las celdas vacías
3. Los formularios
3.1 Dar formato
3.2 Redimensionar un campo
3.3 Pseudoclases para formularios
3.4 Los campos requeridos y los opcionales
3.5 Dar formato al «foco»
3.6 Validar la información introducida
La interfaz de usuario
1. Objetivo
2. Los contornos dinámicos
3. Los cursores
4. Las propiedades «de riesgo»
Las cajas
1. Objetivo
2. El modelo de caja
2.1 La estructura de las cajas
2.2 Los diferentes tipos de visualización
2.3 La propiedad de visualización de las cajas
3. La visualización de la caja
4. La anchura y la altura de la caja
4.1 Anchuras y alturas estándares
4.2 Especificar el cálculo de la anchura
5. El relleno interno
6. Los márgenes externos
6.1 Propiedades
6.2 La fusión de los márgenes
6.3 Un ejemplo de márgenes fijos
6.4 Un ejemplo de márgenes automáticos
7. El desborde de contenido
8. Los bordes
8.1 Propiedades
8.2 Los estilos de bordes
8.3 El grosor del borde
8.4 El color del borde
8.5 La propiedad genérica de los bordes
8.6 Los bordes de fantasía
9. Las esquinas redondeadas
9.1 Esquinas con círculos
9.2 Esquinas con elipses
10. Los fondos
10.1 Los colores de fondo
10.2 Los degradados de fondo
10.3 Las imágenes de fondo
10.4 Las demás propiedades de fondo
11. Las sombras paralelas
12. La colocación de las cajas
13. Las cajas flotantes
13.1 La propiedad flotante
13.2 Un ejemplo sencillo de cajas flotantes
13.3 Un ejemplo más elaborado de cajas flotantes
13.4 Prohibir la posición flotante
14. La posición de las cajas
14.1 La propiedad de posición
14.2 La posición relativa
14.3 La posición fija
14.4 La posición absoluta
El diseño web adaptativo
1. Objetivo
2. Los Media Queries
2.1 La recomendación del W3C
2.2 Los criterios de los Media Queries
2.3 La sintaxis de los Media Queries
2.4 Los valores mínimos y máximos
2.5 Los operadores lógicos
3. El tamaño de las pantallas
3.1 El tamaño físico y la visualización
3.2 Los zooms en pantalla
3.3 Dos sitios de referencia para el tamaño de las pantallas
4. Un ejemplo de un sitio sencillo
4.1 La estructura del sitio
4.2 Realizar un diseño adaptativo sencillo
4.3 Los resultados
5. Imágenes adaptativas
Los módulos CSS de composición de página
1. Objetivo
2. El módulo Multi-column Layout
2.1 Objetivo del módulo
2.2 Definir columnas
2.3 Definir los medianiles
2.4 Definir saltos de columna
2.5 La distribución en varias columnas
3. El módulo Flexible Box Layout
3.1 Objetivo del módulo
3.2 Las cajas flexibles
3.3 La orientación y el sentido de las cajas
3.4 El desborde de las cajas
3.5 La alineación horizontal de las cajas
3.6 La alineación vertical de las cajas
3.7 Las propiedades de flexibilidad
4. El módulo Shapes
4.1 Objetivo del módulo
4.2 Ceñir texto a una forma
5. El módulo Masking
5.1 Objetivo del módulo
5.2 Ocultar una parte de la imagen
Los módulos CSS3 en Working Draft
1. Objetivo
2. El módulo Animations
2.1 Objetivo del módulo
2.2 La construcción de las animaciones
2.3 Animar una forma
3. El módulo Transforms
3.1 Objetivo del módulo
3.2 Ejemplos de transformación
3.3 Un ejemplo de galería de Polaroid
4. El módulo Transitions
4.1 Objetivo del módulo
4.2 Poner en marcha las transiciones
4.3 Un ejemplo de menú interactivo
Ejemplos de composiciones de páginas
1. Objetivo
2. Composición de página con cajas flotantes
2.1 Objetivo
2.2 El contenedor general
2.3 El encabezado
2.4 El logo, el eslogan y el campo de búsqueda
2.5 La navegación
2.6 La zona central
2.7 El pie de página
2.8 El código completo de este ejemplo
2.9 Los inconvenientes
3. Composición de página en tabla
3.1 Objetivo
3.2 La estructura de la tabla
3.3 Las celdas de la tabla
3.4 Los contenidos de la tabla
3.5 Visualización y ventajas
4. Diseño adaptativo
4.1 Objetivo
4.2 Instalar el framework
4.3 La cuadrícula de Kube
4.4 La cuadrícula de ejemplo
4.5 Los selectores universales
4.6 Los selectores de las filas
4.7 Los selectores de los bloques
4.8 La adaptación a las pantallas pequeñas
índice