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.


Los capítulos del libro:
Utilizar las hojas de estilos en cascada – Crear hojas de estilos CSS – Las fuentes – El texto – Las listas – Tablas y formularios – La interfaz de usuario – Las cajas – El diseño web adaptativo – Los módulos CSS3 de composición de página – Los módulos CSS3 en Working Draft – Ejemplos de composiciones de páginas

Descargas

• Descargar los ejemplos del libro (470 Ko)

Utilizar las hojas de estilos en cascada

1. Objetivos del libro
2. La evolución de las CSS
   1. 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
   1. 1. Principios básicos
   2. 2. Un ejemplo simple
   3. 3. Las reglas de escritura
   4. 4. Las reglas de nomenclatura
3. ¿Dónde crear la hoja de estilos?
   1. 1. Las diferentes posibilidades
   2. 2. En el elemento HTML
   3. 3. En la página HTML
   4. 4. En un archivo CSS
   5. 5. El vínculo con <link>
   6. 6. El vínculo con @import
   7. 7. Creación, vinculación e importaciónmúltiple de reglas CSS
4. Los comentarios
5. Los selectores
   1. 1. Uso de los selectores
   2. 2. El selector universal
   3. 3. Los selectores de tipo
   4. 4. Los selectores de atributo
   5. 5. Los selectores de ID
   6. 6. Los selectores de clase
   7. 7. Las pseudoclases dinámicas de vínculo
   8. 8. Las pseudoclases dinámicas de acción
   9. 9. La pseudoclase de destino
   10. 10. La pseudoclase de idioma
   11. 11. Las pseudoclases de estado
   12. 12. La pseudoclase raíz
   13. 13. Las pseudoclases de primer y último hijo
   14. 14. La pseudoclase de primeros hijos
   15. 15. La pseudoclase de últimos hijos
   16. 16. Las pseudoclases del primer y del últimohijo de un tipo
   17. 17. Las pseudoclases de los primeros y los últimoshijos de un tipo
   18. 18. La pseudoclase de los elementos sin hermanos
   19. 19. La pseudoclase de los elementos sin hermanos de untipo
   20. 20. La pseudoclase de los elementos vacíos
   21. 21. La pseudoclase de negación
   22. 22. Los pseudoelementos
6. Las combinaciones de selectores
   1. 1. El uso de combinaciones
   2. 2. Los selectores descendentes
   3. 3. El selector de hijos
   4. 4. El selector de hijos adyacentes
   5. 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
   1. 1. Utilización de la cascada
   2. 2. El orden de la cascada
   3. 3. Segundo nivel: la regla de importancia
   4. 4. Tercer nivel: la especificidad de los selectores
   5. 5. Cuarto nivel: la proximidad de los selectores
9. Las unidades usadas en las CSS
   1. 1. Utilización de las unidades
   2. 2. Las unidades numéricas
   3. 3. Las unidades de medida absolutas
   4. 4. Las unidades de medida relativas
   5. 5. Otras unidades
10. Los colores
    1. 1. Utilización de los colores
    2. 2. La notación nominal
    3. 3. La notación hexadecimal
    4. 4. La notación RGB
    5. 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
   1. 1. Los formatos de fuente
   2. 2. La regla @font-face
   3. 3. El nombre de las fuentes
   4. 4. Las fuentes incrustadas locales
   5. 5. Indicar varios formatos
   6. 6. Los estilos tipográficos
5. Las fuentes en línea
   1. 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
   1. 1. La propiedad CSS 2.1
   2. 2. Las propiedades CSS 3
   3. 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
    1. 1. Los saltos de línea
    2. 2. La partición de palabras a final de líneasin guion
13. Partición de palabras con guion
    1. 1. Definir las particiones de palabras con guion
    2. 2. Las excepciones en la partición de palabras
14. El contenido generado
    1. 1. El contenido textual antes y después
    2. 2. Los contadores
    3. 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
   1. 1. La anchura de las tablas
   2. 2. Los bordes de las tablas
   3. 3. El espacio entre celdas
   4. 4. La gestión de las celdas vacías
3. Los formularios
   1. 1. Dar formato
   2. 2. Redimensionar un campo
   3. 3. Pseudoclases para formularios
   4. 4. Los campos requeridos y los opcionales
   5. 5. Dar formato al «foco»
   6. 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
   1. 1. La estructura de las cajas
   2. 2. Los diferentes tipos de visualización
   3. 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
   1. 1. Anchuras y alturas estándares
   2. 2. Especificar el cálculo de la anchura
5. El relleno interno
6. Los márgenes externos
   1. 1. Propiedades
   2. 2. La fusión de los márgenes
   3. 3. Un ejemplo de márgenes fijos
   4. 4. Un ejemplo de márgenes automáticos
7. El desborde de contenido
8. Los bordes
   1. 1. Propiedades
   2. 2. Los estilos de bordes
   3. 3. El grosor del borde
   4. 4. El color del borde
   5. 5. La propiedad genérica de los bordes
   6. 6. Los bordes de fantasía
9. Las esquinas redondeadas
   1. 1. Esquinas con círculos
   2. 2. Esquinas con elipses
10. Los fondos
    1. 1. Los colores de fondo
    2. 2. Los degradados de fondo
    3. 3. Las imágenes de fondo
    4. 4. Las demás propiedades de fondo
11. Las sombras paralelas
12. La colocación de las cajas
13. Las cajas flotantes
    1. 1. La propiedad flotante
    2. 2. Un ejemplo sencillo de cajas flotantes
    3. 3. Un ejemplo más elaborado de cajas flotantes
    4. 4. Prohibir la posición flotante
14. La posición de las cajas
    1. 1. La propiedad de posición
    2. 2. La posición relativa
    3. 3. La posición fija
    4. 4. La posición absoluta

El diseño web adaptativo

1. Objetivo
2. Los Media Queries
   1. 1. La recomendación del W3C
   2. 2. Los criterios de los Media Queries
   3. 3. La sintaxis de los Media Queries
   4. 4. Los valores mínimos y máximos
   5. 5. Los operadores lógicos
3. El tamaño de las pantallas
   1. 1. El tamaño físico y la visualización
   2. 2. Los zooms en pantalla
   3. 3. Dos sitios de referencia para el tamaño delas pantallas
4. Un ejemplo de un sitio sencillo
   1. 1. La estructura del sitio
   2. 2. Realizar un diseño adaptativo sencillo
   3. 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
   1. 1. Objetivo del módulo
   2. 2. Definir columnas
   3. 3. Definir los medianiles
   4. 4. Definir saltos de columna
   5. 5. La distribución en varias columnas
3. El módulo Flexible Box Layout
   1. 1. Objetivo del módulo
   2. 2. Las cajas flexibles
   3. 3. La orientación y el sentido de las cajas
   4. 4. El desborde de las cajas
   5. 5. La alineación horizontal de las cajas
   6. 6. La alineación vertical de las cajas
   7. 7. Las propiedades de flexibilidad
4. El módulo Shapes
   1. 1. Objetivo del módulo
   2. 2. Ceñir texto a una forma
5. El módulo Masking
   1. 1. Objetivo del módulo
   2. 2. Ocultar una parte de la imagen

Los módulos CSS3 en Working Draft

1. Objetivo
2. El módulo Animations
   1. 1. Objetivo del módulo
   2. 2. La construcción de las animaciones
   3. 3. Animar una forma
3. El módulo Transforms
   1. 1. Objetivo del módulo
   2. 2. Ejemplos de transformación
   3. 3. Un ejemplo de galería de Polaroid
4. El módulo Transitions
   1. 1. Objetivo del módulo
   2. 2. Poner en marcha las transiciones
   3. 3. Un ejemplo de menú interactivo

Ejemplos de composiciones de páginas

1. Objetivo
2. Composición de página con cajas flotantes
   1. 1. Objetivo
   2. 2. El contenedor general
   3. 3. El encabezado
   4. 4. El logo, el eslogan y el campo de búsqueda
   5. 5. La navegación
   6. 6. La zona central
   7. 7. El pie de página
   8. 8. El código completo de este ejemplo
   9. 9. Los inconvenientes
3. Composición de página en tabla
   1. 1. Objetivo
   2. 2. La estructura de la tabla
   3. 3. Las celdas de la tabla
   4. 4. Los contenidos de la tabla
   5. 5. Visualización y ventajas
4. Diseño adaptativo
   1. 1. Objetivo
   2. 2. Instalar el framework
   3. 3. La cuadrícula de Kube
   4. 4. La cuadrícula de ejemplo
   5. 5. Los selectores universales
   6. 6. Los selectores de las filas
   7. 7. Los selectores de los bloques
   8. 8. La adaptación a las pantallas pequeñas