✅ Conceptos clave de CSS
Dentro de CSS podemos destacar los siguientes elementos claves:
🔹Selectores y Propiedades
1. Los selectores permiten especificar a qué elementos HTML se les aplicará un determinado conjunto de estilos. Existen varios tipos de selectores:
Tipos de selectores:
- Elemento: p { color: blue; }
- Clase: .mi-clase { font-size: 16px; }
- ID: #mi-id { background: red; }
- Combinadores: descendente, hijo, hermano
2. Las propiedades determinan los estilos que se aplican a los elementos seleccionados. Algunas categorías comunes incluyen:
a. Propiedades de texto:
color: color del texto.
font-size: tamaño de fuente.
b. Propiedades de fondo:
background-color: color de fondo.
background-image: imagen de fondo.
background-size, background-repeat: controlan el tamaño y repetición de la imagen de fondo.
c. Propiedades de caja (Box Model):
width, height: ancho y alto.
margin: margen externo.
padding: espacio interno.
border: borde alrededor del contenido.
d. Propiedades de posicionamiento:
position: controla cómo se posiciona el elemento (static, relative, absolute, fixed, sticky).
top, left, right, bottom: definen desplazamientos.
z-index: determina la superposición de elemento
🔹Box Model y Layout
El Box Model o modelo de caja es un concepto fundamental en CSS que describe cómo se construye y visualiza cada elemento HTML en la página. Todo elemento se representa como una caja rectangular que consta de cuatro áreas principales:
Componentes del Modelo de Caja:
- Content (Contenido): Es el área donde se muestra el texto o las imágenes.
- Padding (Relleno): Espacio interno entre el contenido y el borde. Aumenta el área visible del fondo.
- Border (Borde): Línea que rodea el padding y el contenido. Puede tener color, estilo y grosor.
- Margin (Margen): Espacio externo que separa una caja de las cajas vecinas.
Css Ejemplo
.caja {
width: 300px;
padding: 20px;
border: 2px solid #333;
margin: 10px;
box-sizing: border-box;
}
🔹Flexbox y Grid
1. Flexbox (Flexible Box Layout) es un sistema de diseño en CSS pensado para distribuir elementos en una sola dimensión, ya sea en fila (horizontal) o columna (vertical). Es muy útil cuando se necesita alinear y distribuir espacio entre elementos dentro de un contenedor.
Ejemplo de uso
.contenedor-flex {
display: flex; /* Activa el modelo flex */
justify-content: center; /* Centra horizontalmente */
align-items: center; /* Centra verticalmente */
gap: 20px; /* Espacio entre los elementos hijos */
}
2. CSS Grid es un sistema de diseño en CSS para construir layouts en dos dimensiones: filas y columnas. Es ideal para crear estructuras complejas como galerías, tarjetas o tableros.
Ejemplo de uso:
.contenedor-grid {
display: grid; /* Activa Grid Layout */
grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
gap: 15px; /* Espacio entre filas y columnas */
}