card


Aquí tienes el código HTML con el CSS completamente documentado, explicando cada propiedad y su propósito en la maquetación:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarjeta Documentada</title>
</head>
<style>
    /* 
    ===============================================
    SELECTOR UNIVERSAL - Reset inicial
    ===============================================
    Elimina los márgenes y paddings por defecto que todos los navegadores
    aplican a los elementos. Así partimos de una base limpia y consistente.
    */
    *{
        margin: 0;
        padding: 0;
    }

    /* 
    ===============================================
    BODY - Contenedor principal de la página
    ===============================================
    - background-color: Define el color de fondo general (#f0f0f0 es un gris claro)
    - Es un elemento de bloque, por lo que ocupa todo el ancho disponible
    - Este color de fondo será el "lienzo" sobre el que se mostrará la tarjeta
    */
    body{
        background-color: #f0f0f0;
    }

    /* 
    ===============================================
    .container - Contenedor externo (PADRE de .card)
    ===============================================
    - display: flex - Convierte este contenedor en un flex container
    - justify-content: center - Centra horizontalmente el elemento hijo (.card)
    - padding-top: 10px - Añade un pequeño espacio superior para separar la 
      tarjeta del borde superior de la página
    
    FLUJO DE CAJAS: Aunque .card es un elemento de bloque que por defecto
    ocuparía todo el ancho, al estar dentro de un flex container, su
    comportamiento se ajusta al contexto flex.
    */
    .container{
        display: flex;
        justify-content: center;
        padding-top: 10px;  
    }

    /* 
    ===============================================
    .card - La tarjeta principal (PADRE de header, body, footer)
    ===============================================
    - background-color: white - Fondo blanco para destacar sobre el fondo gris
    - display: flex - Crea un contexto flex para sus hijos
    - flex-direction: column - Los hijos se colocarán en COLUMNA (uno debajo de otro)
    - width: 500px - Ancho fijo de la tarjeta (limita el espacio de TODOS los hijos)
    - border-radius: 8px - Bordes redondeados en TODAS las esquinas
    - box-shadow: 0 2px 5px rgba(0,0,0,0.1) - Sombra sutil para dar efecto de elevación
      (NOTA: Había una coma extra en rgba, la he corregido: rgba(0,0,0,0.1))

    JERARQUÍA PADRE-HIJO:
    - El width:500px LIMITA el espacio disponible para header, body y footer
    - El border-radius afecta a la tarjeta, y los hijos deben adaptarse
    - El contexto flex permite controlar la disposición de los hijos
    */
    .card{
        background-color: white;
        display: flex;
        flex-direction: column;
        width: 500px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* 
    ===============================================
    .card-header - Cabecera de la tarjeta (HIJO de .card)
    ===============================================
    - background-color: #f8f9fa - Fondo ligeramente gris para diferenciar la cabecera
    - border-radius: 8px 8px 0 0 - Redondea SOLO las esquinas superiores
      (hereda el concepto del padre pero se adapta)
    - padding: 20px - Espacio interno alrededor del contenido (h1)
    - display: flex - Convierte este elemento en flex container para centrar el h1
    - align-items: center - Centra verticalmente el h1
    - justify-content: center - Centra horizontalmente el h1
    - border-bottom: 1px solid #dee2e6 - Línea divisoria sutil entre header y body

    AGRUPACIÓN VISUAL: Este div agrupa el título principal, diferenciándolo
    visualmente del contenido gracias a su fondo y borde inferior.
    */
    .card-header{
        background-color: #f8f9fa;
        border-radius: 8px 8px 0 0;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #dee2e6;
    }

    /* 
    ===============================================
    .card-body - Cuerpo de la tarjeta (HIJO de .card)
    ===============================================
    - padding: 30px 20px - Espacio interno: 30px arriba/abajo, 20px izquierda/derecha
    - background: white - Fondo blanco (aunque ya lo hereda, se especifica por claridad)
    - display: flex - Convierte este contenedor en flex container
    - flex-direction: column - Sus hijos (h2, p, button) se colocarán en columna
    - gap: 15px - Espacio ENTRE los hijos (h2, p y button). Fundamental para la
      relación visual entre elementos agrupados.

    AGRUPACIÓN VISUAL: Este div agrupa TODO el contenido principal. El gap:15px
    crea una relación uniforme entre los elementos, indicando que están
    relacionados pero son distintos.
    */
    .card-body{
        padding: 30px 20px;
        background: white;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* 
    ===============================================
    .card-body p y .card-body h2 - Elementos de texto (HIJOS de .card-body)
    ===============================================
    - width: 100% - Ocupan todo el ancho disponible del padre
    - text-align: center - Centran el texto horizontalmente
    
    FLUJO DE CAJAS: Aunque están dentro de un flex container, al tener
    width:100% se aseguran de ocupar todo el espacio horizontal, lo que
    contribuye a la sensación de "bloques" de texto centrados.
    */
    .card-body p {
        width: 100%;
        text-align: center;
    }

    .card-body h2 {
        width: 100%;
        text-align: center;
    }

    /* 
    ===============================================
    .card-body button - El botón (HIJO de .card-body)
    ===============================================
    - align-self: flex-start - ¡PROPIEDAD CLAVE! En un flex container con 
      flex-direction: column, los hijos por defecto se estiran (stretch) para 
      ocupar todo el ancho. Esta propiedad le dice al botón: "no te estires,
      alíneate al inicio (izquierda) y mantén tu tamaño natural".
    
    - background-color: #0d6efd - Azul primario (como Bootstrap)
    - color: white - Texto blanco para contraste
    - border: none - Quita el borde por defecto del botón
    - padding: 10px 20px - Espacio interno: 10px arriba/abajo, 20px izq/der
    - border-radius: 6px - Bordes ligeramente redondeados
    - cursor: pointer - Cambia el cursor a manita al pasar por encima
    - font-size: 16px - Tamaño de fuente legible

    JERARQUÍA PADRE-HIJO: 
    El padre (.card-body) con display:flex crea el contexto que permite
    que align-self funcione. Sin el padre flex, align-self no tendría efecto.
    */
    .card-body button {
        align-self: flex-start;
        background-color: #0d6efd;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
    }

    /* 
    ===============================================
    .card-footer - Pie de la tarjeta (HIJO de .card)
    ===============================================
    (No tiene estilos definidos en el CSS original, por lo que hereda
    los estilos por defecto. Al ser un div, es un elemento de bloque,
    por lo que ocupará todo el ancho y tendrá el fondo blanco del padre.
    El texto "3" aparecerá en la esquina superior izquierda por defecto.)
    
    Para mejorarlo, se podría añadir:
    - background-color: #f8f9fa (como el header)
    - padding: 15px 20px
    - text-align: center o border-top
    */
</style>
<body>
    <!-- 
    ESTRUCTURA DE CAJAS (Jerarquía Padre-Hijo):

    body (fondo gris)
    └── .container (flex, centra horizontalmente)
        └── .card (ancho 500px, fondo blanco, sombra) [PADRE]
            ├── .card-header (fondo gris claro, borde inferior) [HIJO]
            │   └── h1 (texto centrado)
            ├── .card-body (padding, flex columna, gap) [HIJO]
            │   ├── h2 (texto centrado, ancho completo)
            │   ├── p (texto centrado, ancho completo)
            │   └── button (align-self:flex-start, azul)
            └── .card-footer (texto "3", sin estilos) [HIJO]
    -->
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h1>Sotelo</h1>
            </div>
            <div class="card-body">
                <h2>Special title treatment</h2>
                <p>With supporting text below as</p>
                <button>Go somewhere</button>
            </div>
            <div class="card-footer">
                3
            </div>
        </div>
    </div>  
</body>
</html>

Resumen de conceptos aplicados:

ConceptoEjemplo en el código
Maquetación de cajas.card es la caja principal que contiene .card-header, .card-body, .card-footer
Flujo natural de bloquesLos div son bloques y se apilan verticalmente
Alteración del flujo con Flexbox.card-body usa flex para organizar h2, p y button en columna
Agrupación visualgap:15px en .card-body separa uniformemente los elementos relacionados
Jerarquía padre-hijo.card define el ancho (500px) que limita a todos los hijos
Contexto flex.card-body permite que align-self:flex-start funcione en el botón
Reset inicial* {margin:0; padding:0} elimina estilos por defecto del navegador

 ¡Excelente pregunta! Vamos a desglosar este código HTML y CSS en detalle, enfocándonos en los conceptos que mencionaste. Es una base fantástica para entender cómo funciona el diseño web.

Aquí tienes la explicación estructurada:

1. La Maquetación de Cajas

La maquetación de cajas es el proceso de dividir la interfaz en rectángulos (cajas) y luego colocar y estilizar esas cajas. En tu código, las cajas principales son:

  1. body: Es la caja que lo contiene todo. En este caso, actúa como el fondo general de la página.

  2. div class="container": Es una caja contenedora. Su única función es centrar horizontalmente la tarjeta (card).

  3. div class="card": Esta es la caja más importante, la "tarjeta" principal. Es un rectángulo blanco con sombra que agrupa todo el contenido.

  4. div class="card-header": La primera sección de la tarjeta. Es una caja que contiene el título "Sotelo".

  5. div class="card-body": La segunda sección. Es una caja que contiene el título secundario (h2), el párrafo (p) y el botón (button).

  6. div class="card-footer": La tercera sección. Es una caja que contiene el texto "3".

Visualmente, estas cajas se apilan unas dentro de otras y unas encima de otras, formando la estructura que ves en pantalla. Es como un juego de bloques de construcción.

2. El Flujo Natural de las Cajas (Bloque vs. En Línea)

El flujo natural es cómo se colocan los elementos por defecto en una página web, sin que nosotros intervengamos demasiado. Aquí se ve una mezcla muy interesante:

  • Elementos de Bloque: Por defecto, ocupan todo el ancho disponible y generan un "salto de línea" después de ellos, apilándose verticalmente.

    • body, div (.container, .card, .card-header, .card-body, .card-footer), h1, h2, p son elementos de bloque. Por eso, aunque no hubiera CSS, el <h1> estaría encima del <div class="card-body">, y el <h2> dentro del card-body estaría encima del <p>.

  • Elementos en Línea: Ocupan solo el espacio de su contenido y no generan saltos de línea, colocándose uno al lado del otro si hay espacio.

    • button es un elemento en línea por defecto. Esto es clave: un botón, naturalmente, no quiere ocupar todo el ancho de su contenedor, solo lo necesario para su texto.

¿Cómo se comportan en tu código?

  1. El body, .container y .card son bloques y se apilan verticalmente (aunque solo hay una tarjeta).

  2. Dentro de .card, los hijos (.card-header, .card-body, .card-footer) son también bloques, por lo que se apilan verticalmente de forma natural. Esto ya nos da la estructura de tres franjas horizontales.

  3. La magia de display: flex: El flujo natural se altera intencionadamente con Flexbox.

    • En .card, display: flex y flex-direction: column hace que sus hijos (los tres divs internos) se conviertan en elementos flexibles que se colocan en columna. Esto refuerza el apilamiento vertical, pero ahora tenemos un control mucho más fino sobre ellos.

    • En .card-body, el mismo principio: display: flex y flex-direction: column convierte al <h2>, <p> y <button> en elementos flexibles, colocándolos en columna.

3. La Agrupación de Elementos

La agrupación es la clave para crear relaciones visuales y componentes reutilizables.

  • .card: Es el grupo más grande. Agrupa visualmente el encabezado, el cuerpo y el pie de página. Al ponerle un fondo blanco, un borde redondeado y una sombra, le dices al usuario: "Estos tres elementos (header, body, footer) son una sola unidad, una tarjeta".

  • .card-header: Agrupa el título principal (h1). Visualmente, al tener un fondo ligeramente gris (#f8f9fa) y una línea inferior (border-bottom), se separa del cuerpo y actúa como la "cabecera" de la tarjeta.

  • .card-body: Es el grupo más interesante. Agrupa el título secundario, la descripción y el botón. El espacio entre ellos se gestiona de manera uniforme con gap: 15px. Esto crea una relación visual de "estos elementos forman el contenido principal y están relacionados". Sin gap, estarían pegados y parecerían un bloque de texto confuso.

  • .card-footer: Agrupa el texto "3", actuando como el cierre de la tarjeta.

4. La Jerarquía Padre-Hijo

Esta es la parte más importante del CSS. Las propiedades de un elemento padre afectan drásticamente a sus hijos.

  • Contención (El Padre como Límite):

    • El elemento .card tiene un width: 500px. Esto significa que todos sus hijos (.card-header, .card-body, .card-footer) están forzados a vivir dentro de ese ancho. Su contenido se ajustará a ese límite. El .card-header no puede ser más ancho de 500px.

    • El border-radius: 8px del .card afecta a las esquinas de la tarjeta. Luego, el .card-header tiene border-radius: 8px 8px 0 0, que "recorta" las esquinas superiores. Esto es una herencia del concepto, no una propiedad heredada automáticamente, sino una adaptación para que encaje perfectamente con el padre.

  • Herencia (Propiedades que se transmiten):

    • La propiedad color (color del texto) es heredable. Si el body tuviera un color: gray;, todo el texto de la tarjeta sería gris. En tu código, no se define un color, por lo que se usa el negro por defecto del navegador.

    • La propiedad font-family (tipo de letra) también es heredable. Aquí no se define, pero si se definiera en el body, todos los textos la heredarían.

  • El Poder de Flexbox en el Padre:

    • .card (padre de header, body, footer): Al ser display: flex con flex-direction: column, establece un contexto de formato flexible para sus hijos. Ahora, estos hijos (que antes eran simples bloques) se comportan según las reglas de Flexbox. Por ejemplo, podríamos hacer que el card-body creciera para ocupar todo el espacio restante con flex-grow: 1, aunque en tu código no se hace.

    • .card-body (padre del h2, p, button): Aquí es donde vemos el impacto más claro.

      1. display: flex y flex-direction: column colocan a los hijos en una columna.

      2. gap: 15px es una propiedad del padre que afecta directamente el espacio entre los hijos. Es una forma muy limpia de gestionar la separación.

      3. El Caso del Botón: Por defecto, en un contenedor Flex con flex-direction: column, los hijos se estiran para ocupar todo el ancho del contenedor (el eje transversal). Si no se hiciera nada, el botón (que es un elemento en línea) se convertiría en un "flex item" y se estiraría, ocupando los 500px de ancho, lo cual visualmente es horrible.

      4. La Solución align-self: flex-start: Esta propiedad se aplica al hijo (el botón), pero solo tiene sentido porque el padre (.card-body) es un contenedor flex. align-self le dice al padre: "Para este hijo en concreto, ignora la regla de estirado por defecto y alínealo al inicio del eje transversal (a la izquierda)". Así, el botón vuelve a su tamaño natural (solo el texto con su padding), solucionando el problema.

En resumen, el padre proporciona el lienzo y las reglas del juego, y los hijos se colocan y dibujan dentro de ese marco, pudiendo tener propiedades específicas que maticen o anulen las reglas generales del padre (como hace el botón).

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más