![Es como una caja flexible que te permite organizar elementos en filas o columnas. Por ejemplo, puedes hacer que los
elementos se distribuyan de manera uniforme o que se alineen al centro.
Ejemplo:
css contenedor
{ display: flex; justify-content: space-between; ]
Esto hace que los elementos dentro de .contenedor se distribuyan con espacio entre ellos.
Flexbox:
Es como una cuadrícula que te permite organizar elementos en filas y columnas de manera
precisa. Es ideal para diseños más complejos, como galerías de imágenes o dashboards.
Ejemplo: css contenedor { display: grid. ]
Grid:
Medias quieres:
Son como reglas que le dicen a la página cómo debe verse en diferentes dispositivos.
Por ejemplo: css media (max-width: 600px) { body { font-size: 14px; } }
Esto hace que el tamaño de la fuente sea más pequeño en pantallas de menos de
600 píxeles (como un celular).](https://image.slidesharecdn.com/elcssavanzado-250326204936-ad4972b4/85/El-CSS-Avanzado-Presentacion-sobre-las-reglas-del-css-importancia-codigos-de-uso-5-320.jpg)
El CSS Avanzado Presentación sobre las reglas del css, importancia, codigos de uso.
- 1. BY: LUISA MARÍA MELO, SANTIAGO VASQUEZ, WILLIAM QUITIAN, MIA MONASTERIO.
- 2. ¿Qué es el Flexbox? Ventajas de usar Flexbox. Ejemplos de Flexbox. ¿Qué es el Grid? Comparación y Definición. Ejemplos de Sistemas de cuadricula. Casos de Uso. . DISEÑO DE LAYOUTS (FLEXBOX Y GRID). Definición y ejemplos de las Pseudo - Clases. ¿Cómo mejorar la interacción con el usuario? Definición y ejemplos de las Pseudo - Elementos. Explicación de su función. Usos creativos en el diseño. PSEUDO-CLASES Y PSEUDO-ELEMENTOS. Definición ¿Qué son las medias queries? Ejemplos. ¿Cómo se adoptan los estilos a diferentes dispositivos? Ejemplos prácticos de un layout responsive. RESPONSIVE DESIGN (MEDIA QUERIES).
- 3. CSS (Cascading Style Sheets) es el lenguaje que le da estilo y diseño a las páginas web. Imagina que HTML es como el esqueleto de una persona (la estructura básica) y CSS es la ropa, el peinado, los tatuajes y todo lo que hace que esa persona se vea bien. ¿qué hace CSS? define colores, fuentes, tamaños de texto y márgenes controla la posición de los elementos (imágenes, textos, botones, etc.) permite crear animaciones y efectos visuales hace que las páginas sean responsiva, o sea, que se vean bien en cualquier dispositivo (celular, tablet, computador)
- 4. ADAPTABILIDAD Y EFICIENCIA: Permite que las páginas sean responsivas en distintos dispositivos y facilita la gestión del estilo aplicándolo a múltiples elementos a la vez. MEJORA VISUAL Y ORGANIZACIÓN: CSS transforma una página de simple texto en un diseño atractivo, con colores, formas y una estructura bien organizada.. IDENTIDAD Y PERSONALIZACIÓN: CSS ayuda a diferenciar marcas con diseños únicos que reflejan su estilo y propósito.
- 5. Es como una caja flexible que te permite organizar elementos en filas o columnas. Por ejemplo, puedes hacer que los elementos se distribuyan de manera uniforme o que se alineen al centro. Ejemplo: css contenedor { display: flex; justify-content: space-between; ] Esto hace que los elementos dentro de .contenedor se distribuyan con espacio entre ellos. Flexbox: Es como una cuadrícula que te permite organizar elementos en filas y columnas de manera precisa. Es ideal para diseños más complejos, como galerías de imágenes o dashboards. Ejemplo: css contenedor { display: grid. ] Grid: Medias quieres: Son como reglas que le dicen a la página cómo debe verse en diferentes dispositivos. Por ejemplo: css media (max-width: 600px) { body { font-size: 14px; } } Esto hace que el tamaño de la fuente sea más pequeño en pantallas de menos de 600 píxeles (como un celular).
- 6. FLEXBOX Flexbox es un modelo de diseño unidimensional que organiza elementos en filas o columnas, permitiendo una alineación flexible y distribución eficiente del espacio. Principales características: 1. Contenedor flexible: Se define con display: flex;, permitiendo organizar elementos en fila (flex-direction: row;) o columna (flex- direction: column;). 2. Alineación de elementos: Controla la alineación con justify- content (horizontal) y align-items (vertical). 3. Distribución del espacio: Usa propiedades como flex-grow, flex-shrink y flex-basis para ajustar automáticamente el tamaño de los elementos dentro del contenedor..
- 7. Container {display: flex; justify-content: Center; align-items: center}.
- 8. Grid es un modelo de diseño bidimensional que organiza los elementos en una cuadrícula de filas y columnas, permitiendo diseños más estructurados y complejos. Principales características: Sistema de cuadrícula: Se define con display: grid;, permitiendo distribuir elementos en filas y columnas con grid-template-columns y grid-template-rows. Áreas de diseño: Permite definir áreas específicas para los elementos con grid-template-areas. Columnas y filas: Se configuran con unidades como fr, px, %, y auto, facilitando diseños adaptables. Ejemplo: container {display: grid; grid-template-columns: 1fr 2fr;grid-template-rows: auto}
- 9. ¿Cuando usar cada uno? Flexbox: Ideal para alineaciones simples en una sola dimensión (fila o columna). Grid: Mejor para estructuras complejas que requieren organización en dos dimensiones (filas y columnas). Ambos pueden combinarse para crear diseños web modernos y flexibles.
- 10. ¿Que son las Pseudo-clases? ¿como se clasifican las Pseudo - Clases? ¿ Y sus ejemplos? ¿como mejoran la interaccion con el usuario?
- 11. HOVER: Cambia el estilo cuando pasas el mouse sobre un elemento. FOCUS: Se activa cuando un elemento, como un campo de texto, recibe el foco. ACTIVE: Se aplica mientras un botón o enlace está siendo presionado. NTH-CHILD(N):Permite aplicar estilos a elementos específicos dentro de una lista o tabla. CHEKCTED: Se usa en checkboxes y botones de opción para cambiar su apariencia cuando están marcados. FIRST-CHILD Y LAST-CHILD: Aplican estilos al primer o último hijo de un contenedor. NOT (SELECTOR): Permite aplicar estilos a todos los elementos excepto los que coincidan con un selector específico.
- 12. ¿CUALES SON SUS CLASIFICACIONES Y EJEMPLOS? Los pseudoelementos son una característica de CSS que permite hacer referencias a «comportamientos virtuales no tangibles».
- 13. Before y after: Se usan para agregar contenido antes o después del texto de un elemento, como decoraciones o iconos. First-letter Aplica estilos a la primera letra de un párrafo, como en revistas o libros. First-line Permite cambiar solo la primera línea de un texto. Selection Modifica el color del texto cuando el usuario lo selecciona con el mouse. Marker Cambia el estilo de los puntos o números en listas. Placeholder Personaliza el texto dentro de los campos de entrada antes de que el usuario escriba algo.
- 14. Las medias queries son una característica de CSS que permite aplicar estilos específicos dependiendo de las características del dispositivo en el que se visualiza una página web, como el tamaño de la pantalla o la orientación del dispositivo. Esto es fundamental para crear diseños web responsivos, que se adapten adecuadamente a diferentes dispositivos como computadoras, tabletas y teléfonos móviles.
- 15. Para adoptar estilos a diferentes dispositivos, los desarrolladores usan estas medias queries para ajustar elementos como el tamaño del texto, las imágenes y la disposición de los elementos en la página. Esto asegura que la experiencia del usuario sea óptima sin importar el dispositivo que utilice.
- 16. En este ejemplo, los elementos dentro de un contenedor se acomodarán automáticamente en filas o columnas dependiendo del espacio disponible, asegurando una presentación visual ordenada y adaptable. css container {display: flex; flex-wrap: wrap;}.item {flex: 1 0 300px; / Cada elemento ocupa al menos 300px /}