¡Claro! Estoy encantado de proporcionarte una introducción completa a HTML y CSS para principiantes.
HTML (HyperText Markup Language) y CSS (Cascading Style Sheets) son dos tecnologías fundamentales para la creación y el diseño de páginas web. HTML se utiliza para estructurar el contenido de una página web, mientras que CSS se utiliza para estilizar y dar formato a ese contenido. Combinados, HTML y CSS permiten crear sitios web visualmente atractivos y funcionales.
Comencemos con HTML. HTML se basa en etiquetas que se utilizan para definir la estructura y el contenido de una página web. Estas etiquetas le dicen al navegador web cómo mostrar el contenido de la página. Por ejemplo, la etiqueta
se utiliza para definir un encabezado de nivel 1, que generalmente es el título principal de la página. La etiqueta
se utiliza para definir un párrafo de texto. Aquí tienes un ejemplo básico de HTML:
htmlhtml>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>¡Hola, mundo!title>
head>
<body>
<h1>¡Hola, mundo!h1>
<p>Este es un párrafo de ejemplo.p>
body>
html>
html
html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>¡Hola, mundo!title>
head>
<body>
<h1>¡Hola, mundo!h1>
<p>Este es un párrafo de ejemplo.p>
body>
html>
En este ejemplo, es el elemento raíz de un documento HTML y contiene todo el contenido de la página. La etiqueta contiene metadatos sobre el documento, como el título de la página y enlaces a hojas de estilo externas. La etiqueta contiene el contenido principal de la página, como encabezados, párrafos, imágenes, enlaces, etc.
Ahora, pasemos a CSS. CSS se utiliza para controlar la presentación visual de una página web, incluyendo el diseño, los colores, las fuentes y otros aspectos estéticos. Con CSS, puedes definir estilos para diferentes elementos HTML y crear diseños complejos y atractivos. Aquí tienes un ejemplo básico de CSS:
css/* Estilos para el encabezado */
h1 {
color: blue;
font-size: 24px;
}
/* Estilos para los párrafos */
p {
color: black;
font-size: 16px;
line-height: 1.5;
}
En este ejemplo, estamos definiendo estilos para los elementos
y
. El encabezado se mostrará en color azul con un tamaño de fuente de 24 píxeles, mientras que los párrafos se mostrarán en color negro con un tamaño de fuente de 16 píxeles y un interlineado de 1.5 veces el tamaño de la fuente.
Para aplicar estos estilos a nuestro ejemplo HTML anterior, podemos vincular el archivo CSS utilizando la etiqueta en la sección del documento HTML:
htmlhtml>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>¡Hola, mundo!title>
<link rel="stylesheet" href="styles.css">
head>
<body>
<h1>¡Hola, mundo!h1>
<p>Este es un párrafo de ejemplo.p>
body>
html>
Con esta línea , estamos vinculando el archivo CSS llamado «styles.css» a nuestro documento HTML.
Esto es solo una introducción básica a HTML y CSS para principiantes. Con el tiempo, podrás aprender más sobre estas tecnologías y cómo utilizarlas para crear sitios web impresionantes. ¡Buena suerte en tu viaje de aprendizaje!
Más Informaciones
Por supuesto, profundicemos más en HTML y CSS para que puedas comprender mejor cómo funcionan y cómo puedes utilizarlos para crear sitios web más avanzados.
HTML (HyperText Markup Language)
HTML es el lenguaje de marcado estándar utilizado para crear la estructura y el contenido de las páginas web. Utiliza una serie de etiquetas para definir diferentes elementos dentro de un documento web. Algunas etiquetas HTML comunes incluyen:
: Define el inicio y el final de un documento HTML.: Contiene metadatos sobre el documento, como el título, enlaces a hojas de estilo y scripts.</code>: Define el título de la página que se muestra en la pestaña del navegador.</li> <li><code><body></code>: Contiene el contenido principal de la página, como texto, imágenes, enlaces, etc.</li> <li><code><br /> <h1></code>, <code></p> <h2></code>, <code></p> <h3></code>, <code></p> <h4></code>, <code></p> <h5></code>, <code></p> <h6></code>: Definen encabezados de diferentes niveles.</li> <li><code> <p></code>: Define un párrafo de texto.</li> <li><code><a></code>: Define un enlace a otra página web o recurso.</li> <li><code><img></code>: Inserta una imagen en la página.</li> <li><code> <ul></code> y <code></p> <ol></code>: Definen listas no ordenadas (viñetas) y ordenadas (números), respectivamente.</li> <li><code> <li></code>: Define un elemento de lista dentro de <code> <ul></code> o <code></p> <ol></code>.</li> <li><code> <div></code>: Define una división o contenedor genérico para organizar y estructurar el contenido.</li> <li><code><span></code>: Define un contenedor en línea para aplicar estilos a porciones específicas de texto.</li> </ul> <p>Estas son solo algunas de las etiquetas más comunes en HTML. Existen muchas otras etiquetas y atributos que puedes utilizar para crear y estructurar contenido web de manera más avanzada.</p> <h3>CSS (Cascading Style Sheets)</h3> <p>CSS se utiliza para estilizar y dar formato al contenido HTML de una página web. Permite controlar aspectos visuales como el color, la tipografía, el diseño y el espaciado. Los estilos CSS se aplican a elementos HTML utilizando selectores. Algunos conceptos importantes de CSS incluyen:</p> <ul> <li><strong>Selectores</strong>: Se utilizan para apuntar a elementos HTML y aplicar estilos. Pueden ser selectores de etiquetas, clases, identificadores, atributos, pseudoclases, pseudoelementos, etc.</li> <li><strong>Propiedades y valores</strong>: Las propiedades CSS especifican qué aspecto del elemento se está estilizando, como el color o el tamaño de la fuente. Los valores definen cómo se verá esa propiedad, como «rojo» o «12px».</li> <li><strong>Modelo de caja</strong>: Es un concepto fundamental en CSS que describe cómo se representan los elementos en la página, incluyendo su contenido, relleno, borde y margen.</li> <li><strong>Flexbox y Grid</strong>: Son sistemas de diseño flexibles en CSS que permiten crear diseños complejos y adaptables con facilidad.</li> <li><strong>Media queries</strong>: Se utilizan para aplicar estilos específicos según el tamaño de la pantalla o el dispositivo, lo que permite crear diseños receptivos y adaptables.</li> </ul> <p>Aquí hay un ejemplo de cómo se vería un archivo CSS aplicando estilos a algunas etiquetas HTML:</p> <pre><div class="dark bg-gray-950 rounded-md"><div class="flex items-center relative text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md"><span>css</span><span class="" data-state="closed"><button class="flex gap-1 items-center"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-sm"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor"></path></svg>Copy code</button></span></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-css"><span class="hljs-comment">/* Estilos para el encabezado */</span> <span class="hljs-selector-tag">h1</span> { <span class="hljs-attribute">color</span>: blue; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">28px</span>; <span class="hljs-attribute">text-align</span>: center; } <span class="hljs-comment">/* Estilos para los párrafos */</span> <span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">color</span>: black; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>; <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.6</span>; } <span class="hljs-comment">/* Estilos para los enlaces */</span> <span class="hljs-selector-tag">a</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#FF4500</span>; <span class="hljs-comment">/* Color naranja */</span> <span class="hljs-attribute">text-decoration</span>: none; <span class="hljs-comment">/* Sin subrayado */</span> } <span class="hljs-comment">/* Estilos para las imágenes */</span> <span class="hljs-selector-tag">img</span> { <span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>; <span class="hljs-comment">/* Imágenes escalables */</span> <span class="hljs-attribute">height</span>: auto; } </code></div></div></pre> <p>En este ejemplo, estamos aplicando estilos diferentes a los encabezados, párrafos, enlaces e imágenes. Puedes experimentar con diferentes propiedades y valores para lograr el aspecto deseado en tu página web.</p> <p>En resumen, HTML y CSS son herramientas poderosas que te permiten crear páginas web hermosas y funcionales. A medida que explores más estas tecnologías, descubrirás una amplia gama de posibilidades para diseñar y desarrollar sitios web impresionantes. ¡Disfruta aprendiendo y creando!</p> </div> </div> </p> <div class="stream-item stream-item-below-post-content"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </div><!-- .entry-content /--> <div id="post-extra-info"> <div class="theiaStickySidebar"> <div class="single-post-meta post-meta clearfix"><span class="meta-item last-updated">Last Updated: 23/02/2024</span></div><!-- .post-meta --> <div id="share-buttons-top" class="share-buttons share-buttons-top"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Introducci%C3%B3n%20a%20HTML%20y%20CSS&url=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/introduccion-a-html-y-css-3/&title=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&name=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&description=Introducci%C3%B3n%20a%20HTML%20y%20CSS&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&title=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://revistacompleta.com/introduccion-a-html-y-css-3/&redirect_uri=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://revistacompleta.com/introduccion-a-html-y-css-3/&redirect_uri=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Introducci%C3%B3n%20a%20HTML%20y%20CSS%20https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&text=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Introducci%C3%B3n%20a%20HTML%20y%20CSS%20https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Introducci%C3%B3n%20a%20HTML%20y%20CSS%20https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> <a href="mailto:?subject=Introducci%C3%B3n%20a%20HTML%20y%20CSS&body=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Compartir por correo electrónico" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Compartir por correo electrónico</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </div> </div> <div class="clearfix"></div> <script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BlogPosting","dateCreated":"2024-02-23T20:19:27+03:00","datePublished":"2024-02-23T20:19:27+03:00","dateModified":"2024-02-23T20:19:27+03:00","headline":"Introducci\u00f3n a HTML y CSS","name":"Introducci\u00f3n a HTML y CSS","keywords":"CSS,desarrollo web,Dise\u00f1o Web,HTML,Introducci\u00f3n,P\u00e1ginas Web,Principiantes","url":"https:\/\/revistacompleta.com\/introduccion-a-html-y-css-3\/","description":"\u00a1Claro! Estoy encantado de proporcionarte una introducci\u00f3n completa a HTML y CSS para principiantes.HTML (HyperText Markup Language) y CSS (Cascading Style Sheets) son dos tecnolog\u00edas fundamentales pa","copyrightYear":"2024","articleSection":"programaci\u00f3n","articleBody":"\u00a1Claro! Estoy encantado de proporcionarte una introducci\u00f3n completa a HTML y CSS para principiantes.HTML (HyperText Markup Language) y CSS (Cascading Style Sheets) son dos tecnolog\u00edas fundamentales para la creaci\u00f3n y el dise\u00f1o de p\u00e1ginas web. HTML se utiliza para estructurar el contenido de una p\u00e1gina web, mientras que CSS se utiliza para estilizar y dar formato a ese contenido. Combinados, HTML y CSS permiten crear sitios web visualmente atractivos y funcionales.Comencemos con HTML. HTML se basa en etiquetas que se utilizan para definir la estructura y el contenido de una p\u00e1gina web. Estas etiquetas le dicen al navegador web c\u00f3mo mostrar el contenido de la p\u00e1gina. Por ejemplo, la etiqueta se utiliza para definir un encabezado de nivel 1, que generalmente es el t\u00edtulo principal de la p\u00e1gina. La etiqueta se utiliza para definir un p\u00e1rrafo de texto. Aqu\u00ed tienes un ejemplo b\u00e1sico de HTML:htmlCopy code\n\n\n \n \n \u00a1Hola, mundo!\n\n\n \u00a1Hola, mundo!\n Este es un p\u00e1rrafo de ejemplo.\n\n\nEn este ejemplo, declara que el documento es un documento HTML5. La etiqueta es el elemento ra\u00edz de un documento HTML y contiene todo el contenido de la p\u00e1gina. La etiqueta contiene metadatos sobre el documento, como el t\u00edtulo de la p\u00e1gina y enlaces a hojas de estilo externas. La etiqueta contiene el contenido principal de la p\u00e1gina, como encabezados, p\u00e1rrafos, im\u00e1genes, enlaces, etc.Ahora, pasemos a CSS. CSS se utiliza para controlar la presentaci\u00f3n visual de una p\u00e1gina web, incluyendo el dise\u00f1o, los colores, las fuentes y otros aspectos est\u00e9ticos. Con CSS, puedes definir estilos para diferentes elementos HTML y crear dise\u00f1os complejos y atractivos. Aqu\u00ed tienes un ejemplo b\u00e1sico de CSS:cssCopy code\/* Estilos para el encabezado *\/\nh1 {\n color: blue;\n font-size: 24px;\n}\n\n\/* Estilos para los p\u00e1rrafos *\/\np {\n color: black;\n font-size: 16px;\n line-height: 1.5;\n}\nEn este ejemplo, estamos definiendo estilos para los elementos y . El encabezado se mostrar\u00e1 en color azul con un tama\u00f1o de fuente de 24 p\u00edxeles, mientras que los p\u00e1rrafos se mostrar\u00e1n en color negro con un tama\u00f1o de fuente de 16 p\u00edxeles y un interlineado de 1.5 veces el tama\u00f1o de la fuente.Para aplicar estos estilos a nuestro ejemplo HTML anterior, podemos vincular el archivo CSS utilizando la etiqueta en la secci\u00f3n del documento HTML:htmlCopy code\n\n\n \n \n \u00a1Hola, mundo!\n \n\n\n \u00a1Hola, mundo!\n Este es un p\u00e1rrafo de ejemplo.\n\n\nCon esta l\u00ednea , estamos vinculando el archivo CSS llamado \"styles.css\" a nuestro documento HTML.Esto es solo una introducci\u00f3n b\u00e1sica a HTML y CSS para principiantes. Con el tiempo, podr\u00e1s aprender m\u00e1s sobre estas tecnolog\u00edas y c\u00f3mo utilizarlas para crear sitios web impresionantes. \u00a1Buena suerte en tu viaje de aprendizaje!M\u00e1s Informaciones\n\nPor supuesto, profundicemos m\u00e1s en HTML y CSS para que puedas comprender mejor c\u00f3mo funcionan y c\u00f3mo puedes utilizarlos para crear sitios web m\u00e1s avanzados.HTML (HyperText Markup Language)HTML es el lenguaje de marcado est\u00e1ndar utilizado para crear la estructura y el contenido de las p\u00e1ginas web. Utiliza una serie de etiquetas para definir diferentes elementos dentro de un documento web. Algunas etiquetas HTML comunes incluyen:: Define el inicio y el final de un documento HTML.: Contiene metadatos sobre el documento, como el t\u00edtulo, enlaces a hojas de estilo y scripts.: Define el t\u00edtulo de la p\u00e1gina que se muestra en la pesta\u00f1a del navegador.: Contiene el contenido principal de la p\u00e1gina, como texto, im\u00e1genes, enlaces, etc., , , , , : Definen encabezados de diferentes niveles.: Define un p\u00e1rrafo de texto.: Define un enlace a otra p\u00e1gina web o recurso.: Inserta una imagen en la p\u00e1gina. y : Definen listas no ordenadas (vi\u00f1etas) y ordenadas (n\u00fameros), respectivamente.: Define un elemento de lista dentro de o .: Define una divisi\u00f3n o contenedor gen\u00e9rico para organizar y estructurar el contenido.: Define un contenedor en l\u00ednea para aplicar estilos a porciones espec\u00edficas de texto.Estas son solo algunas de las etiquetas m\u00e1s comunes en HTML. Existen muchas otras etiquetas y atributos que puedes utilizar para crear y estructurar contenido web de manera m\u00e1s avanzada.CSS (Cascading Style Sheets)CSS se utiliza para estilizar y dar formato al contenido HTML de una p\u00e1gina web. Permite controlar aspectos visuales como el color, la tipograf\u00eda, el dise\u00f1o y el espaciado. Los estilos CSS se aplican a elementos HTML utilizando selectores. Algunos conceptos importantes de CSS incluyen:Selectores: Se utilizan para apuntar a elementos HTML y aplicar estilos. Pueden ser selectores de etiquetas, clases, identificadores, atributos, pseudoclases, pseudoelementos, etc.Propiedades y valores: Las propiedades CSS especifican qu\u00e9 aspecto del elemento se est\u00e1 estilizando, como el color o el tama\u00f1o de la fuente. Los valores definen c\u00f3mo se ver\u00e1 esa propiedad, como \"rojo\" o \"12px\".Modelo de caja: Es un concepto fundamental en CSS que describe c\u00f3mo se representan los elementos en la p\u00e1gina, incluyendo su contenido, relleno, borde y margen.Flexbox y Grid: Son sistemas de dise\u00f1o flexibles en CSS que permiten crear dise\u00f1os complejos y adaptables con facilidad.Media queries: Se utilizan para aplicar estilos espec\u00edficos seg\u00fan el tama\u00f1o de la pantalla o el dispositivo, lo que permite crear dise\u00f1os receptivos y adaptables.Aqu\u00ed hay un ejemplo de c\u00f3mo se ver\u00eda un archivo CSS aplicando estilos a algunas etiquetas HTML:cssCopy code\/* Estilos para el encabezado *\/\nh1 {\n color: blue;\n font-size: 28px;\n text-align: center;\n}\n\n\/* Estilos para los p\u00e1rrafos *\/\np {\n color: black;\n font-size: 16px;\n line-height: 1.6;\n}\n\n\/* Estilos para los enlaces *\/\na {\n color: #FF4500; \/* Color naranja *\/\n text-decoration: none; \/* Sin subrayado *\/\n}\n\n\/* Estilos para las im\u00e1genes *\/\nimg {\n max-width: 100%; \/* Im\u00e1genes escalables *\/\n height: auto;\n}\nEn este ejemplo, estamos aplicando estilos diferentes a los encabezados, p\u00e1rrafos, enlaces e im\u00e1genes. Puedes experimentar con diferentes propiedades y valores para lograr el aspecto deseado en tu p\u00e1gina web.En resumen, HTML y CSS son herramientas poderosas que te permiten crear p\u00e1ginas web hermosas y funcionales. A medida que explores m\u00e1s estas tecnolog\u00edas, descubrir\u00e1s una amplia gama de posibilidades para dise\u00f1ar y desarrollar sitios web impresionantes. \u00a1Disfruta aprendiendo y creando!","publisher":{"@id":"#Publisher","@type":"Organization","name":"Revista Completa","logo":{"@type":"ImageObject","url":"https:\/\/revistacompleta.com\/wp-content\/uploads\/2023\/12\/revista-completa-high-resolution-logo-transparent.png"},"sameAs":["https:\/\/www.facebook.com\/larevistacompleta\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/revistacompleta.com\/introduccion-a-html-y-css-3\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"admin","url":"https:\/\/revistacompleta.com\/author\/admin\/"},"image":{"@type":"ImageObject","url":"https:\/\/revistacompleta.com\/wp-content\/uploads\/2023\/12\/revista-completa-high-resolution-logo.png","width":2000,"height":1500}}</script> <div id="share-buttons-bottom" class="share-buttons share-buttons-bottom"> <div class="share-links share-centered icons-only share-rounded"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Introducci%C3%B3n%20a%20HTML%20y%20CSS&url=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/introduccion-a-html-y-css-3/&title=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&name=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&description=Introducci%C3%B3n%20a%20HTML%20y%20CSS&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&title=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="https://vk.com/share.php?url=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}"> <span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">VKontakte</span> </a> <a href="mailto:?subject=Introducci%C3%B3n%20a%20HTML%20y%20CSS&body=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Compartir por correo electrónico" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}"> <span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">Compartir por correo electrónico</span> </a> <a href="#" rel="external noopener nofollow" title="Imprimir" target="_blank" class="print-share-btn " data-raw="#"> <span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">Imprimir</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> </article><!-- #the-post /--> <div class="post-components"> <div class="stream-item stream-item-below-post-comments"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> </div><!-- .post-components /--> </div><!-- .main-content --> </div><!-- .main-content-row /--></div><!-- #content /--><div class="stream-item stream-item-above-footer"><div class="stream-item-size" style=""> <div class="stream-item stream-item-in-post stream-item-in-post-1"><script type="text/javascript"> atOptions = { 'key' : 'a1bbb3c3c30486fc0e0daadefc678c32', 'format' : 'iframe', 'height' : 90, 'width' : 728, 'params' : {} }; </script> <script type="text/javascript" src="//www.topcreativeformat.com/a1bbb3c3c30486fc0e0daadefc678c32/invoke.js"></script> </div> </div></div> <footer id="footer" class="site-footer dark-skin dark-widgetized-area"> <div id="footer-widgets-container"> <div class="container"> </div><!-- .container /--> </div><!-- #Footer-widgets-container /--> <div id="site-info" class="site-info"> <div class="container"> <div class="tie-row"> <div class="tie-col-md-12"> <div class="copyright-text copyright-text-first"><footer> © Derechos de Autor 2024, Todos los Derechos Reservados | <span style="color:red;" class="tie-icon-heart"></span> </footer> </div><div class="copyright-text copyright-text-second"> | <a href="https://revistacompleta.com/about-us/">Acerca de Nosotros</a> | <a href="https://revistacompleta.com/contact-us/">Contáctanos</a> | <a href="https://revistacompleta.com/report/">Reportar</a> | <a href="https://revistacompleta.com/terms-and-conditions/">Términos y Condiciones</a> | <a href="https://revistacompleta.com/privacy-policy/">Política de Privacidad</a> | <a href="https://revistacompleta.com/faq/">Preguntas Frecuentes (FAQ)</a> | <a href="https://revistacompleta.com/disclaimer/">Aviso Legal</a></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/larevistacompleta/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- .tie-col /--> </div><!-- .tie-row /--> </div><!-- .container /--> </div><!-- #site-info /--> </footer><!-- #footer /--> <div id="share-buttons-mobile" class="share-buttons share-buttons-mobile"> <div class="share-links icons-only"> <a href="https://www.facebook.com/sharer.php?u=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Facebook" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}"> <span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">Facebook</span> </a> <a href="https://twitter.com/intent/tweet?text=Introducci%C3%B3n%20a%20HTML%20y%20CSS&url=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="X" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}"> <span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">X</span> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://revistacompleta.com/introduccion-a-html-y-css-3/&title=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="LinkedIn" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}"> <span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">LinkedIn</span> </a> <a href="https://www.tumblr.com/share/link?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&name=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Tumblr" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}"> <span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">Tumblr</span> </a> <a href="https://pinterest.com/pin/create/button/?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&description=Introducci%C3%B3n%20a%20HTML%20y%20CSS&media=https://revistacompleta.com/wp-content/uploads/2023/12/revista-completa-high-resolution-logo.png" rel="external noopener nofollow" title="Pinterest" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}"> <span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">Pinterest</span> </a> <a href="https://reddit.com/submit?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&title=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Reddit" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}"> <span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">Reddit</span> </a> <a href="fb-messenger://share?app_id=5303202981&display=popup&link=https://revistacompleta.com/introduccion-a-html-y-css-3/&redirect_uri=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-mob-share-btn messenger-share-btn " data-raw="fb-messenger://share?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link=https://revistacompleta.com/introduccion-a-html-y-css-3/&redirect_uri=https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Messenger" target="_blank" class="messenger-desktop-share-btn messenger-share-btn " data-raw="https://www.facebook.com/dialog/send?app_id=5303202981&display=popup&link={post_link}&redirect_uri={post_link}"> <span class="share-btn-icon tie-icon-messenger"></span> <span class="screen-reader-text">Messenger</span> </a> <a href="https://api.whatsapp.com/send?text=Introducci%C3%B3n%20a%20HTML%20y%20CSS%20https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="WhatsApp" target="_blank" class="whatsapp-share-btn " data-raw="https://api.whatsapp.com/send?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span> </a> <a href="https://telegram.me/share/url?url=https://revistacompleta.com/introduccion-a-html-y-css-3/&text=Introducci%C3%B3n%20a%20HTML%20y%20CSS" rel="external noopener nofollow" title="Telegram" target="_blank" class="telegram-share-btn " data-raw="https://telegram.me/share/url?url={post_link}&text={post_title}"> <span class="share-btn-icon tie-icon-paper-plane"></span> <span class="screen-reader-text">Telegram</span> </a> <a href="viber://forward?text=Introducci%C3%B3n%20a%20HTML%20y%20CSS%20https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Viber" target="_blank" class="viber-share-btn " data-raw="viber://forward?text={post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-phone"></span> <span class="screen-reader-text">Viber</span> </a> <a href="https://line.me/R/msg/text/?Introducci%C3%B3n%20a%20HTML%20y%20CSS%20https://revistacompleta.com/introduccion-a-html-y-css-3/" rel="external noopener nofollow" title="Line" target="_blank" class="line-share-btn " data-raw="https://line.me/R/msg/text/?{post_title}%20{post_link}"> <span class="share-btn-icon tie-icon-line"></span> <span class="screen-reader-text">Line</span> </a> </div><!-- .share-links /--> </div><!-- .share-buttons /--> <div class="mobile-share-buttons-spacer"></div> <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"> <span class="tie-icon-angle-up"></span> <span class="screen-reader-text">Botón volver arriba</span> </a> </div><!-- #tie-wrapper /--> <aside class=" side-aside normal-side dark-skin dark-widgetized-area appear-from-left" aria-label="Barra lateral Secundaria" style="visibility: hidden;"> <div data-height="100%" class="side-aside-wrapper has-custom-scroll"> <a href="#" class="close-side-aside remove big-btn"> <span class="screen-reader-text">Cerrar</span> </a><!-- .close-side-aside /--> <div id="mobile-container"> <div id="mobile-search"> <form role="search" method="get" class="search-form" action="https://revistacompleta.com/"> <label> <span class="screen-reader-text">Buscar:</span> <input type="search" class="search-field" placeholder="Buscar …" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Buscar" /> </form> </div><!-- #mobile-search /--> <div id="mobile-menu" class=""> </div><!-- #mobile-menu /--> <div id="mobile-social-icons" class="social-icons-widget solid-social-icons"> <ul><li class="social-icons-item"><a class="social-link facebook-social-icon" rel="external noopener nofollow" target="_blank" href="https://www.facebook.com/larevistacompleta/"><span class="tie-social-icon tie-icon-facebook"></span><span class="screen-reader-text">Facebook</span></a></li></ul> </div><!-- #mobile-social-icons /--> </div><!-- #mobile-container /--> </div><!-- .side-aside-wrapper /--> </aside><!-- .side-aside /--> </div><!-- #tie-container /--> </div><!-- .background-overlay /--> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Preferencias de consentimiento" style="background-color:#0056a7"> <button class="cky-btn-revisit" aria-label="Preferencias de consentimiento"> <img src="https://revistacompleta.com/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#f4f4f4;color:#212121"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#212121">Valoramos tu privacidad</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>Utilizamos cookies para mejorar tu experiencia de navegación, ofrecer anuncios o contenido personalizado y analizar nuestro tráfico. Al hacer clic en 'Aceptar Todo', aceptas nuestro uso de cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Personalizar" data-cky-tag="settings-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Personalizar</button> <button class="cky-btn cky-btn-reject" aria-label="Rechazar Todo" data-cky-tag="reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc">Rechazar Todo</button> <button class="cky-btn cky-btn-accept" aria-label="Aceptar Todo" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#1863dc;border-color:#1863dc">Aceptar Todo</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#212121">Personalizar Preferencias de Consentimiento</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://revistacompleta.com/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>Utilizamos cookies para ayudarte a navegar eficientemente y realizar funciones específicas. Encontrarás información detallada sobre todas las cookies en cada categoría de consentimiento a continuación.</p> <p>Las cookies categorizadas como 'Necesarias' se almacenan en tu navegador ya que son esenciales para habilitar las funcionalidades básicas del sitio.</p> <p>También utilizamos cookies de terceros que nos ayudan a analizar cómo utilizas este sitio web, almacenar tus preferencias y proporcionar contenido y anuncios relevantes para ti. Estas cookies solo se almacenarán en tu navegador con tu consentimiento previo.</p> <p>Puedes elegir habilitar o deshabilitar algunas o todas estas cookies, pero desactivar algunas de ellas puede afectar tu experiencia de navegación.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#212121">Necessary</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#212121">Functional</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#212121">Analytics</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#212121">Performance</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#212121">Advertisement</button><span class="cky-always-active">Siempre activa</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No hay cookies para mostrar.</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="Rechazar Todo" data-cky-tag="detail-reject-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Rechazar Todo </button> <button class="cky-btn cky-btn-preferences" aria-label="Guardar mis preferencias" data-cky-tag="detail-save-button" style="color:#1863dc;background-color:transparent;border-color:#1863dc"> Guardar mis preferencias </button> <button class="cky-btn cky-btn-accept" aria-label="Aceptar Todo" data-cky-tag="detail-accept-button" style="color:#ffffff;background-color:#1863dc;border-color:#1863dc"> Aceptar Todo </button> </div></div></div></div></script> <script> function _katexRender(rootElement) { const eles = rootElement.querySelectorAll(".katex-eq:not(.katex-rendered)"); for(let idx=0; idx < eles.length; idx++) { const ele = eles[idx]; ele.classList.add("katex-rendered"); try { katex.render( ele.textContent, ele, { displayMode: ele.getAttribute("data-katex-display") === 'true', throwOnError: false } ); } catch(n) { ele.style.color="red"; ele.textContent = n.message; } } } function katexRender() { _katexRender(document); } document.addEventListener("DOMContentLoaded", function() { katexRender(); // Perform a KaTeX rendering step when the DOM is mutated. const katexObserver = new MutationObserver(function(mutations) { [].forEach.call(mutations, function(mutation) { if (mutation.target && mutation.target instanceof Element) { _katexRender(mutation.target); } }); }); const katexObservationConfig = { subtree: true, childList: true, attributes: true, characterData: true }; katexObserver.observe(document.body, katexObservationConfig); }); </script> <div id="ays_tooltip" ><div id="ays_tooltip_block"><p>¡Este contenido está protegido contra copia! Para compartirlo, utilice los botones de compartir rápido o copie el enlace.</p> </div></div> <style> #ays_tooltip,.ays_tooltip_class { display: none; position: absolute; z-index: 999999999; background-color: #ffffff; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity:1; border: 1px solid #b7b7b7; border-radius: 3px; box-shadow: rgba(0,0,0,0) 0px 0px 15px 1px; color: #00872a; padding: 5px; text-transform: none; ; } #ays_tooltip > *, .ays_tooltip_class > * { color: #00872a; font-size: 12px; } #ays_tooltip_block { font-size: 12px; backdrop-filter: blur(0px); } @media screen and (max-width: 768px){ #ays_tooltip,.ays_tooltip_class { font-size: 12px; } #ays_tooltip > *, .ays_tooltip_class > * { font-size: 12px; } } </style> <style> *:not(input):not(textarea)::selection { background-color: transparent !important; color: inherit !important; } *:not(input):not(textarea)::-moz-selection { background-color: transparent !important; color: inherit !important; } </style> <script> function stopPrntScr() { var inpFld = document.createElement("input"); inpFld.setAttribute("value", "Access Denied"); inpFld.setAttribute("width", "0"); inpFld.style.height = "0px"; inpFld.style.width = "0px"; inpFld.style.border = "0px"; document.body.appendChild(inpFld); inpFld.select(); document.execCommand("copy"); inpFld.remove(inpFld); } (function ($) { 'use strict'; $(function () { let all = $('*').not('script, meta, link, style, noscript, title'), tooltip = $('#ays_tooltip'), tooltipClass = "mouse"; if (tooltipClass == "mouse" || tooltipClass == "mouse_first_pos") { $(document).on('mousemove', function (e) { let cordinate_x = e.pageX; let cordinate_y = e.pageY; let windowWidth = $(window).width(); if (cordinate_y < tooltip.outerHeight()) { tooltip.css({'top': (cordinate_y + 10) + 'px'}); } else { tooltip.css({'top': (cordinate_y - tooltip.outerHeight()) + 'px'}); } if (cordinate_x > (windowWidth - tooltip.outerWidth())) { tooltip.css({'left': (cordinate_x - tooltip.outerWidth()) + 'px'}); } else { tooltip.css({'left': (cordinate_x + 5) + 'px'}); } }); } else { tooltip.addClass(tooltipClass); } $(document).on('contextmenu', function (e) { let target = $(event.target); let t = e || window.event; let n = t.target || t.srcElement; if (!target.is("") && (!target.is("1") && !target.is("img")) && (!target.is("") && !target.is("a") && n.parentElement.nodeName !== "A") ) { if (n.nodeName !== "A" ) { show_tooltip(1 ); audio_play(); } return false; } }); $(document).on('contextmenu', function (e) { let target = $(event.target); if (target.is("img") || target.is("div.ays_tooltip_class")) { let t = e || window.event; let n = t.target || t.srcElement; if (n.nodeName !== "A") { show_tooltip(1 ); audio_play(); } return false; } }); $(document).on('dragstart', function () { let target = $(event.target); if (!target.is("")) { show_tooltip(1 ); audio_play(); return false; } }); $(window).on('keydown', function (event) { var sccp_selObj = window.getSelection(); var check_selectors = true; if (!sccp_selObj.rangeCount < 1) { var sccp_selRange = sccp_selObj.getRangeAt(0); var sccp_selection_selector = sccp_selRange.startContainer.parentElement; check_selectors = !$(sccp_selection_selector).is(""); } if (check_selectors) { var isOpera = (BrowserDetect.browser === "Opera"); var isFirefox = (BrowserDetect.browser === 'Firefox'); var isSafari = (BrowserDetect.browser === 'Safari'); var isIE = (BrowserDetect.browser === 'Explorer'); var isChrome = (BrowserDetect.browser === 'Chrome'); var isMozilla = (BrowserDetect.browser === 'Mozilla'); if (BrowserDetect.OS === 'Windows') { if (isChrome) { if (((event.ctrlKey && event.shiftKey) && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 68 || event.keyCode === 67))) { show_tooltip(1); audio_play(); return false; } } if (isFirefox) { if (((event.ctrlKey && event.shiftKey) && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 75 || event.keyCode === 69)) || event.keyCode === 118 || (event.keyCode === 112 && event.shiftKey) || (event.keyCode === 115 && event.shiftKey) || (event.keyCode === 118 && event.shiftKey) || (event.keyCode === 120 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } if (isOpera) { if (((event.ctrlKey && event.shiftKey) && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 88 || event.keyCode === 69))) { show_tooltip(1); audio_play(); return false; } } if (isIE) { if ((event.keyCode === 123 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } if (isMozilla) { if ((event.ctrlKey && event.keyCode === 73) || (event.altKey && event.keyCode === 68)) { show_tooltip(1); audio_play(); return false; } } if ((event.keyCode === 83 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 65 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if (event.keyCode === 67 && event.ctrlKey && !event.shiftKey) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 86 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 88 && event.ctrlKey)) { show_tooltip(1 ); audio_play(); return false; } if ((event.keyCode === 85 && event.ctrlKey)) { show_tooltip(1 ); audio_play(); return false; } if (event.keyCode === 123 || (event.keyCode === 123 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } else if (BrowserDetect.OS === 'Linux') { if (isChrome) { if ( ( (event.ctrlKey && event.shiftKey) && (event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 ) ) || (event.ctrlKey && event.keyCode === 85) ) { show_tooltip(1); audio_play(); return false; } } if (isFirefox) { if (((event.ctrlKey && event.shiftKey) && (event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 75 || event.keyCode === 69)) || event.keyCode === 118 || event.keyCode === 116 || (event.keyCode === 112 && event.shiftKey) || (event.keyCode === 115 && event.shiftKey) || (event.keyCode === 118 && event.shiftKey) || (event.keyCode === 120 && event.shiftKey) || (event.keyCode === 85 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } } if (isOpera) { if (((event.ctrlKey && event.shiftKey) && (event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 67 || event.keyCode === 88 || event.keyCode === 69)) || (event.ctrlKey && event.keyCode === 85)) { show_tooltip(1); audio_play(); return false; } } if ((event.keyCode === 83 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if (event.keyCode === 65 && event.ctrlKey) { show_tooltip(1); audio_play(); return false; } if (event.keyCode === 67 && event.ctrlKey && !event.shiftKey) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 86 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 88 && event.ctrlKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 85 && event.ctrlKey)) { show_tooltip(1 ); audio_play(); return false; } if (event.keyCode === 123 || (event.keyCode === 123 && event.shiftKey)) { show_tooltip(1); audio_play(); return false; } } else if (BrowserDetect.OS === 'Mac') { if (isChrome || isSafari || isOpera || isFirefox) { if (event.metaKey && ( event.keyCode === 73 || event.keyCode === 74 || event.keyCode === 69 || event.keyCode === 75)) { show_tooltip(1); audio_play(); return false; } } if ((event.keyCode === 83 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 65 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 67 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 86 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 88 && event.metaKey)) { show_tooltip(1); audio_play(); return false; } if ((event.keyCode === 85 && event.metaKey)) { show_tooltip(1 ); audio_play(); return false; } if (event.keyCode === 123) { show_tooltip(1); audio_play(); return false; } } } }); function disableSelection(e) { if (typeof e.onselectstart !== "undefined") e.onselectstart = function () { show_tooltip( ); audio_play(); return false }; else if (typeof e.style.MozUserSelect !== "undefined") e.style.MozUserSelect = "none"; else e.onmousedown = function () { show_tooltip(); audio_play(); return false }; e.style.cursor = "default" } var msg_count = 1; function show_tooltip(mess) { if (mess && msg_count == 1) { if (tooltipClass == 'mouse_first_pos') { if ($('#ays_tooltip2').length > 0) { $('#ays_tooltip2').remove(); } var tooltip2 = tooltip.clone().prop('id','ays_tooltip2').insertBefore(tooltip); $('#ays_tooltip2').addClass('ays_tooltip_class'); tooltip2.css({'display': 'table'}); $('#ays_tooltip').fadeOut(); setTimeout(function () { tooltip2.remove(); }, 1000); }else{ tooltip.css({'display': 'table'}); setTimeout(function () { $('#ays_tooltip').fadeOut(500); }, 1000); } } } function audio_play(audio) { if (audio) { var audio = document.getElementById("sccp_public_audio"); if (audio) { audio.currentTime = 0; audio.play(); } } } }); })(jQuery); var copyrightText = ''; var copyrightIncludeUrl = ''; var copyrightWord = ''; function copyToClipboard(text) { var textarea = document.createElement("textarea"); textarea.textContent = text; textarea.style.position = "fixed"; document.body.appendChild(textarea); textarea.select(); try { return document.execCommand("cut"); } catch (ex) { console.warn("Copy to clipboard failed.", ex); return false; } finally { document.body.removeChild(textarea); } } function htmlDecode(input) { var doc = new DOMParser().parseFromString(input, "text/html"); return doc.documentElement.textContent; } var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i = 0; i < data.length; i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) !== -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index === -1) return; return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); }, dataBrowser: [{ string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera", versionSearch: "Version" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" }], dataOS: [{ string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" }] }; BrowserDetect.init(); // }, false); </script> <div id="autocomplete-suggestions" class="autocomplete-suggestions"></div><div id="is-scroller-outer"><div id="is-scroller"></div></div><div id="fb-root"></div> <div id="tie-popup-search-desktop" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Cerrar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Buscar"> <form method="get" class="tie-popup-search-form" action="https://revistacompleta.com/"> <input class="tie-popup-search-input " inputmode="search" type="text" name="s" title="Buscar por" autocomplete="off" placeholder="Teclea y pulsa Enter" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Buscar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <div id="tie-popup-search-mobile" class="tie-popup tie-popup-search-wrap" style="display: none;"> <a href="#" class="tie-btn-close remove big-btn light-btn"> <span class="screen-reader-text">Cerrar</span> </a> <div class="popup-search-wrap-inner"> <div class="live-search-parent pop-up-live-search" data-skin="live-search-popup" aria-label="Buscar"> <form method="get" class="tie-popup-search-form" action="https://revistacompleta.com/"> <input class="tie-popup-search-input is-ajax-search" inputmode="search" type="text" name="s" title="Buscar por" autocomplete="off" placeholder="Buscar por" /> <button class="tie-popup-search-submit" type="submit"> <span class="tie-icon-search tie-search-icon" aria-hidden="true"></span> <span class="screen-reader-text">Buscar por</span> </button> </form> </div><!-- .pop-up-live-search /--> </div><!-- .popup-search-wrap-inner /--> </div><!-- .tie-popup-search-wrap /--> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=5.9.6" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-extra"> /* <![CDATA[ */ var wpcf7 = {"api":{"root":"https:\/\/revistacompleta.com\/wp-json\/","namespace":"contact-form-7\/v1"},"cached":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.6" id="contact-form-7-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/plugins/katex/assets/katex-0.13.13/katex.min.js?ver=6.5.5" id="katex-js"></script> <script type="text/javascript" id="tie-scripts-js-extra"> /* <![CDATA[ */ var tie = {"is_rtl":"","ajaxurl":"https:\/\/revistacompleta.com\/wp-admin\/admin-ajax.php","is_side_aside_light":"","is_taqyeem_active":"","is_sticky_video":"","mobile_menu_top":"","mobile_menu_active":"area_1","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","autoload_posts":"","reading_indicator":"","lazyload":"","select_share":"true","select_share_twitter":"","select_share_facebook":"","select_share_linkedin":"","select_share_email":"","facebook_app_id":"5303202981","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","sticky_mobile_behavior":"default","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"1","lang_no_results":"Sin resultados","sticky_share_mobile":"true","sticky_share_post":"","sticky_share_post_menu":""}; /* ]]> */ </script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/scripts.min.js?ver=7.0.2" id="tie-scripts-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/ilightbox/lightbox.js?ver=7.0.2" id="tie-js-ilightbox-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/sliders.min.js?ver=7.0.2" id="tie-js-sliders-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/shortcodes.js?ver=7.0.2" id="tie-js-shortcodes-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/desktop.min.js?ver=7.0.2" id="tie-js-desktop-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/live-search.js?ver=7.0.2" id="tie-js-livesearch-js"></script> <script type="text/javascript" src="https://revistacompleta.com/wp-content/themes/jannah/assets/js/single.min.js?ver=7.0.2" id="tie-js-single-js"></script> <script> WebFontConfig ={ google:{ families: [ 'Poppins:600,regular:latin&display=swap' ] } }; (function(){ var wf = document.createElement('script'); wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.defer = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script><script type="text/javascript"> jQuery.ajax({ type : "GET", url : "https://revistacompleta.com/wp-admin/admin-ajax.php", data : "postviews_id=36774&action=tie_postviews", cache: !1, success: function( data ){ jQuery(".single-post-meta").find(".meta-views").html( data ); } }); </script> </body> </html>