{"id":2005,"date":"2023-11-25T09:34:20","date_gmt":"2023-11-25T12:34:20","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=2005"},"modified":"2023-11-25T09:34:21","modified_gmt":"2023-11-25T12:34:21","slug":"capitulo-4-estilo-y-css3","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/capitulo-4-estilo-y-css3\/","title":{"rendered":"Cap\u00edtulo 4: Estilo y CSS3"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.1: Introducci\u00f3n a CSS<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para controlar la presentaci\u00f3n y el dise\u00f1o de p\u00e1ginas web HTML. Permite definir el aspecto visual de los elementos HTML, como colores, fuentes, m\u00e1rgenes, tama\u00f1os y m\u00e1s. Algunos conceptos clave de CSS incluyen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reglas de Estilo:<\/strong> Las reglas de estilo en CSS consisten en un selector (el elemento HTML al que se aplicar\u00e1 el estilo) y un bloque de declaraci\u00f3n que contiene propiedades y valores.<\/li>\n\n\n\n<li><strong>Propiedades:<\/strong> Las propiedades definen qu\u00e9 aspecto se cambiar\u00e1 (por ejemplo, \u00abcolor\u00bb para el color del texto) y los valores especifican c\u00f3mo se cambiar\u00e1 (por ejemplo, \u00abblue\u00bb para texto azul).<\/li>\n\n\n\n<li><strong>Selecci\u00f3n de Elementos:<\/strong> Puedes seleccionar elementos HTML por etiqueta, clase, identificador u otras caracter\u00edsticas para aplicar estilos.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.2: Novedades de CSS3<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS3 es la \u00faltima versi\u00f3n de CSS y trae consigo muchas caracter\u00edsticas nuevas y emocionantes. Algunas de las novedades m\u00e1s destacadas incluyen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Selectores Avanzados:<\/strong>&nbsp;CSS3 introduce nuevos selectores que permiten una mayor precisi\u00f3n en la selecci\u00f3n de elementos, como el selector&nbsp;<code>:nth-child<\/code>&nbsp;para seleccionar elementos espec\u00edficos de una lista.<\/li>\n\n\n\n<li><strong>Sombras y Bordes:<\/strong>&nbsp;Puedes aplicar sombras y bordes de manera m\u00e1s avanzada con las propiedades&nbsp;<code>box-shadow<\/code>&nbsp;y&nbsp;<code>border-radius<\/code>.<\/li>\n\n\n\n<li><strong>Animaciones y Transiciones:<\/strong>&nbsp;CSS3 permite crear animaciones y transiciones suaves sin necesidad de JavaScript.<\/li>\n\n\n\n<li><strong>Fuentes Web:<\/strong>&nbsp;Con CSS3, puedes utilizar fuentes personalizadas cargadas desde la web con&nbsp;<code>@font-face<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.3: Ejemplos y Ejercicios Resueltos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejemplo de Regla de Estilo B\u00e1sica:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Estilo para todos los p\u00e1rrafos *\/\r\np {\r\n    color: blue;\r\n    font-size: 16px;\r\n    margin-top: 10px;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Cambiar el Color de Texto<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un archivo CSS llamado \u00abestilos.css\u00bb y cambia el color del texto de todos los p\u00e1rrafos en un archivo HTML llamado \u00abindex.html\u00bb a rojo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* estilos.css *\/\r\np {\r\n    color: red;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 2: Estilo para T\u00edtulos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agrega estilos a los t\u00edtulos de nivel 1, nivel 2 y nivel 3 en tu p\u00e1gina web para que tengan diferentes colores y tama\u00f1os de fuente.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* estilos.css *\/\r\nh1 {\r\n    color: blue;\r\n    font-size: 24px;\r\n}\r\n\r\nh2 {\r\n    color: green;\r\n    font-size: 20px;\r\n}\r\n\r\nh3 {\r\n    color: red;\r\n    font-size: 16px;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 3: Crear un Bot\u00f3n de Estilo Personalizado<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un bot\u00f3n en tu p\u00e1gina web utilizando un elemento <code>&lt;button&gt;<\/code> y apl\u00edcale un estilo personalizado en tu archivo CSS para cambiar el fondo, el color del texto y el tama\u00f1o.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- index.html -->\r\n&lt;button class=\"boton-estilo\">Haz Clic&lt;\/button>\r\n\/* estilos.css *\/\r\n.boton-estilo {\r\n    background-color: #4CAF50;\r\n    color: white;\r\n    font-size: 18px;\r\n    padding: 10px 20px;\r\n    border: none;\r\n    cursor: pointer;\r\n}\r\n\r\n.boton-estilo:hover {\r\n    background-color: #45a049;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Estos ejemplos y ejercicios te introducir\u00e1n a los conceptos b\u00e1sicos de CSS y te permitir\u00e1n aplicar estilos a elementos HTML en tu p\u00e1gina web. A medida que avanzas, puedes explorar las caracter\u00edsticas avanzadas de CSS3 para lograr dise\u00f1os m\u00e1s complejos y atractivos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Selecci\u00f3n de Elementos HTML con CSS<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.4: Selecci\u00f3n de Elementos por Tipo, Clase e Identificador<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La selecci\u00f3n de elementos HTML con CSS es fundamental para aplicar estilos a tu p\u00e1gina web. Aqu\u00ed te explicar\u00e9 c\u00f3mo seleccionar elementos por tipo, clase e identificador:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Selecci\u00f3n por Tipo:<\/strong> Puedes seleccionar todos los elementos de un tipo espec\u00edfico, como p\u00e1rrafos (<code>&lt;p&gt;<\/code>), encabezados (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.), o listas (<code>&lt;ul&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>&lt;li&gt;<\/code>).<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Selecciona todos los p\u00e1rrafos y cambia su color a azul *\/\r\np {\r\n    color: blue;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Selecci\u00f3n por Clase:<\/strong> Agregar clases a elementos HTML te permite seleccionar grupos espec\u00edficos de elementos. Para seleccionar por clase, utiliza un punto antes del nombre de la clase.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Selecciona elementos con la clase \"destacado\" y cambia su color de fondo a amarillo *\/\r\n.destacado {\r\n    background-color: yellow;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Selecci\u00f3n por Identificador:<\/strong>\u00a0Los identificadores son \u00fanicos para cada elemento en una p\u00e1gina. Para seleccionar por identificador, utiliza un s\u00edmbolo de almohadilla (#) antes del nombre del identificador.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Selecciona el elemento con el identificador \"encabezado\" y cambia su tama\u00f1o de fuente *\/\r\n#encabezado {\r\n    font-size: 24px;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.5: Combinaci\u00f3n de Selectores<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Puedes combinar selectores para apuntar a elementos de manera m\u00e1s espec\u00edfica. Esto es \u00fatil cuando deseas seleccionar elementos anidados o elementos que cumplen m\u00faltiples condiciones. Algunos ejemplos incluyen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Selecci\u00f3n de Elementos Anidados:<\/strong> Puedes seleccionar elementos dentro de otros elementos anidados utilizando un espacio entre los selectores.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Selecciona todos los p\u00e1rrafos dentro de un elemento con la clase \"contenedor\" y cambia su margen superior *\/\r\n.contenedor p {\r\n    margin-top: 10px;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Selecci\u00f3n de Elementos con M\u00faltiples Clases:<\/strong>\u00a0Puedes seleccionar elementos que tengan m\u00faltiples clases utilizando un selector sin espacio entre las clases.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Selecciona elementos que tienen ambas clases \"importante\" y \"destacado\" y cambia su color de texto a rojo *\/\r\n.importante.destacado {\r\n    color: red;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.6: Ejemplos y Ejercicios Resueltos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejemplo de Combinaci\u00f3n de Selectores:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Selecciona todos los p\u00e1rrafos dentro de un elemento con la clase \"contenido\" y cambia su margen superior *\/\r\n.contenido p {\r\n    margin-top: 10px;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Estilo para T\u00edtulos de un Blog<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea un archivo CSS llamado \u00abestilos.css\u00bb y selecciona todos los t\u00edtulos de nivel 2 (<code>&lt;h2&gt;<\/code>) dentro de un art\u00edculo (<code>&lt;article&gt;<\/code>) para aplicarles un color y tama\u00f1o de fuente espec\u00edficos.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* estilos.css *\/\r\narticle h2 {\r\n    color: #3366CC;\r\n    font-size: 24px;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 2: Estilo para Botones de Compra<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agrega estilos a todos los botones con la clase \u00abcomprar\u00bb (<code>&lt;button class=\"comprar\"&gt;<\/code>) para cambiar su color de fondo y su color de texto.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* estilos.css *\/\r\n.comprar {\r\n    background-color: #4CAF50;\r\n    color: white;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 3: Estilo para un Elemento Espec\u00edfico<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Selecciona el elemento con el identificador \u00abencabezado\u00bb (<code>&lt;div id=\"encabezado\"&gt;<\/code>) y cambia su tama\u00f1o de fuente y color de fondo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><i style=\"background-color: initial; color: var(--ast-global-color-3);\"><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:\nES\">\/* estilos.css *\/<\/span><span class=\"hljs-selector-id\"><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:\nES\">#encabezado<\/span><\/span><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:\nES\"> {<\/span><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:ES\">\u00a0\u00a0\u00a0 <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">30px<\/span>;<\/span><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:\nES\">\u00a0\u00a0\u00a0 <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#FFD700<\/span>;<\/span><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:ES\">}<\/span><\/i><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Estos ejemplos y ejercicios te permitir\u00e1n comprender c\u00f3mo seleccionar elementos HTML con CSS y aplicar estilos de manera precisa. La habilidad para seleccionar y estilizar elementos es esencial en el dise\u00f1o de p\u00e1ginas web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.7: Dise\u00f1o de P\u00e1ginas Web Responsivas<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El dise\u00f1o de p\u00e1ginas web responsivas es esencial en la creaci\u00f3n de sitios que se adapten a diferentes dispositivos y tama\u00f1os de pantalla. Aqu\u00ed hay algunos conceptos clave y t\u00e9cnicas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Media Queries: <\/strong>Las media queries son reglas CSS que permiten aplicar estilos espec\u00edficos basados en las caracter\u00edsticas del dispositivo, como el ancho de la pantalla. Esto permite adaptar el dise\u00f1o y la disposici\u00f3n de los elementos.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code><i style=\"background-color: initial; color: var(--ast-global-color-3);\"><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:\nES\">\/* Ejemplo de una media query que aplica estilos cuando la pantalla tiene un ancho m\u00e1ximo de 600px *\/<\/span><span class=\"hljs-keyword\"><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:ES\">@media<\/span><\/span><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:ES\"> (<span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">600px<\/span>) {<\/span><span lang=\"ES\" style=\"font-size:10.5pt;mso-ansi-language:\nES\">\u00a0\u00a0\u00a0 <span class=\"hljs-comment\"><i>\/* Estilos para pantallas peque\u00f1as *\/<\/i><\/span><\/span><span style=\"font-size:10.5pt\">}<\/span><\/i><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dise\u00f1o Fluidos:<\/strong> Utiliza porcentajes en lugar de unidades fijas (como p\u00edxeles) para definir anchos y altos, lo que permite que los elementos se escalen autom\u00e1ticamente seg\u00fan el tama\u00f1o de la pantalla.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Utilizaci\u00f3n de porcentajes para un dise\u00f1o fluido *\/\r\n.container {\r\n    width: 80%;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Im\u00e1genes Adaptativas:<\/strong> Utiliza la propiedad <code>max-width: 100%;<\/code>\u00a0en im\u00e1genes para que se redimensionen de manera autom\u00e1tica y no se desborden en pantallas m\u00e1s peque\u00f1as.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Im\u00e1genes adaptativas *\/\r\nimg {\r\n    max-width: 100%;\r\n    height: auto;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.8: Aplicaci\u00f3n de Estilos a una Tienda en L\u00ednea<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El dise\u00f1o de una tienda en l\u00ednea es un ejemplo com\u00fan de c\u00f3mo aplicar estilos a un sitio web. Aqu\u00ed hay ejemplos de c\u00f3mo aplicar estilos a diferentes partes de una tienda en l\u00ednea:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Estilo para Encabezados y Logotipos:<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Estilo para el encabezado y logotipo *\/\r\nheader {\r\n    background-color: #333;\r\n    color: #fff;\r\n    padding: 10px;\r\n}\r\n#logo {\r\n    font-size: 24px;\r\n    font-weight: bold;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Estilo para Categor\u00edas de Productos:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Estilo para las categor\u00edas de productos *\/\r\n.categoria {\r\n    border: 1px solid #ccc;\r\n    padding: 10px;\r\n    margin: 10px;\r\n    text-align: center;\r\n    background-color: #f9f9f9;\r\n}\r\n.categoria a {\r\n    text-decoration: none;\r\n    color: #333;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Estilo para Productos Individuales:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Estilo para productos individuales *\/\r\n.producto {\r\n    border: 1px solid #ddd;\r\n    padding: 10px;\r\n    margin: 10px;\r\n    background-color: #fff;\r\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\r\n}\r\n.producto img {\r\n    max-width: 100%;\r\n    height: auto;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Secci\u00f3n 4.9: Ejemplos y Ejercicios Resueltos<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Creaci\u00f3n de una Tienda en L\u00ednea Responsiva<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Crea una p\u00e1gina web que simule una tienda en l\u00ednea y aplica estilos responsivos para que se vea bien en pantallas grandes y peque\u00f1as. Utiliza media queries y un dise\u00f1o fluido.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Establece un dise\u00f1o de 2 columnas en pantallas grandes *\/\r\n@media (min-width: 768px) {\r\n    .producto {\r\n        width: 48%;\r\n    }\r\n}\r\n\r\n\/* Cambia a una sola columna en pantallas peque\u00f1as *\/\r\n@media (max-width: 767px) {\r\n    .producto {\r\n        width: 100%;\r\n    }\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 2: Estilo para el Carrito de Compras<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agrega estilos al carrito de compras de tu tienda en l\u00ednea, aplicando colores de fondo, bordes y m\u00e1rgenes para que se destaque.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Estilo para el carrito de compras *\/\r\n#carrito {\r\n    background-color: #f9f9f9;\r\n    border: 1px solid #ccc;\r\n    padding: 10px;\r\n    margin: 10px;\r\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 3: Estilo para Botones de Compra<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplica un estilo a los botones de compra para que tengan un color de fondo atractivo y un color de texto blanco.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Estilo para los botones de compra *\/\r\n.boton-comprar {\r\n    background-color: #4CAF50;\r\n    color: white;\r\n    padding: 10px 20px;\r\n    border: none;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    font-size: 16px;\r\n    margin: 4px 2px;\r\n    cursor: pointer;\r\n}\r<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Estos ejemplos y ejercicios te ayudar\u00e1n a aplicar estilos responsivos a una tienda en l\u00ednea y a comprender c\u00f3mo el dise\u00f1o web adaptativo mejora la experiencia del usuario en dispositivos de diferentes tama\u00f1os. El dise\u00f1o responsivo es esencial para garantizar que tu sitio web sea accesible y atractivo para una amplia audiencia.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Secci\u00f3n 4.1: Introducci\u00f3n a CSS CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para controlar la presentaci\u00f3n y el dise\u00f1o de p\u00e1ginas web HTML. Permite definir el aspecto visual de los elementos HTML, como colores, fuentes, m\u00e1rgenes, tama\u00f1os y m\u00e1s. Algunos conceptos clave de CSS incluyen: Secci\u00f3n 4.2: Novedades de CSS3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[39],"tags":[],"class_list":["post-2005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Estilo-y-CSS3.jpg",1000,667,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Estilo-y-CSS3-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Estilo-y-CSS3-300x200.jpg",300,200,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Estilo-y-CSS3-768x512.jpg",768,512,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Estilo-y-CSS3.jpg",1000,667,false],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Estilo-y-CSS3.jpg",1000,667,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Estilo-y-CSS3.jpg",1000,667,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Secci\u00f3n 4.1: Introducci\u00f3n a CSS CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para controlar la presentaci\u00f3n y el dise\u00f1o de p\u00e1ginas web HTML. Permite definir el aspecto visual de los elementos HTML, como colores, fuentes, m\u00e1rgenes, tama\u00f1os y m\u00e1s. Algunos conceptos clave de CSS incluyen: Secci\u00f3n 4.2: Novedades de CSS3&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=2005"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2005\/revisions"}],"predecessor-version":[{"id":2007,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/2005\/revisions\/2007"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/2006"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=2005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=2005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=2005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}