3-tabla-menu

 

DOCUMENTACIÓN COMPLETA DEL CSS

css
/* ===== RESET GENERAL ===== */
* {
    padding: 0;        /* Elimina todo el relleno interno por defecto */
    margin: 0;         /* Elimina todos los márgenes externos por defecto */
}

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

/* ===== CONTENEDOR PRINCIPAL ===== */
.contenido1 {
    padding-top: 10px;              /* Espacio de 10px arriba */
    border: 1px solid red;           /* Borde rojo (debug) - muestra el contenedor */
    display: flex;                   /* Activa Flexbox */
    justify-content: center;         /* Centra horizontalmente la tarjeta */
}

/* ===== TARJETA PRINCIPAL ===== */
.card {
    border: 5px solid green;         /* Borde verde (debug) - muestra la tarjeta */
    background-color: white;         /* Fondo blanco */
    display: flex;                   /* Activa Flexbox interno */
    flex-direction: column;          /* Organiza hijos en columna (vertical) */
    width: 500px;                    /* Ancho fijo de 500px */
    border-radius: 8px;              /* Esquinas redondeadas */
}

/* ===== ENCABEZADO DE LA TARJETA ===== */
.card-header {
    background-color: #f8f9fa;        /* Fondo gris muy claro */
    border-bottom: 1px solid #dee2e6; /* Línea divisoria inferior */
}

/* Título dentro del encabezado */
.card-header h1 {
    text-align: center;               /* Centra el texto horizontalmente */
}

/* ===== CUERPO DE LA TARJETA ===== */
.card-body {
    padding: 20px 20px 0 20px;        /* Padding: arriba 20px, derecha 20px, abajo 0, izquierda 20px */
}

/* Párrafos dentro del cuerpo */
.card-body p {
    text-align: center;               /* Centra el texto */
}

/* Títulos h2 dentro del cuerpo */
.card-body h2 {
    text-align: center;               /* Centra el texto */
}

/* ===== PIE DE LA TARJETA ===== */
.card-footer {
    padding: 20px 20px 0 20px;        /* Mismo padding que el body */
}

/* ===== ESTILOS PARA TABLAS ===== */
table {
    margin: 0 auto;                    /* Centra la tabla horizontalmente */
    /* margin: 0 auto = superior/inferior 0, izquierda/derecha automático */
}

/* ===== MENÚ SUPERIOR ===== */
.menu {
    background-color: #333;      /* Fondo oscuro (gris muy oscuro) */
    padding: 15px;               /* Espacio interno de 15px alrededor */
    text-align: center;          /* Centra los enlaces horizontalmente */
}

/* Estilos para los enlaces dentro del menú */
.menu a {
    color: white;                /* Texto de color blanco */
    text-decoration: none;       /* Quita el subrayado de los enlaces */
    margin: 0 15px;              /* Margen horizontal: 15px izquierda y derecha */
    font-size: 18px;             /* Tamaño de fuente de 18 píxeles */
}

/* Efecto cuando el mouse pasa sobre los enlaces */
.menu a:hover {
    text-decoration: underline;  /* Añade subrayado al pasar el mouse */
}

🎓 TUTORIAL COMPLETO: Crea una página con menú y tarjeta centrada

📋 NIVEL 1: ESTRUCTURA BÁSICA HTML

Paso 1: Crear el esqueleto HTML

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web</title>
</head>
<body>
    <!-- Todo el contenido visible va aquí -->
</body>
</html>

Paso 2: Añadir el menú superior

html
<body>
    <div class="menu">
        <a href="#">Inicio</a>
        <a href="#">Productos</a>
        <a href="#">Ventas</a>
        <a href="#">Reportes</a>
    </div>
</body>

Paso 3: Añadir la tarjeta

html
<body>
    <div class="menu">
        <!-- enlaces del menú -->
    </div>
    
    <div class="contenido1">
        <div class="card">
            <div class="card-header">
                <h1>Sotelo</h1>
            </div>
            <div class="card-body">
                <!-- Aquí irá el contenido -->
            </div>
            <div class="card-footer">
                3
            </div>
        </div>
    </div>
</body>

Paso 4: Añadir una tabla

html
<div class="card-body">
    <table border="1">
        <caption>Título de la tabla</caption>
        <tr>
            <th>Columna 1</th>
            <th>Columna 2</th>
        </tr>
        <tr>
            <td>Celda 1</td>
            <td>Celda 2</td>
        </tr>
    </table>
</div>

🎨 NIVEL 2: ESTILOS CSS (APRENDE POR PARTES)

Concepto 1: Reset CSS

css
/* Por qué: Los navegadores añaden márgenes por defecto */
* {
    padding: 0;
    margin: 0;
}
/* Resultado: Todos los elementos parten desde cero */

Concepto 2: Fondo de página

css
body {
    background-color: #f0f0f0;  /* Código hexadecimal para gris claro */
}
/* Experimenta: Cambia #f0f0f0 por lightblue o #ffcccc */

Concepto 3: Centrar con Flexbox

css
.contenido1 {
    display: flex;              /* Activa Flexbox */
    justify-content: center;    /* Centra horizontalmente */
}
/* Flexbox es como tener un imán que centra los elementos */

Concepto 4: Diseñar la tarjeta

css
.card {
    background-color: white;
    width: 500px;               /* Ancho fijo */
    border-radius: 8px;         /* Esquinas redondeadas */
}
/* border-radius: cuanto más alto, más redondeado */

Concepto 5: Crear el menú

css
.menu {
    background-color: #333;     /* Color oscuro */
    padding: 15px;              /* Espacio interno */
    text-align: center;         /* Centra los enlaces */
}

.menu a {
    color: white;               /* Texto blanco */
    text-decoration: none;      /* Quita subrayado */
    margin: 0 15px;             /* Separación entre enlaces */
}

💡 NIVEL 3: EJERCICIOS PRÁCTICOS

Ejercicio 1: Cambia los colores del menú

css
.menu {
    background-color: #007bff;  /* Azul */
}

.menu a {
    color: yellow;              /* Texto amarillo */
}

.menu a:hover {
    color: black;               /* Negro al pasar el mouse */
}

Ejercicio 2: Añade más opciones al menú

html
<div class="menu">
    <a href="#">Inicio</a>
    <a href="#">Productos</a>
    <a href="#">Servicios</a>
    <a href="#">Ventas</a>
    <a href="#">Reportes</a>
    <a href="#">Contacto</a>    <!-- Nuevo enlace -->
</div>

Ejercicio 3: Mejora la tabla

css
table {
    margin: 0 auto;
    border-collapse: collapse;   /* Une los bordes */
    width: 100%;                  /* Ocupa todo el ancho */
}

th {
    background-color: #333;       /* Fondo oscuro */
    color: white;                 /* Texto blanco */
    padding: 10px;                /* Espacio interno */
}

td {
    padding: 8px;                 /* Espacio interno */
    text-align: center;           /* Texto centrado */
}

Ejercicio 4: Añade más contenido a la tarjeta

html
<div class="card-body">
    <h2>Bienvenido</h2>
    <p>Este es un ejemplo de tarjeta con contenido</p>
    
    <table>
        <!-- tu tabla aquí -->
    </table>
    
    <button>Haz clic aquí</button>  <!-- Botón adicional -->
</div>

🚀 NIVEL 4: PROYECTO COMPLETO - PÁGINA DE EMPRESA

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Empresa</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        
        /* Menú superior */
        .menu {
            background-color: #2c3e50;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .menu a {
            color: white;
            text-decoration: none;
            margin: 0 20px;
            font-size: 18px;
            padding: 10px 15px;
            transition: all 0.3s;
        }
        
        .menu a:hover {
            background-color: #34495e;
            border-radius: 5px;
        }
        
        /* Contenedor principal */
        .contenedor {
            display: flex;
            justify-content: center;
            padding: 30px;
        }
        
        /* Tarjeta */
        .card {
            background: white;
            width: 600px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .card-header {
            background: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .card-body {
            padding: 30px;
        }
        
        .card-footer {
            background: #ecf0f1;
            padding: 15px;
            text-align: center;
            color: #7f8c8d;
        }
        
        /* Tabla */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #3498db;
            color: white;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        /* Botón */
        button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        
        button:hover {
            background: #2980b9;
        }
    </style>
</head>
<body>
    <div class="menu">
        <a href="#">Inicio</a>
        <a href="#">Productos</a>
        <a href="#">Servicios</a>
        <a href="#">Contacto</a>
    </div>
    
    <div class="contenedor">
        <div class="card">
            <div class="card-header">
                <h1>Bienvenido a Mi Empresa</h1>
            </div>
            <div class="card-body">
                <h2>Nuestros Productos</h2>
                <p>Conoce nuestra línea de productos disponibles</p>
                
                <table>
                    <caption>Productos en stock</caption>
                    <tr>
                        <th>Producto</th>
                        <th>Precio</th>
                        <th>Stock</th>
                    </tr>
                    <tr>
                        <td>Producto 1</td>
                        <td>$100</td>
                        <td>15</td>
                    </tr>
                    <tr>
                        <td>Producto 2</td>
                        <td>$200</td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>Producto 3</td>
                        <td>$150</td>
                        <td>12</td>
                    </tr>
                </table>
                
                <button>Ver más productos</button>
            </div>
            <div class="card-footer">
                Actualizado: Febrero 2025
            </div>
        </div>
    </div>
</body>
</html>

📊 RESUMEN DE PROPIEDADES CSS APRENDIDAS

PropiedadQué haceValores comunes
display: flexActiva Flexboxflex, block, inline
justify-contentCentra horizontalmentecenter, space-between
flex-directionDirección de los hijosrow, column
text-alignAlinea textocenter, left, right
paddingEspacio interno20px, 10px 20px
marginEspacio externo0 auto, 10px
background-colorColor de fondo#333, blue, rgb()
border-radiusEsquinas redondeadas8px, 50%

✅ LISTA DE VERIFICACIÓN PARA PRINCIPIANTES

  • ¿Tienes la estructura HTML básica (<!DOCTYPE>)?

  • ¿Los enlaces del menú funcionan (href)?

  • ¿La tarjeta está centrada con Flexbox?

  • ¿La tabla tiene margin: 0 auto para centrarse?

  • ¿Probaste diferentes colores?

  • ¿Añadiste efectos hover?



<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #f0f0f0;
    }

    .contenido1 {
        padding-top: 10px;
        border: 1px solid red;
        display: flex;
        justify-content: center;

    }

    .card {
        border: 5px solid green;
        background-color: white;
        display: flex;
        flex-direction: column;
        width: 500px;
        border-radius: 8px;

    }

    .card-header {
        background-color: #f8f9fa;

           border-bottom: 1px solid #dee2e6;
    }

     .card-header h1{
        text-align: center;
    }
    .card-body{
            padding: 20px 20px 0 20px;
    }
    .card-body p{
        text-align: center;
    }
    .card-body h2{
        text-align: center;
    }
    .card-footer{
             padding: 20px 20px 0 20px;
    }
    table {
    margin: 0 auto; /* La tabla necesita esto además */
}
   
    /* ===== MENÚ SUPERIOR ===== */
.menu {
    background-color: #333;      /* Fondo oscuro */
    padding: 15px;               /* Espacio interno */
    text-align: center;          /* Centrar el texto */
}

.menu a {
    color: white;                /* Texto blanco */
    text-decoration: none;       /* Quitar subrayado */
    margin: 0 15px;              /* Espacio entre links */
    font-size: 18px;             /* Tamaño de letra */
}

.menu a:hover {
    text-decoration: underline;  /* Subrayado al pasar el mouse */
}
</style>

<body>
          <div class="menu">
            <a href="#">Inicio</a>
            <a href="#">Productos</a>
            <a href="#">Ventas</a>
            <a href="#">Reportes</a>
        </div>
    <div class="contenido1">
     
        <div class="card">
            <div class="card-header">
                <h1>Sotelo</h1>
            </div>
            <div class="card-body">
            <table border="1">
        <caption>Titulo de la tabla</caption>
        <tr>
            <th>Col.Cab.1</th>
            <th>Col.Cab.2</th>
        </tr>
        <tr>
            <td>Celda 1</td>
            <td>Celda 2</td>
        </tr>
        </table>

            </div>
            <div class="card-footer">
                3
            </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