CSS 3

Contenido del Curso

• Introducción a CSS 3
- Definición y evolución de CSS: Breve historia, versiones y evolución hasta CSS3.
- Sintaxis básica de CSS:
+ Selectores
+ Propiedades y valores
+,Cómo escribir una regla CSS.
- Integración de CSS en HTML:
+ Métodos de inclusión inline, internal, external.
- Ventajas y mejoras con respecto a versiones anteriores.

• Buenas Prácticas y Herramientas de desarrollo.
- Mantenimiento y organización del CSS:
+ Importancia de los comentarios
+ Estructura de archivos CSS
+ Convenciones de nombres.
- Herramientas de desarrollo y depuración:
+ Uso de DevTools en navegadores
+ Prefijos CSS
+ Herramientas de preprocesamiento.

• Selectores.
- Tipos de selectores: Explicación y ejemplos de Selectores de:
+ Elementos
+ Clases
+ ID
+ Atributos
+ Pseudo-clases
+ Pseudo-elementos.
+ Combinadores

• Propiedades Básicas.
- Propiedades de texto:
+ Configuración de color
+ Configuración de fuente (font-family)
+ Configuración de tamaño (font-size)
+ Configuración de estilo (font-style)
+ Configuración de peso (font-weight).
- Colores y fondos:
+ Cómo definir colores (nombre, hexadecimal, rgb)
+ Propiedades de fondo (background-color, background-image).

• Modelo de Caja (Box Model).
- Modelo de caja (box model)
+ Explicación
+ Cómo afecta al diseño
+ Ejemplos.
- Margen, borde, padding y contenido.
- Medidas y unidades:
+ Diferentes unidades de medida (px, em, rem, %, vh, vw).
+ Cuándo y cómo usarlas.

• Unidades de medida y proporción.
Unidades de medida
relativas
absolutas
porcentajes
pixeles
puntos

• Diseño de Página
- Layouts:
+ Display
+ Float
+ Position
+ Cómo afectan la disposición de los elementos.
- Flexbox:
+ Conceptos básicos
+ Propiedades (justify-content, align-items)
+ ejemplos de alineación, distribución y orden de elementos.
- Grid Layout:
+ Conceptos básicos
+ Creación de áreas de cuadrícula y alineación.

• Responsividad y Medios de Comunicación.
- Consulta de medios (Media queries):
+ Sintaxis
+ Cómo usarlas para aplicar estilos en función del tamaño de la pantalla
+ Ejemplos.
- Diseño adaptable y responsive:
+ Principios de diseño adaptable
+ Técnicas y buenas prácticas para crear sitios web responsivos.

• Transiciones.
- Transiciones CSS:
+ Propiedades de transición
+ Propiedades de duración
+ Función de temporización
+ Ejemplos de transiciones.

• Animaciones.
- Animaciones keyframe:
+ Cómo definir animaciones con @keyframes
+ Propiedades de animación
+ Ejemplos prácticos.