{"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-01-11T11:40:34","modified_gmt":"2026-01-11T10:40:34","slug":"css","status":"publish","type":"post","link":"https:\/\/cienciaytecnology.com\/wordpress\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"\n<p>1. Introducci\u00f3n: \u00bfQu\u00e9 es CSS y en qu\u00e9 se diferencia CSS3?<\/p>\n\n\n\n<p>\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>2. Conceptos Fundamentales y Atributos<\/p>\n\n\n\n<p>Para que tus lectores entiendan c\u00f3mo funciona, debes detallar estos tres pilares:<\/p>\n\n\n\n<p>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>B. El Modelo de Caja (Box Model)<\/p>\n\n\n\n<p>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>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>3. Ejemplo de C\u00f3digo Completo (Demo CSS)<\/p>\n\n\n\n<p>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>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>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>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>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>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>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><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Upgrade Visual: Men\u00fa con Degradado (Gradients)<\/h2>\n\n\n\n<p>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>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>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>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><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Ejemplo de Tabla Profesional (Demo)<\/h2>\n\n\n\n<p>Este ejemplo combina la estructura sem\u00e1ntica completa con estilos CSS modernos:<\/p>\n\n\n\n<p><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><\/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>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>Aqu\u00ed tienes la explicaci\u00f3n t\u00e9cnica y un ejemplo pr\u00e1ctico para tu web:<\/p>\n\n\n\n<p>1. Conceptos Clave de CSS Grid<\/p>\n\n\n\n<p>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>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>3. Ejemplo Pr\u00e1ctico: Layout de una P\u00e1gina (Demo Grid)<\/p>\n\n\n\n<p>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><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>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>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>\u00bfQu\u00e9 es Bootstrap?<\/p>\n\n\n\n<p>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>\u00bfQu\u00e9 a\u00f1ade exactamente al CSS? (Lo que facilita el trabajo)<\/p>\n\n\n\n<p>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>1. El Sistema de Rejilla (Grid System) basado en Flexbox&nbsp;<\/p>\n\n\n\n<p>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>2. Componentes UI Listos para Usar<\/p>\n\n\n\n<p>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>3. Clases de Utilidad (Utility First)<\/p>\n\n\n\n<p>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>4. Normalizaci\u00f3n (Reboot)<\/p>\n\n\n\n<p>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>Ejemplo Comparativo: Crear un Bot\u00f3n Moderno<\/p>\n\n\n\n<p><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><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>C\u00f3mo incluirlo en tu proyecto<\/p>\n\n\n\n<p>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>Para profundizar en la documentaci\u00f3n oficial, puedes dirigir a tus lectores a&nbsp;GetBootstrap.com.&nbsp;<\/p>\n\n\n\n<p>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>1. El Sistema de Rejilla (The Grid System)<\/p>\n\n\n\n<p>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>2. Componentes de Interfaz (UI Components)<\/p>\n\n\n\n<p>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>3. Utilidades (Utilities)<\/p>\n\n\n\n<p>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>A. Espaciado (Spacing)<\/p>\n\n\n\n<p>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>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>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>D. Flexbox (Layout instant\u00e1neo)<\/p>\n\n\n\n<p>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>4. Ejemplo Pr\u00e1ctico Integrado<\/p>\n\n\n\n<p>Aqu\u00ed ves c\u00f3mo se combinan la rejilla, un componente (card) y utilidades:<\/p>\n\n\n\n<p>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>Usa el c\u00f3digo con precauci\u00f3n.<\/p>\n\n\n\n<p>Resumen para tu art\u00edculo<\/p>\n\n\n\n<p>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>Puedes consultar la lista completa de utilidades en la&nbsp;Documentaci\u00f3n Oficial de Bootstrap.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Introducci\u00f3n: \u00bfQu\u00e9 es CSS y en qu\u00e9 se diferencia CSS3? \u00abSi HTML es el esqueleto de una web,&nbsp;CSS&nbsp;es la piel, el estilo y la personalidad.&nbsp;CSS3&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,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"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":[60],"tags":[387,379,383,382,380,388,384,385,381,386],"class_list":["post-523","post","type-post","status-publish","format-standard","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.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS - Ciencia y Tecnologia<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\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=\"1. Introducci\u00f3n: \u00bfQu\u00e9 es CSS y en qu\u00e9 se diferencia CSS3? \u00abSi HTML es el esqueleto de una web,&nbsp;CSS&nbsp;es la piel, el estilo y la personalidad.&nbsp;CSS3&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,...\" \/>\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 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\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/\"},\"wordCount\":1965,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/#\\\/schema\\\/person\\\/b76777e3c0d2d08ea263068461c90d4b\"},\"keywords\":[\"autom\u00e1ticamente\",\"c\u00f3digo\",\"c\u00f3mo\",\"define\",\"estilos\",\"llegar\",\"men\u00fa\",\"ordenadores\",\"responsividad\",\"transforma\"],\"articleSection\":[\"Programacion\"],\"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\"},\"datePublished\":\"2026-01-11T10:40:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/css\\\/\"]}]},{\"@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:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\",\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\",\"contentUrl\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\",\"width\":1024,\"height\":1024,\"caption\":\"david\"},\"logo\":{\"@id\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/a-person-programming-with-a-computer-screen-and-code-visible.jpg\"},\"sameAs\":[\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\"],\"url\":\"https:\\\/\\\/cienciaytecnology.com\\\/wordpress\\\/author\\\/david\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS - Ciencia y Tecnologia","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"CSS - Ciencia y Tecnologia","og_description":"1. Introducci\u00f3n: \u00bfQu\u00e9 es CSS y en qu\u00e9 se diferencia CSS3? \u00abSi HTML es el esqueleto de una web,&nbsp;CSS&nbsp;es la piel, el estilo y la personalidad.&nbsp;CSS3&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,...","og_url":"https:\/\/cienciaytecnology.com\/wordpress\/css\/","og_site_name":"Ciencia y Tecnologia","article_published_time":"2026-01-11T10:40:34+00:00","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","mainEntityOfPage":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/"},"wordCount":1965,"commentCount":0,"publisher":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/#\/schema\/person\/b76777e3c0d2d08ea263068461c90d4b"},"keywords":["autom\u00e1ticamente","c\u00f3digo","c\u00f3mo","define","estilos","llegar","men\u00fa","ordenadores","responsividad","transforma"],"articleSection":["Programacion"],"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"},"datePublished":"2026-01-11T10:40:34+00:00","breadcrumb":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cienciaytecnology.com\/wordpress\/css\/"]}]},{"@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:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg","url":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg","contentUrl":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg","width":1024,"height":1024,"caption":"david"},"logo":{"@id":"https:\/\/cienciaytecnology.com\/wordpress\/wp-content\/uploads\/2024\/10\/a-person-programming-with-a-computer-screen-and-code-visible.jpg"},"sameAs":["https:\/\/cienciaytecnology.com\/wordpress"],"url":"https:\/\/cienciaytecnology.com\/wordpress\/author\/david\/"}]}},"_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":1,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"predecessor-version":[{"id":524,"href":"https:\/\/cienciaytecnology.com\/wordpress\/wp-json\/wp\/v2\/posts\/523\/revisions\/524"}],"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}]}}