css4-ejer2-html


 

 EXPLICACIÓN DETALLADA DE CÓMO FUNCIONA

Arquitectura completa de la página

text
┌─────────────────────────────────────────────────────────────────────────┐
│  BODY (fondo gris #f0f0f0)                                              │
│  ┌───────────────────────────────────────────────────────────────────┐  │
│  │  .container (display: flex, justify-content: center)              │  │
│  │  ┌─────────────────────────────────────────────────────────────┐  │  │
│  │  │  .card (width:600px, fondo blanco)                          │  │  │
│  │  │  ┌───────────────────────────────────────────────────────┐  │  │  │
│  │  │  │  .card-header (fondo gris, borde inferior)            │  │  │  │
│  │  │  │  ┌─────────────────────────────────────────────────┐  │  │  │  │
│  │  │  │  │  H1: "Sotelo" (centrado)                        │  │  │  │  │
│  │  │  │  └─────────────────────────────────────────────────┘  │  │  │  │
│  │  │  ├───────────────────────────────────────────────────────┤  │  │  │
│  │  │  │  .card-body (padding 30px 20px, display:flex column)  │  │  │  │
│  │  │  │  ┌─────────────────────────────────────────────────┐  │  │  │  │
│  │  │  │  │  H2: "Lista de Productos" (centrado)            │  │  │  │  │
│  │  │  │  ├─────────────────────────────────────────────────┤  │  │  │  │
│  │  │  │  │  P: "Productos disponibles en nuestra tienda"   │  │  │  │  │
│  │  │  │  ├─────────────────────────────────────────────────┤  │  │  │  │
│  │  │  │  │  TABLA (.tabla-productos, width:100%)           │  │  │  │  │
│  │  │  │  │  ┌───────────────────────────────────────────┐  │  │  │  │  │
│  │  │  │  │  │  THEAD: ID, Producto, Categoría, Precio,  │  │  │  │  │  │
│  │  │  │  │  │         Stock (fondo gris claro, negrita)  │  │  │  │  │  │
│  │  │  │  │  ├───────────────────────────────────────────┤  │  │  │  │  │
│  │  │  │  │  │  TBODY: 5 filas de productos              │  │  │  │  │  │
│  │  │  │  │  │  - Filas pares: fondo #f8f9fa (cebra)     │  │  │  │  │  │
│  │  │  │  │  │  - Hover: fondo #e9ecef                   │  │  │  │  │  │
│  │  │  │  │  └───────────────────────────────────────────┘  │  │  │  │  │
│  │  │  │  ├─────────────────────────────────────────────────┤  │  │  │  │
│  │  │  │  │  BUTTON: "Ver catálogo completo"               │  │  │  │  │
│  │  │  │  └─────────────────────────────────────────────────┘  │  │  │  │
│  │  │  ├───────────────────────────────────────────────────────┤  │  │  │
│  │  │  │  .card-footer (texto centrado, gris claro)            │  │  │  │
│  │  │  │  "Total de productos: 5 | Actualizado hoy"            │  │  │  │
│  │  │  └───────────────────────────────────────────────────────┘  │  │  │
│  │  └─────────────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────┘

Conceptos clave de las tablas en CSS

1. border-collapse: collapse

css
.tabla-productos {
    border-collapse: collapse;  /* Bordes simples en lugar de dobles */
}

  • Sin collapse: Cada celda tiene su propio borde → bordes DOBLES

  • Con collapse: Los bordes se fusionan → bordes SIMPLES

Visualmente:

text
SIN collapse:              CON collapse:
┌──────┬──────┐           ┌──────┬──────┐
│      │      │           │      │      │
│  a   │  b   │           │  a   │  b   │
│      │      │           │      │      │
├──────┼──────┤           ├──────┼──────┤
│      │      │           │      │      │
│  c   │  d   │           │  c   │  d   │
│      │      │           │      │      │
└──────┴──────┘           └──────┴──────┘
(Doble borde)             (Borde único)

2. nth-child(even) - Efecto "raya de cebra"

css
.tabla-productos tbody tr:nth-child(even) {
    background-color: #f8f9fa;  /* Filas pares: fondo gris claro */
}

  • nth-child(even) = filas 2, 4, 6, 8...

  • nth-child(odd) = filas 1, 3, 5, 7...

  • Mejora la LEGIBILIDAD al alternar colores

3. tr:hover - Feedback visual

css
.tabla-productos tbody tr:hover {
    background-color: #e9ecef;  /* Resalta la fila bajo el mouse */
}

  • Da una respuesta VISUAL inmediata al usuario

  • Ayuda a saber qué fila está seleccionando

Estructura semántica de una tabla HTML

html
<table>
    <thead>     ← Cabecera (títulos de columnas)
        <tr>    ← Fila de cabecera
            <th>Título 1</th>  ← th = cabecera (negrita por defecto)
            <th>Título 2</th>
        </tr>
    </thead>
    
    <tbody>     ← Cuerpo (datos reales)
        <tr>    ← Fila de datos
            <td>Dato 1</td>    ← td = datos normales
            <td>Dato 2</td>
        </tr>
    </tbody>
    
    <tfoot>     ← Pie de tabla (totales, sumas) - opcional
        <tr>
            <td>Total:</td>
            <td>100</td>
        </tr>
    </tfoot>
</table>

🧠 MÉTODO PARA APRENDER Y MEMORIZAR

Técnica 1: La "Regla de las 5 propiedades" para tablas

PropiedadValor comúnQué haceFrase para recordar
border-collapsecollapseFusiona bordes"Colapso los bordes para que sean simples"
width100%Ocupa todo el ancho"La tabla se estira como chicle"
padding12pxEspacio interno"Las celdas respiran con aire"
text-alignleftAlinea texto"El texto se va a la izquierda"
border1px solid #dee2e6Borde gris"Borde sutil como línea de cuaderno"

Técnica 2: Asociaciones visuales (mnemotecnia)

text
border-collapse: collapse  → 🧩 "Fusiona piezas como rompecabezas"
nth-child(even)           → 🦓 "Cebra: rayas en filas pares"
tr:hover                  → 🖱️ "El ratón ilumina el camino"
th                        → 👑 "Corona (cabecera, más importante)"
td                        → 📦 "Datos normales (cajas simples)"
thead / tbody             → 📑 "Separador de secciones como en un libro"

Técnica 3: El método de "construcción por capas" para tablas

text
CAPA 1: Contenedor de la tabla
.tabla-productos {
    width: 100%;
    border-collapse: collapse;
}

CAPA 2: Celdas (unificar estilo)
.tabla-productos th,
.tabla-productos td {
    border: 1px solid #dee2e6;
    padding: 12px;
    text-align: left;
}

CAPA 3: Cabecera (diferenciar)
.tabla-productos th {
    background-color: #f8f9fa;
    font-weight: bold;
}

CAPA 4: Efectos visuales (mejora UX)
.tabla-productos tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
.tabla-productos tbody tr:hover {
    background-color: #e9ecef;
}

Técnica 4: Práctica de "5 minutos diarios" (plan de una semana)

DíaActividadTiempo
LunesEscribe la estructura HTML de una tabla (thead + tbody)5 min
MartesEscribe el CSS básico (border-collapse + bordes)5 min
MiércolesAñade padding y text-align a las celdas5 min
JuevesAñade efecto "cebra" con nth-child(even)5 min
ViernesAñade efecto hover (tr:hover)5 min
SábadoCrea una tabla de 4 columnas con 6 filas desde cero15 min
DomingoExplica en voz alta cómo funciona cada propiedad15 min

Técnica 5: Preguntas de autoevaluación

  1. ¿Qué diferencia hay entre <th> y <td>?

    • Respuesta: <th> es para celdas de CABECERA (negrita por defecto), <td> para celdas de DATOS

  2. ¿Para qué sirve border-collapse: collapse?

    • Respuesta: Fusiona los bordes de las celdas para que no aparezcan dobles

  3. ¿Qué significa nth-child(even)?

    • Respuesta: Selecciona los elementos en posiciones pares (2º, 4º, 6º, etc.)

  4. ¿Por qué separamos <thead> y <tbody>?

    • Respuesta: Para organizar semánticamente la tabla y aplicar estilos diferenciados

  5. ¿Qué hace el selector tr:hover?

    • Respuesta: Aplica estilos cuando el mouse pasa por encima de una fila (feedback visual)

Técnica 6: El "esqueleto mental" que debes memorizar

html
<!-- ESTRUCTURA BÁSICA DE TABLA (MEMORIZA ESTO) -->
<table>
    <thead>
        <tr><th>Col1</th><th>Col2</th></tr>
    </thead>
    <tbody>
        <tr><td>Dato1</td><td>Dato2</td></tr>
        <tr><td>Dato3</td><td>Dato4</td></tr>
    </tbody>
</table>
css
/* CSS BÁSICO DE TABLA (MEMORIZA ESTO) */
.tabla {
    width: 100%;
    border-collapse: collapse;
}
.tabla th, .tabla td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
.tabla th {
    background-color: #f8f9fa;
    font-weight: bold;
}
.tabla tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
.tabla tbody tr:hover {
    background-color: #e9ecef;
}

Técnica 7: La "prueba de la tabla completa"

Cierra los ojos y visualiza esta secuencia:

text
1. Crear contenedor de tabla: <table class="tabla">
2. Añadir cabecera: <thead> → <tr> → 5 <th>
3. Añadir cuerpo: <tbody> → filas con <tr> → celdas con <td>
4. En CSS: border-collapse, width:100%, border, padding
5. Mejorar: nth-child(even) para cebra, hover para interactividad

Técnica 8: Comparativas visuales para entender

SIN border-collapse:

text
┌─────┬─────┐
│     │     │  ← Bordes dobles
├─────┼─────┤
│     │     │
└─────┴─────┘

CON border-collapse: collapse:

text
┌─────┬─────┐
│     │     │  ← Bordes simples
├─────┼─────┤
│     │     │
└─────┴─────┘

SIN nth-child(even):

text
Fila 1: fondo blanco
Fila 2: fondo blanco  ← Difícil de leer
Fila 3: fondo blanco

CON nth-child(even):

text
Fila 1: fondo blanco
Fila 2: fondo gris    ← ¡Fácil de leer!
Fila 3: fondo blanco

🎯 Resumen final: Lo que DEBES memorizar

Propiedades esenciales de tablas:

css
border-collapse: collapse;  /* Bordes simples */
padding: 12px;              /* Espacio en celdas */
text-align: left;           /* Alineación izquierda */
border: 1px solid #dee2e6;  /* Borde gris suave */

Selectores esenciales para tablas:

css
th { font-weight: bold; }           /* Cabecera negrita */
tr:nth-child(even) { }              /* Filas pares */
tr:hover { }                        /* Efecto hover */

Estructura HTML esencial:

html
<table>
    <thead>
        <tr><th></th></tr>  <!-- Cabecera -->
    </thead>
    <tbody>
        <tr><td></td></tr>  <!-- Datos -->
    </tbody>
</table>

Fórmula mágica para recordar tablas:

"Para una tabla bonita: colapso bordes, doy padding, alineo izquierda, cebra en pares y hover en filas"

Repite esta frase 10 veces al día durante una semana. No la olvidarás nunca.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- Define la codificación UTF-8 para soportar caracteres especiales (ñ, tildes, €) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace la página responsive en dispositivos móviles -->
    <title>Tarjeta con Tabla</title> <!-- Título que aparece en la pestaña del navegador -->
</head>
<style>
    /* ============================================================
       RESET BÁSICO - Elimina márgenes y paddings por defecto
       ============================================================ */
    * {
        margin: 0;      /* Elimina el margen EXTERNO predeterminado de TODOS los elementos HTML */
        padding: 0;     /* Elimina el padding INTERNO predeterminado de TODOS los elementos HTML */
        /* NOTA: No se incluye box-sizing: border-box para mantener el comportamiento clásico de las tablas */
    }

    /* ============================================================
       ESTILOS DEL BODY - Fondo de la página
       ============================================================ */
    body {
        background-color: #f0f0f0;  /* Color gris claro de fondo para toda la página */
    }

    /* ============================================================
       CONTENEDOR PRINCIPAL (centra la tarjeta horizontalmente)
       ============================================================ */
    .container {
        display: flex;              /* Activa Flexbox para alinear el contenido */
        justify-content: center;    /* Centra horizontalmente la tarjeta dentro del contenedor */
        padding-top: 10px;          /* Espacio superior de 10px separa la tarjeta del borde superior */
    }

    /* ============================================================
       TARJETA PRINCIPAL (CARD)
       ============================================================ */
    .card {
        background-color: white;    /* Fondo blanco para la tarjeta (contrasta con fondo gris) */
        display: flex;              /* Activa Flexbox dentro de la tarjeta para organizar su contenido */
        flex-direction: column;     /* Organiza el contenido VERTICALMENTE (header, body, footer apilados) */
        width: 600px;               /* Ancho fijo de 600px (más ancho para acomodar la tabla de 5 columnas) */
        border-radius: 8px;         /* Bordes redondeados de 8px en las 4 esquinas */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra: X=0, Y=2px, difuminado=5px, negro 10% opaco */
    }

    /* ============================================================
       HEADER DE LA TARJETA (Parte superior)
       ============================================================ */
    .card-header {
        background-color: #f8f9fa;  /* Color gris muy claro para el fondo del header */
        border-radius: 8px 8px 0 0; /* Bordes redondeados SOLO arriba (esquinas superiores) */
        padding: 20px;              /* Espacio interno de 20px alrededor del contenido del header */
        display: flex;              /* Activa Flexbox para alinear el contenido del header */
        align-items: center;        /* Centra VERTICALMENTE el contenido dentro del header */
        justify-content: center;    /* Centra HORIZONTALMENTE el contenido dentro del header */
        border-bottom: 1px solid #dee2e6; /* Línea divisoria inferior (separa header de body) */
    }

    /* ============================================================
       BODY DE LA TARJETA (Contenido principal: tabla y botón)
       ============================================================ */
    .card-body {
        padding: 30px 20px;         /* Padding vertical 30px, horizontal 20px alrededor del contenido */
        background: white;          /* Fondo blanco para el body */
        display: flex;              /* Activa Flexbox para organizar el contenido del body */
        flex-direction: column;     /* Organiza el contenido VERTICALMENTE (h2, p, tabla, botón) */
        gap: 20px;                  /* Espacio de 20px ENTRE cada elemento dentro del body (separación uniforme) */
    }

    /* ============================================================
       ESTILOS PARA LA TABLA DE 5 COLUMNAS
       ============================================================ */
    
    /* La tabla ocupa todo el ancho disponible y usa bordes colapsados */
    .tabla-productos {
        width: 100%;                    /* La tabla ocupa el 100% del ancho de su contenedor (.card-body) */
        border-collapse: collapse;      /* Elimina los espacios dobles ENTRE los bordes de las celdas */
        /* border-collapse: separate; sería el valor por defecto (bordes separados) */
        font-family: Arial, sans-serif; /* Fuente Arial para toda la tabla (legible y profesional) */
    }

    /* Estilo para las celdas de CABECERA (th) y celdas de DATOS (td) */
    .tabla-productos th,
    .tabla-productos td {
        border: 1px solid #dee2e6;      /* Borde gris suave de 1px alrededor de CADA celda */
        padding: 12px;                   /* Espacio interno de 12px dentro de cada celda (aire para el texto) */
        text-align: left;                /* Texto alineado a la izquierda en todas las celdas */
        /* text-align: center; centraría el texto, pero left es más legible para tablas de datos */
    }

    /* Estilo ESPECIAL para las celdas de CABECERA (th) */
    .tabla-productos th {
        background-color: #f8f9fa;       /* Fondo gris claro para diferenciar la cabecera del cuerpo */
        font-weight: bold;               /* Texto en NEGRITA para destacar los títulos de las columnas */
    }

    /* EFECTO "RAYA DE CEBRA" - Alterna colores en filas pares/impares (mejora la legibilidad) */
    .tabla-productos tbody tr:nth-child(even) {
        background-color: #f8f9fa;       /* Fondo gris muy claro en las filas PARES (2, 4, 6, etc.) */
        /* nth-child(even) selecciona elementos en posiciones pares */
    }

    /* EFECTO HOVER - Cambia el fondo cuando el mouse pasa por encima de una fila */
    .tabla-productos tbody tr:hover {
        background-color: #e9ecef;       /* Fondo gris un poco más oscuro al pasar el ratón (feedback visual) */
        /* Esto ayuda al usuario a saber qué fila está seleccionando */
    }

    /* ============================================================
       ESTILOS PARA TEXTOS DENTRO DEL BODY
       ============================================================ */
    
    /* Párrafos dentro del body: centrados horizontalmente */
    .card-body p {
        width: 100%;                    /* Ocupa todo el ancho disponible */
        text-align: center;             /* Centra el texto horizontalmente */
    }

    /* Títulos H2 dentro del body: centrados horizontalmente */
    .card-body h2 {
        width: 100%;                    /* Ocupa todo el ancho disponible */
        text-align: center;             /* Centra el texto horizontalmente */
    }

    /* ============================================================
       BOTÓN DENTRO DEL BODY
       ============================================================ */
    .card-body button {
        align-self: flex-start;         /* Alinea el botón al INICIO (izquierda) del contenedor flex */
        background-color: #0d6efd;      /* Color azul primario (azul Bootstrap) para el fondo del botón */
        color: white;                   /* Texto en color blanco para máximo contraste */
        border: none;                   /* Elimina el borde predeterminado del botón */
        padding: 10px 20px;             /* Padding vertical 10px, horizontal 20px */
        border-radius: 6px;             /* Bordes redondeados de 6px */
        cursor: pointer;                /* Cambia el cursor a "mano" al pasar por encima (indica clickeable) */
        font-size: 16px;                /* Tamaño de fuente de 16px para el texto del botón */
    }

    /* EFECTO HOVER para el botón (cuando el mouse pasa por encima) */
    .card-body button:hover {
        background-color: #0b5ed7;      /* Azul ligeramente más oscuro al pasar el mouse (efecto visual) */
    }

    /* ============================================================
       FOOTER DE LA TARJETA (Parte inferior)
       ============================================================ */
    .card-footer {
        background-color: #f8f9fa;      /* Color gris muy claro para el fondo del footer */
        padding: 15px 20px;             /* Padding vertical 15px, horizontal 20px alrededor del contenido */
        border-top: 1px solid #dee2e6;  /* Línea divisoria SUPERIOR (Separa body de footer) */
        border-radius: 0 0 8px 8px;     /* Bordes redondeados SOLO abajo (esquinas inferiores) */
        text-align: center;             /* Centra el texto horizontalmente dentro del footer */
        color: #6c757d;                 /* Color gris oscuro para el texto (suave, no compite con el contenido principal) */
    }

    /* ============================================================
       NOTAS ADICIONALES SOBRE LAS TABLAS:
       
       1. border-collapse: collapse → Hace que los bordes sean simples (no dobles)
       2. nth-child(even) → Selecciona filas pares para el efecto "cebra"
       3. tr:hover → Da feedback visual al usuario
       4. th vs td → th es para cabeceras (negrita por defecto), td para datos
       5. Siempre usar <thead> y <tbody> para organizar la tabla semánticamente
    ============================================================ -->
</style>
<body>
    <div class="container">
        <div class="card">
            <!-- CABECERA DE LA TARJETA -->
            <div class="card-header">
                <h1>Sotelo</h1> <!-- Título principal de la tarjeta -->
            </div>
            
            <!-- CUERPO DE LA TARJETA (Contenido) -->
            <div class="card-body">
                <h2>Lista de Productos</h2> <!-- Subtítulo -->
                <p>Productos disponibles en nuestra tienda</p> <!-- Descripción -->
                
                <!-- ===============================================
                     TABLA DE 5 COLUMNAS - LA PARTE IMPORTANTE
                     =============================================== -->
                <table class="tabla-productos">
                    <!-- CABECERA DE LA TABLA (define los nombres de las columnas) -->
                    <thead>
                        <tr> <!-- Fila de cabecera -->
                            <th>ID</th>           <!-- Columna 1: Identificador único del producto -->
                            <th>Producto</th>     <!-- Columna 2: Nombre del producto -->
                            <th>Categoría</th>    <!-- Columna 3: Categoría a la que pertenece -->
                            <th>Precio</th>       <!-- Columna 4: Valor económico del producto -->
                            <th>Stock</th>        <!-- Columna 5: Cantidad disponible en inventario -->
                        </tr>
                    </thead>
                    
                    <!-- CUERPO DE LA TABLA (datos de ejemplo) -->
                    <tbody>
                        <!-- Producto 1: Portátil profesional -->
                        <tr>
                            <td>001</td>               <!-- ID -->
                            <td>Portátil Pro</td>      <!-- Producto -->
                            <td>Informática</td>       <!-- Categoría -->
                            <td>899€</td>              <!-- Precio -->
                            <td>15</td>                <!-- Stock (unidades disponibles) -->
                        </tr>
                        
                        <!-- Producto 2: Monitor de 24 pulgadas -->
                        <tr>
                            <td>002</td>
                            <td>Monitor 24"</td>
                            <td>Periféricos</td>
                            <td>199€</td>
                            <td>8</td>
                        </tr>
                        
                        <!-- Producto 3: Teclado mecánico para gaming -->
                        <tr>
                            <td>003</td>
                            <td>Teclado Mecánico</td>
                            <td>Periféricos</td>
                            <td>89€</td>
                            <td>23</td>
                        </tr>
                        
                        <!-- Producto 4: Ratón inalámbrico -->
                        <tr>
                            <td>004</td>
                            <td>Ratón Inalámbrico</td>
                            <td>Periféricos</td>
                            <td>29€</td>
                            <td>42</td>
                        </tr>
                        
                        <!-- Producto 5: Auriculares para gaming -->
                        <tr>
                            <td>005</td>
                            <td>Auriculares Gaming</td>
                            <td>Audio</td>
                            <td>59€</td>
                            <td>11</td>
                        </tr>
                    </tbody>
                </table>

                <!-- Botón de acción -->
                <button>Ver catálogo completo</button>
            </div>
            
            <!-- PIE DE LA TARJETA (información adicional) -->
            <div class="card-footer">
                Total de productos: 5 | Actualizado hoy <!-- Texto informativo -->
            </div>
        </div>
    </div>  
</body>
</html>

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