{"id":523,"date":"2026-01-11T11:40:34","date_gmt":"2026-01-11T10:40:34","guid":{"rendered":"https:\/\/cienciaytecnology.com\/wordpress\/?p=523"},"modified":"2026-04-30T21:27:19","modified_gmt":"2026-04-30T19:27:19","slug":"css","status":"publish","type":"post","link":"https:\/\/cienciaytecnology.com\/wordpress\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">1. Introducci\u00f3n: \u00bfQu\u00e9 es CSS y en qu\u00e9 se diferencia CSS3?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00abSi HTML es el esqueleto de una web,&nbsp;<strong>CSS<\/strong>&nbsp;es la piel, el estilo y la personalidad.&nbsp;<strong>CSS3<\/strong>&nbsp;no fue una versi\u00f3n \u00fanica, sino el inicio de un sistema de &#8216;m\u00f3dulos&#8217; que permiti\u00f3 actualizar partes del lenguaje de forma independiente. Hoy en d\u00eda, CSS permite crear interfaces complejas, animaciones de cine y dise\u00f1os adaptables sin necesidad de recurrir a im\u00e1genes pesadas o c\u00f3digo JavaScript complejo.\u00bb<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">2. Conceptos Fundamentales y Atributos<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para que tus lectores entiendan c\u00f3mo funciona, debes detallar estos tres pilares:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A. Selectores (\u00bfA qui\u00e9n le damos estilo?)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Selector de Etiqueta:<\/strong>\u00a0Apunta a elementos HTML (ej:\u00a0<code>p { color: red; }<\/code>).<\/li>\n\n\n\n<li><strong>Clases (<code>.nombre<\/code>):<\/strong>\u00a0Reutilizables en varios elementos. Atributo HTML:\u00a0<code>class=\"nombre\"<\/code>.<\/li>\n\n\n\n<li><strong>IDs (<code>#nombre<\/code>):<\/strong>\u00a0\u00danicos para un solo elemento. Atributo HTML:\u00a0<code>id=\"nombre\"<\/code>.<\/li>\n\n\n\n<li><strong>Pseudo-clases:<\/strong>\u00a0Estilos seg\u00fan el estado (ej:\u00a0<code>:hover<\/code>\u00a0al pasar el rat\u00f3n,\u00a0<code>:focus<\/code>\u00a0al clicar).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">B. El Modelo de Caja (Box Model)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es el concepto m\u00e1s importante. Todo elemento es una caja con:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>width<\/code>\u00a0\/\u00a0<code>height<\/code><\/strong>: Dimensiones del contenido.<\/li>\n\n\n\n<li><strong><code>padding<\/code><\/strong>: Espacio interno entre el contenido y el borde.<\/li>\n\n\n\n<li><strong><code>border<\/code><\/strong>: La l\u00ednea que rodea la caja.<\/li>\n\n\n\n<li><strong><code>margin<\/code><\/strong>: Espacio externo que separa esta caja de otras.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">C. Propiedades Modernas (CSS3 y posteriores)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Flexbox (<code>display: flex<\/code>)<\/strong>: Para alinear elementos en una sola dimensi\u00f3n (filas o columnas).<\/li>\n\n\n\n<li><strong>Grid (<code>display: grid<\/code>)<\/strong>: Para crear dise\u00f1os de rejilla complejos en dos dimensiones.<\/li>\n\n\n\n<li><strong>Variables CSS (<code>--color-principal<\/code>)<\/strong>: Permiten reutilizar valores en todo el documento.<\/li>\n\n\n\n<li><strong>Media Queries (<code>@media<\/code>)<\/strong>: La base del dise\u00f1o\u00a0<em>responsive<\/em>\u00a0(adaptar la web a m\u00f3viles).<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3. Ejemplo de C\u00f3digo Completo (Demo CSS)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este c\u00f3digo utiliza t\u00e9cnicas modernas de 2026 para que el ejemplo sea profesional:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* 1. Variables Globales *\/\n:root {\n    --color-fondo: #f4f4f9;\n    --color-primario: #3498db;\n    --color-texto: #333;\n    --transicion: all 0.3s ease;\n}\n\n\/* 2. Estilos de Base *\/\nbody {\n    background-color: var(--color-fondo);\n    font-family: 'Segoe UI', Tahoma, sans-serif;\n    color: var(--color-texto);\n    margin: 0;\n    padding: 20px;\n}\n\n\/* 3. El Modelo de Caja y Selectores *\/\n.tarjeta {\n    background: white;\n    border: 2px solid var(--color-primario);\n    border-radius: 12px; \/* CSS3: Bordes redondeados *\/\n    padding: 20px;\n    margin: 20px auto;\n    max-width: 400px;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.1); \/* CSS3: Sombras *\/\n    transition: var(--transicion);\n}\n\n\/* 4. Pseudo-clase Hover *\/\n.tarjeta:hover {\n    transform: translateY(-10px); \/* CSS3: Transformaciones *\/\n    box-shadow: 0 8px 25px rgba(0,0,0,0.2);\n}\n\n\/* 5. Flexbox para el bot\u00f3n *\/\n.boton-contenedor {\n    display: flex;\n    justify-content: center;\n    margin-top: 15px;\n}\n\n.boton-accion {\n    background-color: var(--color-primario);\n    color: white;\n    padding: 10px 25px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    font-weight: bold;\n}\n\n\/* 6. Dise\u00f1o Responsivo (Media Query) *\/\n@media (max-width: 600px) {\n    .tarjeta {\n        max-width: 100%;\n        padding: 10px;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. Resumen: \u00bfQu\u00e9 cambi\u00f3 con CSS3?<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th class=\"has-text-align-left\" data-align=\"left\">Caracter\u00edstica<\/th><th class=\"has-text-align-left\" data-align=\"left\">CSS (Cl\u00e1sico)<\/th><th class=\"has-text-align-left\" data-align=\"left\">CSS3 \/ Actual (2026)<\/th><\/tr><tr><td><strong>Bordes<\/strong><\/td><td>Solo rectos<\/td><td>Redondeados (<code>border-radius<\/code>)<\/td><\/tr><tr><td><strong>Colores<\/strong><\/td><td>B\u00e1sicos (Hex, RGB)<\/td><td>Transparencias (RGBA) y Degradados<\/td><\/tr><tr><td><strong>Layout<\/strong><\/td><td>Floats y tablas (dif\u00edcil)<\/td><td><strong>Flexbox<\/strong>&nbsp;y&nbsp;<strong>Grid<\/strong>&nbsp;(f\u00e1cil)<\/td><\/tr><tr><td><strong>Animaci\u00f3n<\/strong><\/td><td>Solo con JavaScript\/Flash<\/td><td>Animaciones nativas (<code>@keyframes<\/code>)<\/td><\/tr><tr><td><strong>Fuentes<\/strong><\/td><td>Solo fuentes del sistema<\/td><td>Fuentes personalizadas (<code>@font-face<\/code>)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Para obtener informaci\u00f3n t\u00e9cnica actualizada sobre los \u00faltimos m\u00f3dulos de CSS lanzados este a\u00f1o, puedes consultar la&nbsp;Referencia de CSS en MDN Web Docs&nbsp;o el validador oficial del&nbsp;W3C CSS Validator.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo profesional de un&nbsp;<strong>men\u00fa de navegaci\u00f3n \u00abHamburguesa\u00bb totalmente responsive<\/strong>. Este dise\u00f1o es el est\u00e1ndar en 2026: limpio, sin dependencias de JavaScript para lo b\u00e1sico y optimizado para SEO y accesibilidad.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. C\u00f3digo HTML (Estructura Sem\u00e1ntica)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizamos la etiqueta&nbsp;<code>&lt;nav&gt;<\/code>&nbsp;y un&nbsp;<code>checkbox<\/code>&nbsp;oculto para controlar el men\u00fa en m\u00f3viles sin necesidad de programar scripts complejos.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar\">\n    &lt;!-- Logotipo -->\n    &lt;div class=\"logo\">MiProyecto&lt;span>2026&lt;\/span>&lt;\/div>\n\n    &lt;!-- Checkbox oculto para el men\u00fa m\u00f3vil (Hack CSS) -->\n    &lt;input type=\"checkbox\" id=\"menu-toggle\" class=\"menu-check\">\n    \n    &lt;!-- Icono de hamburguesa (visible solo en m\u00f3viles) -->\n    &lt;label for=\"menu-toggle\" class=\"hamburger\">\n        &lt;span>&lt;\/span>\n        &lt;span>&lt;\/span>\n        &lt;span>&lt;\/span>\n    &lt;\/label>\n\n    &lt;!-- Enlaces de navegaci\u00f3n -->\n    &lt;ul class=\"nav-links\">\n        &lt;li>&lt;a href=\"#\" class=\"active\">Inicio&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Servicios&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Proyectos&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\">Blog&lt;\/a>&lt;\/li>\n        &lt;li>&lt;a href=\"#\" class=\"btn-contacto\">Contacto&lt;\/a>&lt;\/li>\n    &lt;\/ul>\n&lt;\/nav>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. C\u00f3digo CSS (Estilos y Responsividad)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este c\u00f3digo define c\u00f3mo se ve el men\u00fa en ordenadores y c\u00f3mo se transforma autom\u00e1ticamente al llegar a pantallas peque\u00f1as.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Variables de dise\u00f1o *\/\n:root {\n    --color-fondo: #2c3e50;\n    --color-acento: #3498db;\n    --color-texto: #ffffff;\n    --transicion: all 0.4s ease;\n}\n\n\/* Estilos base del Navbar *\/\n.navbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background-color: var(--color-fondo);\n    padding: 1rem 5%;\n    height: 70px;\n    position: sticky;\n    top: 0;\n    z-index: 1000;\n}\n\n.logo {\n    font-size: 1.5rem;\n    font-weight: bold;\n    color: var(--color-texto);\n    cursor: pointer;\n}\n\n.logo span {\n    color: var(--color-acento);\n}\n\n\/* Lista de enlaces (Escritorio) *\/\n.nav-links {\n    display: flex;\n    list-style: none;\n    gap: 2rem;\n}\n\n.nav-links a {\n    text-decoration: none;\n    color: var(--color-texto);\n    font-weight: 500;\n    transition: var(--transicion);\n}\n\n.nav-links a:hover, .nav-links a.active {\n    color: var(--color-acento);\n}\n\n\/* Bot\u00f3n especial *\/\n.btn-contacto {\n    background-color: var(--color-acento);\n    padding: 8px 20px;\n    border-radius: 50px;\n    color: white !important;\n}\n\n\/* Ocultar el checkbox y el icono hamburguesa por defecto *\/\n.menu-check, .hamburger {\n    display: none;\n}\n\n\/* --- MEDIA QUERY (Dise\u00f1o M\u00f3vil) --- *\/\n@media (max-width: 768px) {\n    .hamburger {\n        display: block;\n        cursor: pointer;\n    }\n\n    .hamburger span {\n        display: block;\n        width: 25px;\n        height: 3px;\n        background: var(--color-texto);\n        margin: 5px;\n        transition: var(--transicion);\n    }\n\n    .nav-links {\n        position: fixed;\n        top: 70px;\n        right: -100%; \/* Oculto a la derecha *\/\n        background-color: #34495e;\n        width: 100%;\n        height: calc(100vh - 70px);\n        flex-direction: column;\n        align-items: center;\n        padding-top: 50px;\n        transition: var(--transicion);\n    }\n\n    \/* Mostrar men\u00fa cuando el checkbox est\u00e9 marcado *\/\n    .menu-check:checked ~ .nav-links {\n        right: 0;\n    }\n\n    \/* Animaci\u00f3n simple del icono hamburguesa *\/\n    .menu-check:checked ~ .hamburger span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }\n    .menu-check:checked ~ .hamburger span:nth-child(2) { opacity: 0; }\n    .menu-check:checked ~ .hamburger span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfC\u00f3mo funciona este ejemplo?<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Flexbox:<\/strong>\u00a0Usamos\u00a0<code>display: flex<\/code>\u00a0para alinear el logo a la izquierda y los enlaces a la derecha de forma sencilla.<\/li>\n\n\n\n<li><strong>Checkbox Hack:<\/strong>\u00a0El truco de la l\u00ednea\u00a0<code>.menu-check:checked ~ .nav-links<\/code>\u00a0permite que, al hacer clic en el icono (que es un\u00a0<code>&lt;label><\/code>\u00a0vinculado al input), el men\u00fa cambie su posici\u00f3n de\u00a0<code>right: -100%<\/code>\u00a0a\u00a0<code>right: 0<\/code>.<\/li>\n\n\n\n<li><strong>Transiciones:<\/strong>\u00a0La propiedad\u00a0<code>transition<\/code>\u00a0hace que el men\u00fa se deslice suavemente en lugar de aparecer de golpe.<\/li>\n\n\n\n<li><strong>Sticky:<\/strong>\u00a0El men\u00fa se queda pegado arriba mientras el usuario hace scroll gracias a\u00a0<code>position: sticky<\/code>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes probar este c\u00f3digo directamente en el&nbsp;Editor de HTML en l\u00ednea de W3Schools&nbsp;para ver c\u00f3mo cambia de tama\u00f1o al reducir la ventana.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes la continuaci\u00f3n para tu art\u00edculo, integrando un dise\u00f1o visualmente impactante para el men\u00fa y la gu\u00eda completa sobre&nbsp;<strong>Tablas en HTML5<\/strong>, que es un contenido esencial para cualquier curso de desarrollo web.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Upgrade Visual: Men\u00fa con Degradado (Gradients)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para darle un toque moderno (estilo 2026), puedes sustituir el color s\u00f3lido del fondo del men\u00fa en tu CSS por un degradado lineal. Esto mejora mucho la est\u00e9tica del art\u00edculo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Sustituye la propiedad background-color en .navbar *\/\n.navbar {\n    background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);\n    border-bottom: 2px solid var(--color-acento);\n    \/* ... resto de propiedades ... *\/\n}\n\n\/* Efecto hover con brillo *\/\n.nav-links a:hover {\n    text-shadow: 0 0 10px var(--color-acento);\n    color: #fff;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. Tablas en HTML5: Estructura y Datos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Las tablas hoy en d\u00eda no se usan para dise\u00f1ar la estructura de la web (para eso usamos Flexbox\/Grid), sino exclusivamente para&nbsp;<strong>mostrar datos tabulares<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Etiquetas de la Tabla:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>&lt;table><\/code><\/strong>: El contenedor principal.<\/li>\n\n\n\n<li><strong><code>&lt;caption><\/code><\/strong>: El t\u00edtulo o descripci\u00f3n de la tabla (importante para accesibilidad).<\/li>\n\n\n\n<li><strong><code>&lt;thead><\/code><\/strong>: Agrupa el contenido de la cabecera.<\/li>\n\n\n\n<li><strong><code>&lt;tbody><\/code><\/strong>: Agrupa el cuerpo de los datos.<\/li>\n\n\n\n<li><strong><code>&lt;tfoot><\/code><\/strong>: Agrupa el pie de la tabla (sumas, totales).<\/li>\n\n\n\n<li><strong><code>&lt;tr><\/code><\/strong>: Define una fila (Table Row).<\/li>\n\n\n\n<li><strong><code>&lt;th><\/code><\/strong>: Define una celda de encabezado (Table Header). Suele ir en negrita y centrada por defecto.<\/li>\n\n\n\n<li><strong><code>&lt;td><\/code><\/strong>: Define una celda de datos (Table Data).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Atributos Clave:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>colspan<\/code><\/strong>: Permite que una celda se extienda horizontalmente sobre varias columnas.<\/li>\n\n\n\n<li><strong><code>rowspan<\/code><\/strong>: Permite que una celda se extienda verticalmente sobre varias filas.<\/li>\n\n\n\n<li><strong><code>scope<\/code><\/strong>: Atributo en\u00a0<code>&lt;th><\/code>\u00a0(valores:\u00a0<code>col<\/code>\u00a0o\u00a0<code>row<\/code>) que indica si la cabecera es para una columna o fila, vital para lectores de pantalla.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Ejemplo de Tabla Profesional (Demo)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejemplo combina la estructura sem\u00e1ntica completa con estilos CSS modernos:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;section id=\"precios\">\n    &lt;h2>Comparativa de Planes 2026&lt;\/h2>\n    &lt;table class=\"tabla-estilizada\">\n        &lt;caption>Tabla comparativa de servicios mensuales&lt;\/caption>\n        &lt;thead>\n            &lt;tr>\n                &lt;th scope=\"col\">Plan&lt;\/th>\n                &lt;th scope=\"col\">Almacenamiento&lt;\/th>\n                &lt;th scope=\"col\">Precio&lt;\/th>\n            &lt;\/tr>\n        &lt;\/thead>\n        &lt;tbody>\n            &lt;tr>\n                &lt;td>B\u00e1sico&lt;\/td>\n                &lt;td>20GB&lt;\/td>\n                &lt;td>9.99\u20ac&lt;\/td>\n            &lt;\/tr>\n            &lt;tr>\n                &lt;td>Premium&lt;\/td>\n                &lt;td>100GB&lt;\/td>\n                &lt;td>19.99\u20ac&lt;\/td>\n            &lt;\/tr>\n        &lt;\/tbody>\n        &lt;tfoot>\n            &lt;tr>\n                &lt;td colspan=\"2\">Soporte 24\/7 incluido en todos los planes&lt;\/td>\n                &lt;td>\u2714&lt;\/td>\n            &lt;\/tr>\n        &lt;\/tfoot>\n    &lt;\/table>\n&lt;\/section>\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.tabla-estilizada {\n    width: 100%;\n    border-collapse: collapse; \/* Quita los espacios entre bordes *\/\n    margin: 25px 0;\n    font-size: 0.9em;\n    min-width: 400px;\n    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);\n}\n\n.tabla-estilizada thead tr {\n    background-color: #3498db;\n    color: #ffffff;\n    text-align: left;\n}\n\n.tabla-estilizada th, .tabla-estilizada td {\n    padding: 12px 15px;\n    border-bottom: 1px solid #dddddd;\n}\n\n\/* Estilo de filas alternas (Zebra) *\/\n.tabla-estilizada tbody tr:nth-of-type(even) {\n    background-color: #f3f3f3;\n}\n\n\/* Efecto al pasar el rat\u00f3n por la fila *\/\n.tabla-estilizada tbody tr:hover {\n    background-color: #f1f1f1;\n    cursor: pointer;\n}\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.tabla-estilizada {\n    width: 100%;\n    border-collapse: collapse; \/* Quita los espacios entre bordes *\/\n    margin: 25px 0;\n    font-size: 0.9em;\n    min-width: 400px;\n    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);\n}\n\n.tabla-estilizada thead tr {\n    background-color: #3498db;\n    color: #ffffff;\n    text-align: left;\n}\n\n.tabla-estilizada th, .tabla-estilizada td {\n    padding: 12px 15px;\n    border-bottom: 1px solid #dddddd;\n}\n\n\/* Estilo de filas alternas (Zebra) *\/\n.tabla-estilizada tbody tr:nth-of-type(even) {\n    background-color: #f3f3f3;\n}\n\n\/* Efecto al pasar el rat\u00f3n por la fila *\/\n.tabla-estilizada tbody tr:hover {\n    background-color: #f1f1f1;\n    cursor: pointer;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS para tabla:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.tabla-estilizada {\n    width: 100%;\n    border-collapse: collapse; \/* Quita los espacios entre bordes *\/\n    margin: 25px 0;\n    font-size: 0.9em;\n    min-width: 400px;\n    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);\n}\n\n.tabla-estilizada thead tr {\n    background-color: #3498db;\n    color: #ffffff;\n    text-align: left;\n}\n\n.tabla-estilizada th, .tabla-estilizada td {\n    padding: 12px 15px;\n    border-bottom: 1px solid #dddddd;\n}\n\n\/* Estilo de filas alternas (Zebra) *\/\n.tabla-estilizada tbody tr:nth-of-type(even) {\n    background-color: #f3f3f3;\n}\n\n\/* Efecto al pasar el rat\u00f3n por la fila *\/\n.tabla-estilizada tbody tr:hover {\n    background-color: #f1f1f1;\n    cursor: pointer;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Grid y Flexbox<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es un error com\u00fan confundir&nbsp;<strong>Flexbox<\/strong>&nbsp;con&nbsp;<strong>Grid<\/strong>, pero para tu art\u00edculo es vital diferenciarlos: mientras Flexbox es ideal para alinear elementos en una sola direcci\u00f3n (como el men\u00fa que hicimos),&nbsp;<strong>CSS Grid Layout<\/strong>&nbsp;es un sistema de dise\u00f1o bidimensional dise\u00f1ado para crear estructuras de p\u00e1ginas completas (filas y columnas al mismo tiempo).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes la explicaci\u00f3n t\u00e9cnica y un ejemplo pr\u00e1ctico para tu web:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Conceptos Clave de CSS Grid<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para explicarlo en tu art\u00edculo, usa estos t\u00e9rminos t\u00e9cnicos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Grid Container:<\/strong>\u00a0El elemento padre que tiene\u00a0<code>display: grid<\/code>.<\/li>\n\n\n\n<li><strong>Grid Tracks:<\/strong>\u00a0El espacio entre dos l\u00edneas de la cuadr\u00edcula (b\u00e1sicamente las filas o columnas).<\/li>\n\n\n\n<li><strong>Grid Cell:<\/strong>\u00a0El \u00abcuadrado\u00bb individual (la intersecci\u00f3n de una fila y una columna).<\/li>\n\n\n\n<li><strong>Gap:<\/strong>\u00a0El espacio o callej\u00f3n entre celdas (antes llamado\u00a0<em>grid-gap<\/em>).<\/li>\n\n\n\n<li><strong>Fr (Fractional Unit):<\/strong>\u00a0Una unidad nueva en CSS que representa una fracci\u00f3n del espacio libre en el contenedor.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">2. Atributos Principales del Contenedor<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>grid-template-columns<\/code><\/strong>: Define cu\u00e1ntas columnas hay y qu\u00e9 ancho tienen.<\/li>\n\n\n\n<li><strong><code>grid-template-rows<\/code><\/strong>: Define el alto de las filas.<\/li>\n\n\n\n<li><strong><code>gap<\/code><\/strong>: Define la separaci\u00f3n entre elementos (ej:\u00a0<code>gap: 20px;<\/code>).<\/li>\n\n\n\n<li><strong><code>grid-template-areas<\/code><\/strong>: Permite poner nombre a secciones para crear layouts visuales muy potentes.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3. Ejemplo Pr\u00e1ctico: Layout de una P\u00e1gina (Demo Grid)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este c\u00f3digo crea una estructura cl\u00e1sica de p\u00e1gina web (Cabecera, Sidebar, Contenido y Pie) de forma ultra sencilla.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"contenedor-grid\">\n    &lt;header class=\"header\">Cabecera&lt;\/header>\n    &lt;nav class=\"sidebar\">Navegaci\u00f3n Lateral&lt;\/nav>\n    &lt;main class=\"contenido\">Contenido Principal&lt;\/main>\n    &lt;footer class=\"footer\">Pie de p\u00e1gina&lt;\/footer>\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>CSS (La magia de Grid):<\/strong><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>.contenedor-grid {\n    display: grid;\n    \/* Definimos 3 columnas: la lateral de 200px y el resto se reparte *\/\n    grid-template-columns: 200px 1fr 1fr;\n    \/* Definimos las filas: alto autom\u00e1tico para cabecera y pie, 400px para el medio *\/\n    grid-template-rows: auto 400px auto;\n    gap: 10px;\n    padding: 10px;\n}\n\n\/* Posicionamiento de los elementos *\/\n.header {\n    grid-column: 1 \/ 4; \/* Ocupa desde la l\u00ednea 1 hasta la 4 (toda la fila) *\/\n    background-color: #3498db;\n    color: white;\n    padding: 20px;\n}\n\n.sidebar {\n    grid-row: 2 \/ 3; \/* Se queda en la segunda fila *\/\n    background-color: #ecf0f1;\n    padding: 20px;\n}\n\n.contenido {\n    grid-column: 2 \/ 4; \/* Ocupa las dos \u00faltimas columnas *\/\n    background-color: #ffffff;\n    border: 1px solid #ddd;\n    padding: 20px;\n}\n\n.footer {\n    grid-column: 1 \/ 4;\n    background-color: #2c3e50;\n    color: white;\n    text-align: center;\n    padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. \u00bfCu\u00e1ndo usar Grid vs Flexbox? (Para tu conclusi\u00f3n)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Es la pregunta que todos los lectores se har\u00e1n. Una buena regla para tu art\u00edculo ser\u00eda:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Usa Flexbox<\/strong>\u00a0para\u00a0<strong>componentes peque\u00f1os<\/strong>\u00a0y alineaciones en una direcci\u00f3n (botones, men\u00fas horizontales, centrado de iconos).<\/li>\n\n\n\n<li><strong>Usa Grid<\/strong>\u00a0para el\u00a0<strong>esqueleto global de la web<\/strong>\u00a0o galer\u00edas de im\u00e1genes complejas donde necesitas control total de filas y columnas.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Bootstrap<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En el ecosistema del desarrollo web de&nbsp;<strong>2026<\/strong>,&nbsp;<mark><strong>Bootstrap<\/strong>&nbsp;sigue siendo el&nbsp;<strong>framework de CSS<\/strong>&nbsp;m\u00e1s popular del mundo<\/mark>. Para tu art\u00edculo, es vital definirlo como la herramienta que permite pasar de \u00abescribir c\u00f3digo desde cero\u00bb a \u00abensamblar piezas prefabricadas\u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfQu\u00e9 es Bootstrap?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap es una biblioteca de c\u00f3digo abierto (originalmente creada por Twitter) que contiene miles de l\u00edneas de&nbsp;<strong>CSS y JavaScript ya escritos<\/strong>. Su objetivo es permitir a los desarrolladores crear interfaces&nbsp;<strong>responsive<\/strong>&nbsp;(m\u00f3viles primero) de forma extremadamente r\u00e1pida y consistente.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfQu\u00e9 a\u00f1ade exactamente al CSS? (Lo que facilita el trabajo)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap no inventa un nuevo lenguaje, sino que encapsula el CSS complejo en&nbsp;<strong>Clases de Utilidad<\/strong>. Aqu\u00ed te detallo lo que aporta:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. El Sistema de Rejilla (Grid System) basado en Flexbox&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En lugar de calcular porcentajes o usar&nbsp;<code>display: grid<\/code>&nbsp;manualmente, Bootstrap divide la pantalla en&nbsp;<strong>12 columnas imaginarias<\/strong>.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Facilidad:<\/strong>\u00a0Solo a\u00f1ades la clase\u00a0<code>col-6<\/code>\u00a0a un elemento y Bootstrap se encarga de que ocupe exactamente la mitad de la pantalla, gestionando los m\u00e1rgenes autom\u00e1ticamente.\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">2. Componentes UI Listos para Usar<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap incluye una librer\u00eda de elementos dise\u00f1ados profesionalmente que solo requieren copiar y pegar el HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Botones:<\/strong>\u00a0Clase\u00a0<code>btn btn-primary<\/code>.<\/li>\n\n\n\n<li><strong>Alertas:<\/strong>\u00a0Clase\u00a0<code>alert alert-danger<\/code>.<\/li>\n\n\n\n<li><strong>Tarjetas (Cards):<\/strong>\u00a0Estructuras para mostrar productos o noticias.<\/li>\n\n\n\n<li><strong>Modales:<\/strong>\u00a0Ventanas emergentes que ya incluyen el comportamiento de abrir y cerrar.\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">3. Clases de Utilidad (Utility First)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Facilita cambios r\u00e1pidos sin tocar tu archivo&nbsp;<code>.css<\/code>. Ejemplos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>M\u00e1rgenes:<\/strong>\u00a0<code>mt-3<\/code>\u00a0(margin-top de nivel 3).<\/li>\n\n\n\n<li><strong>Colores de texto:<\/strong>\u00a0<code>text-success<\/code>\u00a0(verde para \u00e9xito).<\/li>\n\n\n\n<li><strong>Alineaci\u00f3n:<\/strong>\u00a0<code>d-flex justify-content-center<\/code>\u00a0(centrado instant\u00e1neo).\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">4. Normalizaci\u00f3n (Reboot)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cada navegador (Chrome, Safari, Firefox) interpreta los estilos base de forma distinta. Bootstrap a\u00f1ade un archivo llamado&nbsp;<strong>Reboot<\/strong>&nbsp;que \u00ablimpia\u00bb estas diferencias para que tu web se vea igual en todos los dispositivos.&nbsp;<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Ejemplo Comparativo: Crear un Bot\u00f3n Moderno<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Sin Bootstrap (CSS puro):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.mi-boton {\n    background-color: #007bff;\n    color: white;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 5px;\n    cursor: pointer;\n    font-size: 16px;\n    transition: background 0.3s;\n}\n.mi-boton:hover { background-color: #0056b3; }\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Con Bootstrap:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- No necesitas escribir nada de CSS, solo usar las clases -->\n&lt;button class=\"btn btn-primary\">Enviar&lt;\/button>\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">C\u00f3mo incluirlo en tu proyecto<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para que tus lectores puedan probarlo en tu art\u00edculo, deben a\u00f1adir este enlace en el&nbsp;<code>&lt;head&gt;<\/code>&nbsp;de su HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- CSS de Bootstrap v5.3+ (Versi\u00f3n estable en 2026) -->\n&lt;link href=\"cdn.jsdelivr.net\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Ventajas y Desventajas (Para tu conclusi\u00f3n)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pro:<\/strong>\u00a0Velocidad de desarrollo incre\u00edble y dise\u00f1o profesional por defecto.<\/li>\n\n\n\n<li><strong>Con:<\/strong>\u00a0Muchas webs terminan pareci\u00e9ndose entre s\u00ed (el \u00ablook Bootstrap\u00bb) y el archivo base puede ser pesado si no usas todos sus componentes.\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Para profundizar en la documentaci\u00f3n oficial, puedes dirigir a tus lectores a&nbsp;GetBootstrap.com.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">aqu\u00ed tienes el desglose t\u00e9cnico y funcional de&nbsp;<strong>Bootstrap<\/strong>&nbsp;actualizado a los est\u00e1ndares de&nbsp;<strong>2026<\/strong>. Bootstrap se basa en un sistema de&nbsp;<strong>\u00abUtility-First\u00bb<\/strong>&nbsp;(utilidades primero) y componentes robustos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">1. El Sistema de Rejilla (The Grid System)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es el coraz\u00f3n de Bootstrap. Se basa en&nbsp;<strong>Flexbox<\/strong>&nbsp;y divide la pantalla en&nbsp;<strong>12 columnas<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>container<\/code><\/strong>: El contenedor principal que centra el contenido y da m\u00e1rgenes laterales.<\/li>\n\n\n\n<li><strong><code>row<\/code><\/strong>: Una fila que envuelve las columnas (elimina el padding lateral del contenedor).<\/li>\n\n\n\n<li><strong><code>col-[breakpoint]-[n\u00famero]<\/code><\/strong>: Define cu\u00e1ntas de las 12 columnas ocupa un elemento.\n<ul class=\"wp-block-list\">\n<li><strong>Breakpoints:<\/strong>\u00a0<code>sm<\/code>\u00a0(m\u00f3vil),\u00a0<code>md<\/code>\u00a0(tablet),\u00a0<code>lg<\/code>\u00a0(escritorio),\u00a0<code>xl<\/code>,\u00a0<code>xxl<\/code>.<\/li>\n\n\n\n<li><em>Ejemplo:<\/em>\u00a0<code>col-md-6<\/code>\u00a0ocupa media pantalla en tablets y superior.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">2. Componentes de Interfaz (UI Components)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Son bloques de c\u00f3digo HTML\/CSS listos para copiar y usar.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navbar:<\/strong>\u00a0Men\u00fas de navegaci\u00f3n complejos con soporte para logos, enlaces, desplegables y buscador, totalmente responsive.<\/li>\n\n\n\n<li><strong>Buttons (<code>btn<\/code>)<\/strong>: Estilos predefinidos para acciones.\n<ul class=\"wp-block-list\">\n<li><em>Variantes:<\/em>\u00a0<code>btn-primary<\/code>\u00a0(azul),\u00a0<code>btn-secondary<\/code>\u00a0(gris),\u00a0<code>btn-success<\/code>\u00a0(verde),\u00a0<code>btn-danger<\/code>\u00a0(rojo),\u00a0<code>btn-outline-*<\/code>\u00a0(solo borde).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Cards (<code>card<\/code>)<\/strong>: Contenedores flexibles para contenido con opciones para cabeceras, pies, im\u00e1genes y botones.<\/li>\n\n\n\n<li><strong>Modals:<\/strong>\u00a0Ventanas emergentes (pop-ups) interactivas para notificaciones o formularios.<\/li>\n\n\n\n<li><strong>Alerts:<\/strong>\u00a0Mensajes de retroalimentaci\u00f3n (ej.\u00a0<code>alert-warning<\/code>\u00a0para avisos).<\/li>\n\n\n\n<li><strong>Forms:<\/strong>\u00a0Clases como\u00a0<code>form-control<\/code>\u00a0(inputs) y\u00a0<code>form-select<\/code>\u00a0que dan un aspecto moderno y uniforme a los formularios.<\/li>\n\n\n\n<li><strong>Carousels:<\/strong>\u00a0Deslizadores de im\u00e1genes con controles de navegaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3. Utilidades (Utilities)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Las utilidades permiten modificar el dise\u00f1o directamente en el HTML sin escribir una sola l\u00ednea de CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A. Espaciado (Spacing)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Usa el formato&nbsp;<code>{propiedad}{lado}-{tama\u00f1o}<\/code>&nbsp;(del 0 al 5).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>m-<\/code>\u00a0(margin)<\/strong>\u00a0y\u00a0<strong><code>p-<\/code>\u00a0(padding)<\/strong>.<\/li>\n\n\n\n<li><strong>Lados:<\/strong>\u00a0<code>t<\/code>\u00a0(top),\u00a0<code>b<\/code>\u00a0(bottom),\u00a0<code>s<\/code>\u00a0(start\/izquierda),\u00a0<code>e<\/code>\u00a0(end\/derecha),\u00a0<code>x<\/code>\u00a0(izquierda y derecha),\u00a0<code>y<\/code>\u00a0(arriba y abajo).<\/li>\n\n\n\n<li><em>Ejemplo:<\/em>\u00a0<code>mt-5<\/code>\u00a0aplica un margen superior grande;\u00a0<code>px-2<\/code>\u00a0un padding lateral peque\u00f1o.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">B. Tipograf\u00eda<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>h1<\/code>\u00a0a\u00a0<code>h6<\/code><\/strong>: Clases para dar apariencia de t\u00edtulo a cualquier texto.<\/li>\n\n\n\n<li><strong><code>display-1<\/code>\u00a0a\u00a0<code>display-6<\/code><\/strong>: T\u00edtulos mucho m\u00e1s grandes y estilizados.<\/li>\n\n\n\n<li><strong><code>text-center<\/code>,\u00a0<code>text-end<\/code>,\u00a0<code>text-start<\/code><\/strong>: Alineaci\u00f3n de texto.<\/li>\n\n\n\n<li><strong><code>fw-bold<\/code><\/strong>: Texto en negrita.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">C. Colores y Fondos<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Texto:<\/strong>\u00a0<code>text-primary<\/code>,\u00a0<code>text-white<\/code>,\u00a0<code>text-muted<\/code>\u00a0(gris suave).<\/li>\n\n\n\n<li><strong>Fondo:<\/strong>\u00a0<code>bg-dark<\/code>,\u00a0<code>bg-light<\/code>,\u00a0<code>bg-gradient<\/code>\u00a0(a\u00f1ade un sutil degradado).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">D. Flexbox (Layout instant\u00e1neo)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap expone todo el poder de Flexbox mediante clases:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>d-flex<\/code>: Convierte el contenedor en flexible.<\/li>\n\n\n\n<li><code>justify-content-between<\/code>: Separa los elementos al m\u00e1ximo.<\/li>\n\n\n\n<li><code>align-items-center<\/code>: Centra los elementos verticalmente.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">4. Ejemplo Pr\u00e1ctico Integrado<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed ves c\u00f3mo se combinan la rejilla, un componente (card) y utilidades:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container my-5\"&gt;\n    &lt;div class=\"row\"&gt;\n        <em>&lt;!-- Columna que ocupa 12 espacios en m\u00f3vil y 4 en escritorio --&gt;<\/em>\n        &lt;div class=\"col-12 col-md-4\"&gt;\n            &lt;div class=\"card shadow\"&gt; <em>&lt;!-- Componente Card con utilidad de sombra --&gt;<\/em>\n                &lt;img src=\"imagen.jpg\" class=\"card-img-top\" alt=\"...\"&gt;\n                &lt;div class=\"card-body\"&gt;\n                    &lt;h5 class=\"card-title fw-bold\"&gt;Producto Pro&lt;\/h5&gt; <em>&lt;!-- Utilidad negrita --&gt;<\/em>\n                    &lt;p class=\"card-text text-muted\"&gt;Descripci\u00f3n breve usando utilidades de color.&lt;\/p&gt;\n                    &lt;a href=\"#\" class=\"btn btn-primary w-100\"&gt;Comprar&lt;\/a&gt; <em>&lt;!-- Bot\u00f3n ancho completo --&gt;<\/em>\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Usa el c\u00f3digo con precauci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Resumen para tu art\u00edculo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para cerrar esta secci\u00f3n, puedes decir que&nbsp;<strong>Bootstrap<\/strong>&nbsp;facilita el CSS porque:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Elimina la necesidad de Media Queries manuales<\/strong>\u00a0gracias a su rejilla.<\/li>\n\n\n\n<li><strong>Garantiza la consistencia visual<\/strong>\u00a0en toda la web.<\/li>\n\n\n\n<li><strong>Acelera el prototipado<\/strong>, permitiendo maquetar una p\u00e1gina funcional en minutos.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes consultar la lista completa de utilidades en la&nbsp;Documentaci\u00f3n Oficial de Bootstrap.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cascading Style Sheets (CSS) es el lenguaje que define la est\u00e9tica de la web. En este art\u00edculo explicamos los conceptos fundamentales de CSS3, desde la especificidad de los selectores hasta los modelos de dise\u00f1o avanzados como Flexbox y Grid, permiti\u00e9ndote transformar la estructura HTML en interfaces de usuario atractivas y adaptables.<\/p>\n","protected":false},"author":1,"featured_media":824,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[565],"tags":[387,379,383,382,380,388,384,385,381,386],"class_list":["post-523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion","tag-automticamente","tag-cdigo","tag-cmo","tag-define","tag-estilos","tag-llegar","tag-men","tag-ordenadores","tag-responsividad","tag-transforma"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS - Ciencia y Tecnologia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cienciaytecnology.com\/wordpress\/css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS - Ciencia y Tecnologia\" \/>\n<meta property=\"og:description\" content=\"Cascading Style Sheets (CSS) es el lenguaje que define la est\u00e9tica de la web. En este art\u00edculo explicamos los conceptos fundamentales de CSS3, desde la especificidad de los selectores hasta los modelos de dise\u00f1o avanzados como Flexbox y Grid, permiti\u00e9ndote transformar la estructura HTML en interfaces de usuario atractivas y adaptables.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cienciaytecnology.com\/wordpress\/css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ciencia y Tecnologia\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-11T10:40:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-30T19:27:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/01\/css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1408\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"david\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"david\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/\"},\"author\":{\"name\":\"david\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"headline\":\"CSS\",\"datePublished\":\"2026-01-11T10:40:34+00:00\",\"dateModified\":\"2026-04-30T19:27:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/\"},\"wordCount\":1965,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"image\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/css.jpg\",\"keywords\":[\"autom\u00e1ticamente\",\"c\u00f3digo\",\"c\u00f3mo\",\"define\",\"estilos\",\"llegar\",\"men\u00fa\",\"ordenadores\",\"responsividad\",\"transforma\"],\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/\",\"name\":\"CSS - Ciencia y Tecnologia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/css.jpg\",\"datePublished\":\"2026-01-11T10:40:34+00:00\",\"dateModified\":\"2026-04-30T19:27:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/css.jpg\",\"contentUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/css.jpg\",\"width\":1408,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/\",\"name\":\"Ciencia y Tecnologia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\",\"name\":\"david\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\",\"caption\":\"david\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g\"},\"sameAs\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS - Ciencia y Tecnologia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cienciaytecnology.com\/wordpress\/css\/","og_locale":"es_ES","og_type":"article","og_title":"CSS - Ciencia y Tecnologia","og_description":"Cascading Style Sheets (CSS) es el lenguaje que define la est\u00e9tica de la web. En este art\u00edculo explicamos los conceptos fundamentales de CSS3, desde la especificidad de los selectores hasta los modelos de dise\u00f1o avanzados como Flexbox y Grid, permiti\u00e9ndote transformar la estructura HTML en interfaces de usuario atractivas y adaptables.","og_url":"https:\/\/cienciaytecnology.com\/wordpress\/css\/","og_site_name":"Ciencia y Tecnologia","article_published_time":"2026-01-11T10:40:34+00:00","article_modified_time":"2026-04-30T19:27:19+00:00","og_image":[{"width":1408,"height":768,"url":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/01\/css.jpg","type":"image\/jpeg"}],"author":"david","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"david","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#article","isPartOf":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/"},"author":{"name":"david","@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"headline":"CSS","datePublished":"2026-01-11T10:40:34+00:00","dateModified":"2026-04-30T19:27:19+00:00","mainEntityOfPage":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/"},"wordCount":1965,"commentCount":0,"publisher":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"image":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#primaryimage"},"thumbnailUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/01\/css.jpg","keywords":["autom\u00e1ticamente","c\u00f3digo","c\u00f3mo","define","estilos","llegar","men\u00fa","ordenadores","responsividad","transforma"],"articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cienciaytecnology.com\/wordpress\/css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/","url":"https:\/\/cienciaytecnology.com\/wordpress\/css\/","name":"CSS - Ciencia y Tecnologia","isPartOf":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#primaryimage"},"image":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#primaryimage"},"thumbnailUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/01\/css.jpg","datePublished":"2026-01-11T10:40:34+00:00","dateModified":"2026-04-30T19:27:19+00:00","breadcrumb":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cienciaytecnology.com\/wordpress\/css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#primaryimage","url":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/01\/css.jpg","contentUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2026\/01\/css.jpg","width":1408,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/cienciaytecnology.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"CSS"}]},{"@type":"WebSite","@id":"https:\/\/cienciaytecnology.com\/wordpress\/#website","url":"https:\/\/cienciaytecnology.com\/wordpress\/","name":"Ciencia y Tecnologia","description":"","publisher":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cienciaytecnology.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b","name":"david","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g","caption":"david"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/a9d8ccd92847e24d772422bc56934157f705784123e5b11a9724d44add16e6bb?s=96&d=mm&r=g"},"sameAs":["https:\/\/cienciaytecnology.com\/wordpress"]}]}},"_links":{"self":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":2,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"predecessor-version":[{"id":825,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/523\/revisions\/825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/media\/824"}],"wp:attachment":[{"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}