ejemplo
Aquí tienes el código HTML completo con la documentación línea por línea del CSS, explicando qué hace cada propiedad y por qué es importante dentro de la maquetación:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript - Tutorial</title> <style> /* ========== RESET Y ESTILOS BASE DEL BODY ========== */ body { /* Elimina el margen por defecto que todos los navegadores aplican al <body>. Sin esto, habría un espacio blanco alrededor de toda la página. */ margin: 0; /* Define una pila de fuentes moderna y legible. system-ui usa la fuente por defecto del sistema operativo. Las siguientes son alternativas por si la primera no está disponible. Esta propiedad se HEREDA a todos los elementos hijos. */ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; /* height: 100vh significa "100% de la altura del viewport (ventana del navegador)". Esto asegura que el <body> ocupe toda la pantalla, ni más ni menos. */ height: 100vh; /* Activa el modelo Flexbox en el body. Convierte a los hijos DIRECTOS del body en "ítems flexibles". */ display: flex; /* Los hijos se colocarán en COLUMNA (uno debajo del otro). Por defecto flex coloca los hijos en fila (row), pero aquí necesitamos: - ARRIBA: .menu-superior - ABAJO: .contenedor-flex */ flex-direction: column; } /* ========== CAJA 1: MENÚ SUPERIOR ========== */ .menu-superior { /* Color de fondo gris oscuro para la barra de navegación */ background-color: #333; /* Elimina cualquier padding del contenedor. El autor comenta "Los enlaces controlan su espacio", lo que significa: el espacio alrededor de los enlaces lo dará el PADDING de los propios <a>, no el padding de este contenedor. */ padding: 0; /* line-height: 0 elimina cualquier altura extra que el contenedor pudiera tener debido al texto. Como los hijos (los enlaces) tienen su propio line-height, esto evita espacios fantasma debajo de los enlaces. */ line-height: 0; } /* Estilos para los enlaces DENTRO del menú superior */ .menu-superior a { /* Color del texto: blanco */ color: white; /* Quita el subrayado típico de los enlaces */ text-decoration: none; /* Aplica padding a CADA enlace individual. - 12px arriba y abajo (da altura a los enlaces) - 15px izquierda y derecha (separa unos enlaces de otros) Esto crea el área cliqueable alrededor del texto. */ padding: 12px 15px; /* display: inline-block es CLAVE aquí. - inline: permite que los enlaces se coloquen en línea (unos al lado de otros) - block: permite aplicar padding vertical (algo que inline puro no permite) Consiguen así el comportamiento de "botones en línea". */ display: inline-block; /* Tamaño de letra de los enlaces */ font-size: 14px; /* Restaura el line-height normal para el texto. El contenedor .menu-superior tiene line-height:0, pero eso haría que el texto se viera aplastado. Esta línea lo normaliza SÓLO para el texto. */ line-height: normal; } /* Efecto hover (cuando el ratón pasa por encima) */ .menu-superior a:hover { /* Cambia a un gris ligeramente más claro */ background-color: #555; } /* Enlace activo (página actual) */ .menu-superior a.activo { /* Azul llamativo para destacar la sección actual (JavaScript) */ background-color: #007bff; } /* ========== CONTENEDOR FLEX PRINCIPAL ========== */ .contenedor-flex { /* Activa Flexbox para organizar sus hijos en FILA (por defecto) */ display: flex; /* flex: 1 es una abreviatura de flex-grow: 1. Esto significa: "toma todo el espacio disponible que quede en el body". Como el body está en columna, .contenedor-flex ocupará TODO lo que no ocupe .menu-superior. Es el CORAZÓN del layout responsive. */ flex: 1; /* min-height: 0 es un "truco" de Flexbox. Por defecto, los ítems flexibles no pueden ser más pequeños que su contenido. Esto a veces causa desbordamientos. min-height:0 permite que este contenedor se encoja si es necesario, para que los hijos con overflow-y:auto funcionen. */ min-height: 0; } /* ========== CAJA 2: MENÚ LATERAL ========== */ .menu-lateral { /* Ancho fijo de 180px para la columna izquierda */ width: 180px; /* Color de fondo gris claro para distinguir la sección */ background-color: #f0f0f0; /* Padding interior general del contenedor. Separa el contenido (h3 y enlaces) de los bordes del menú. */ padding: 10px; /* overflow-y: auto es CRUCIAL para la usabilidad. Si el contenido del menú (los enlaces) es más alto que el contenedor, aparecerá una barra de desplazamiento VERTICAL automáticamente. Sin esto, el contenido se desbordaría o recortaría. */ overflow-y: auto; } /* Estilo para el título dentro del menú lateral */ .menu-lateral h3 { /* Elimina el margen superior que los h3 tienen por defecto. Así el título queda pegado al borde superior del padding. */ margin-top: 0; /* Color del texto: gris oscuro */ color: #333; /* Borde inferior de 2px sólido azul. Actúa como separador visual entre el título y los enlaces. */ border-bottom: 2px solid #007bff; /* Espacio debajo del texto y encima del borde. Mejora la legibilidad y la estética. */ padding-bottom: 10px; } /* Estilos para los enlaces DENTRO del menú lateral */ .menu-lateral a { /* display: block es CLAVE aquí. A diferencia del menú superior (inline-block), aquí queremos que los enlaces ocupen TODO el ancho disponible y se apilen VERTICALMENTE, como una lista tradicional. */ display: block; /* Padding interior de cada enlace. Da área cliqueable y espacio alrededor del texto. Nuevamente, "los enlaces controlan su espacio". */ padding: 8px 10px; /* Color del texto: gris oscuro (no blanco como el superior) */ color: #333; /* Quita el subrayado */ text-decoration: none; /* Margen ENTRE enlaces: 2px arriba y abajo, 0 a los lados. Esto separa ligeramente cada enlace de sus vecinos. */ margin: 2px 0; /* Borde izquierdo transparente de 2px. Es un "placeholder" visual. Al hacer hover, este borde se vuelve azul, creando un efecto de indicador sin que el contenido se mueva. */ border-left: 2px solid transparent; /* Tamaño de letra */ font-size: 14px; } /* Hover en enlaces del menú lateral */ .menu-lateral a:hover { /* Fondo gris más oscuro al pasar el ratón */ background-color: #ddd; /* Cambia el borde izquierdo a azul, creando un efecto de "marcador" */ border-left-color: #007bff; } /* ========== CAJA 3: CONTENEDOR QUE CENTRA ========== */ .contenedor-centrado { /* flex: 1 - Igual que su hermano .menu-lateral tiene width fijo, este hermano debe ocupar TODO EL RESTO del espacio disponible dentro de .contenedor-flex. */ flex: 1; /* Se convierte en un contenedor flex para poder centrar a su hijo */ display: flex; /* justify-content: center centra al hijo (el .contenido) HORIZONTALMENTE dentro de este contenedor. Es la clave de que el contenido aparezca centrado en la pantalla. */ justify-content: center; /* Padding de 20px alrededor del contenido centrado. Esto evita que el contenido toque los bordes en pantallas pequeñas. Es un "espacio de seguridad" visual. */ padding: 20px; /* overflow-y: auto - Igual que en .menu-lateral. Si el contenido del tutorial es muy largo, aparecerá scroll SÓLO en esta sección, sin afectar al menú lateral. */ overflow-y: auto; } /* ========== CAJA 4: CONTENIDO DEL TUTORIAL ========== */ .contenido { /* max-width: 800px es CLAVE para la legibilidad. En pantallas grandes, el texto no se estirará más de 800px, evitando líneas excesivamente largas y difíciles de leer. */ max-width: 800px; /* width: 100% permite que EN PANTALLAS PEQUEÑAS, el contenido ocupe todo el ancho disponible (menos el padding del padre). Esto hace el diseño responsive: en móvil, se usa el 100%; en desktop, se respeta el max-width. */ width: 100%; /* font-size: 20px agranda TODO el texto dentro de .contenido. Al estar en el contenedor padre, la mayoría de elementos heredan este tamaño. Mejora la legibilidad del tutorial. */ font-size: 20px; } /* Bloque comentado: si se activara, aplicaría Arial a los párrafos, sobrescribiendo la fuente heredada del body. Está inactivo. */ /* .contenido p { font-family: Arial, sans-serif; } */ /* ========== ESTILOS DEL CONTENIDO (TEXTUALES) ========== */ /* Estilo para todos los h1 de la página (solo hay uno, pero aplica global) */ h1 { /* Elimina el margen superior por defecto */ margin-top: 0; /* Color gris oscuro para el título principal */ color: #333; } /* Estilo para todos los h2 */ h2 { /* Línea azul debajo de cada subtítulo, igual que en el menú lateral. Da consistencia visual al diseño. */ border-bottom: 2px solid #007bff; /* Espacio debajo del texto y encima de la línea azul */ padding-bottom: 10px; /* Margen superior de 30px para separar las secciones entre sí. Esto crea ESPACIO VISUAL entre un tema y el siguiente. */ margin-top: 30px; /* Color del texto */ color: #333; } /* Pseudo-clase :first-of-type - Selecciona el PRIMER h2 que aparece. Le quitamos el margen superior para que no haya espacio extra justo debajo del título principal h1. */ h2:first-of-type { margin-top: 0; } /* Estilo para fragmentos de código en línea (etiqueta <code>) */ code { /* Fondo gris muy claro para destacar el código */ background-color: #f4f4f4; /* Pequeño padding alrededor del código. Evita que el texto toque el fondo gris. */ padding: 2px 5px; /* Bordes redondeados para un aspecto más suave */ border-radius: 3px; /* Fuente monospace (de ancho fijo) para código. Es la convención universal para mostrar código. */ font-family: monospace; } /* Estilo para bloques de código (etiqueta <pre>) */ pre { /* Mismo fondo gris claro que code */ background-color: #f4f4f4; /* Más padding que code por ser un bloque más grande */ padding: 10px; /* Bordes redondeados */ border-radius: 5px; /* overflow-x: auto - Si el código es muy ancho (ej: una línea muy larga), aparecerá una barra de desplazamiento HORIZONTAL. Esto evita que el código se salga del contenedor. */ overflow-x: auto; /* Fuente monospace para el código */ font-family: monospace; } </style> </head> <body> <!-- CAJA 1: Menú superior - flujo natural --> <div class="menu-superior"> <a href="index.html">Inicio</a> <a href="php.html">PHP</a> <a href="js.html" class="activo">JavaScript</a> <a href="css.html">CSS</a> <a href="html.html">HTML</a> </div> <!-- Contenedor flex para las otras dos cajas --> <div class="contenedor-flex"> <!-- CAJA 2: Menú lateral - flujo natural --> <div class="menu-lateral"> <h3>Temas de JavaScript</h3> <a href="#js-intro">Introducción a JS</a> <a href="#js-sintaxis">Sintaxis Básica</a> <a href="#js-variables">Variables y Tipos</a> <a href="#js-funciones">Funciones en JS</a> <a href="#js-objetos">Objetos y Arrays</a> <a href="#js-dom">Manipulación del DOM</a> </div> <!-- CAJA 3: Contenedor que centra --> <div class="contenedor-centrado"> <!-- CAJA 4: Contenido centrado --> <div class="contenido"> <h1>Tutorial de JavaScript</h1> <h2 id="js-intro">Introducción a JavaScript</h2> <p>JavaScript es un lenguaje de programación interpretado, orientado a objetos, utilizado principalmente en el lado del cliente (navegador web).</p> <p>Creado por Brendan Eich en 1995, JavaScript permite crear páginas web interactivas y dinámicas.</p> <p>No debe confundirse con Java - son lenguajes completamente diferentes.</p> <h2 id="js-sintaxis">Sintaxis Básica</h2> <p>JavaScript usa una sintaxis similar a C. Las sentencias terminan con punto y coma (opcional pero recomendado).</p> <p><strong>Ejemplo:</strong> <code>console.log("Hola Mundo");</code></p> <p>Los comentarios pueden ser de una línea (//) o múltiples líneas (/* */).</p> <h2 id="js-variables">Variables y Tipos de Datos</h2> <p>En JavaScript moderno se usa 'let' y 'const' para declarar variables. 'var' es la forma antigua.</p> <p><strong>Tipos:</strong> number, string, boolean, object, undefined, null, symbol.</p> <p><strong>Ejemplo:</strong></p> <pre>let nombre = "Ana"; const edad = 30; let esEstudiante = true; let colores = ["rojo", "azul", "verde"];</pre> <h2 id="js-funciones">Funciones en JavaScript</h2> <p>Las funciones se pueden declarar de varias formas:</p> <p><strong>Declaración de función:</strong></p> <pre>function suma(a, b) { return a + b; }</pre> <p><strong>Función flecha:</strong> <code>const resta = (a, b) => a - b;</code></p> <h2 id="js-objetos">Objetos y Arrays</h2> <p><strong>Objetos:</strong> colecciones de propiedades</p> <pre>let persona = { nombre: "Juan", edad: 25, saludar: function() { return "Hola, soy " + this.nombre; } };</pre> <p><strong>Arrays:</strong> listas ordenadas</p> <pre>let frutas = ["manzana", "banana", "naranja"]; frutas.push("uva"); // Añadir elemento</pre> <h2 id="js-dom">Manipulación del DOM</h2> <p>JavaScript puede manipular el DOM (Document Object Model) para cambiar el contenido de la página.</p> <p><strong>Ejemplos:</strong></p> <pre>// Seleccionar elementos document.getElementById("miId"); document.querySelector(".miClase"); // Modificar contenido elemento.textContent = "Nuevo texto"; elemento.innerHTML = "<b>Texto en negrita</b>"; // Eventos boton.addEventListener("click", function() { alert("¡Hiciste clic!"); });</pre> </div> </div> </div> </body> </html>
Resumen de la Documentación:
He documentado cada línea de CSS con comentarios explicativos que destacan:
Propósito: ¿Qué logra esta línea visual o estructuralmente?
Comportamiento: ¿Cómo interactúa con el flujo del documento o con otros elementos?
Técnicas clave: Explicación de conceptos como
flex:1,min-height:0,overflow,inline-blockvsblock.Relaciones padre-hijo: Cómo las propiedades afectan a los elementos descendientes (herencia, contención).
Por qué es importante: La razón detrás de cada decisión de diseño (ej:
max-width:800pxpara legibilidad).
Esta documentación te servirá como referencia para entender no solo qué hace el código, sino por qué está escrito así y cómo contribuye a la maquetación general de la página.
Comentarios
Publicar un comentario