Conceptos Clave

✅ 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 */
}

 

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)