Fundamentos de CSS

Selectores CSS

Los selectores se utilizan para seleccionar y aplicar estilos a elementos HTML.

Tipos de selectores

• Selector de elemento: Selecciona todos los elementos de un tipo específico.
• Selector de clase: Selecciona elementos con un atributo de clase específico.
• Selector de ID: Selecciona un elemento con un atributo ID específico.
• Selector universal: Selecciona todos los elementos.
• Selectores de atributo: Seleccionan elementos basados en un atributo o valor de atributo.

/* Selector de elemento */
p {
    color: blue;
}

/* Selector de clase */
.destacado {
    font-weight: bold;
}

/* Selector de ID */
#principal {
    width: 800px;
}

/* Selector universal */
* {
    margin: 0;
    padding: 0;
}

/* Selector de atributo */
a[target="_blank"] {
    color: red;
}

Ejemplo interactivo:

Propiedades CSS

Las propiedades CSS definen el aspecto visual de los elementos HTML seleccionados.

Propiedades comunes

• color: Define el color del texto.
• background-color: Define el color de fondo.
• font-size: Define el tamaño de la fuente.
• margin: Define el espacio exterior alrededor de un elemento.
• padding: Define el espacio interior alrededor del contenido.
• border: Define el borde alrededor de un elemento.

/* Ejemplo de propiedades CSS */
.elemento {
    color: #333;
    background-color: #f0f0f0;
    font-size: 16px;
    margin: 10px;
    padding: 15px;
    border: 2px solid #3498db;
    border-radius: 5px;
    width: 300px;
    height: 150px;
}

Ejemplo interactivo:

Box Model (Modelo de Caja)

Todos los elementos HTML son considerados "cajas" con las siguientes propiedades:

• Content (Contenido): El contenido real del elemento (texto, imagen, etc.)
• Padding (Relleno): Espacio entre el contenido y el borde.
• Border (Borde): Línea que rodea el padding y el contenido.
• Margin (Márgen): Espacio exterior que separa el elemento de otros elementos.

/* Ejemplo de Box Model */
.caja {
    width: 300px;       /* Ancho del contenido */
    height: 150px;      /* Alto del contenido */
    padding: 20px;      /* Relleno interno */
    border: 5px solid #3498db;  /* Borde */
    margin: 30px;       /* Margen externo */
    
    /* Para incluir padding y border en el ancho/alto total */
    box-sizing: border-box;
}

Visualización del Box Model:

Flexbox

Flexbox es un modelo de layout unidimensional que permite distribuir el espacio entre los elementos y alinearlos.

Propiedades principales de Flexbox

• display: flex: Define un contenedor flex.
• justify-content: Alinea los elementos horizontalmente.
• align-items: Alinea los elementos verticalmente.
• flex-direction: Define la dirección de los elementos (fila o columna).
• flex-wrap: Controla si los elementos deben pasar a la siguiente línea.

/* Contenedor flex */
.contenedor {
    display: flex;
    justify-content: center;    /* Centrado horizontal */
    align-items: center;        /* Centrado vertical */
    flex-direction: row;        /* Dirección en fila */
    flex-wrap: wrap;            /* Permitir múltiples líneas */
    gap: 10px;                  /* Espacio entre elementos */
}

/* Elementos flex */
.elemento {
    flex: 1;                    /* Capacidad de crecimiento */
    min-width: 100px;           /* Ancho mínimo */
}

Ejemplo de Flexbox:

Ejercicios Prácticos

Practica lo que has aprendido con estos ejercicios:

.destacado {
    color: blue;
    font-weight: bold;
}

.caja {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 5px solid #000;
    margin: 15px;
}

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}