{"id":1195,"date":"2024-07-31T12:00:54","date_gmt":"2024-07-31T10:00:54","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1195"},"modified":"2024-07-31T12:00:54","modified_gmt":"2024-07-31T10:00:54","slug":"04-anadir-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/04-anadir-css\/","title":{"rendered":"04. A\u00f1adir CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Cuando un navegador lee una hoja de estilo, formatear\u00e1 el documento HTML de acuerdo con la informaci\u00f3n de la hoja de estilo.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">3 maneras de insertar CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Las maneras que existen de insertar CSS son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Archivo CSS externo<\/li>\n\n\n\n<li>CSS interno<\/li>\n\n\n\n<li>CSS en l\u00ednea (inline)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Archivos CSS externos<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Con una <strong>hoja de estilo externa<\/strong>, puedes cambiar la apariencia de un sitio web completo cambiando solo un archivo. Cada p\u00e1gina HTML debe incluir una referencia al <strong>archivo de hoja de estilo externo<\/strong>&nbsp;dentro del elemento <strong><em>&lt;link&gt;<\/em><\/strong>, dentro de la secci\u00f3n de encabezado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n<strong>&lt;link rel=\"stylesheet\" href=\"mystyle.css\"&gt;<\/strong>\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;This is a heading&lt;\/h1&gt;\n&lt;p&gt;This is a paragraph.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Una <strong>hoja de estilo externa<\/strong> se puede escribir en cualquier editor de texto y debe guardarse con una extensi\u00f3n .<strong><em>css<\/em><\/strong>. El archivo .<strong><em>css<\/em> <\/strong>externo no debe contener ninguna etiqueta HTML. As\u00ed es como se ve el archivo \u00ab<em>mystyle.css<\/em>\u00ab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">body&nbsp;{\n&nbsp;&nbsp;background-color:&nbsp;lightblue;\n}\n\nh1&nbsp;{\n&nbsp;&nbsp;color:&nbsp;navy;\n&nbsp;&nbsp;margin-left:&nbsp;20px;\n}<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Nota: No agregue un espacio entre el valor de la propiedad y la unidad:<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Correcto: margin-left: 20px;<\/li>\n\n\n\n<li>Incorrecto: margin-left: 20 px;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">CSS interno<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se puede usar una <strong>hoja de estilo interna<\/strong> si una sola p\u00e1gina HTML tiene un estilo \u00fanico. El estilo interno se define dentro del elemento <strong><em>&lt;style&gt;<\/em><\/strong>, dentro de la secci\u00f3n de cabecera.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE&nbsp;html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody&nbsp;{\n&nbsp; background-color:&nbsp;linen;\n}\n\nh1&nbsp;{\n&nbsp; color:&nbsp;maroon;\n&nbsp; margin-left:&nbsp;40px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h1&gt;This is a heading&lt;\/h1&gt;\n&lt;p&gt;This is a paragraph.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS en l\u00ednea (inline)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se puede usar un <strong>estilo en l\u00ednea<\/strong> para aplicar un estilo \u00fanico a un solo elemento. Para usar <strong>estilos en l\u00ednea<\/strong>, agrega el atributo <strong><em>style<\/em><\/strong> al elemento relevante. El atributo <strong><em>style<\/em><\/strong> puede contener cualquier <strong>propiedad CSS<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h1 style=\"color:blue;text-align:center;\"&gt;This is a heading&lt;\/h1&gt;\n&lt;p style=\"color:red;\"&gt;This is a paragraph.&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Sugerencia<\/strong>: un <strong>estilo en l\u00ednea<\/strong> pierde muchas de las ventajas de una hoja de estilo (al mezclar contenido con presentaci\u00f3n). Utiliza este m\u00e9todo con moderaci\u00f3n.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00faltiples hojas de estilo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si se han definido algunas propiedades para el mismo selector (elemento) en diferentes hojas de estilo, se utilizar\u00e1 el valor de la \u00faltima hoja de estilo le\u00edda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Orden en cascada<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfQu\u00e9 estilo se utilizar\u00e1 cuando haya m\u00e1s de un estilo especificado para un elemento HTML?. Todos los estilos en una p\u00e1gina \u00abcaer\u00e1n en cascada\u00bb en una nueva hoja de estilo \u00abvirtual\u00bb seg\u00fan las siguientes reglas, donde el n\u00famero uno tiene la prioridad m\u00e1s alta:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Estilo en l\u00ednea (dentro de un elemento HTML)<\/li>\n\n\n\n<li>Hojas de estilo externas e internas (en la secci\u00f3n de cabecera)<\/li>\n\n\n\n<li>predeterminado del navegador<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Por lo tanto, un <strong>estilo en l\u00ednea<\/strong> tiene la prioridad m\u00e1s alta y anular\u00e1 los estilos externos e internos y los valores predeterminados del navegador.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando un navegador lee una hoja de estilo, formatear\u00e1 el documento HTML de acuerdo con la informaci\u00f3n de la hoja [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","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":"default","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":""},"class_list":["post-1195","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Cuando un navegador lee una hoja de estilo, formatear\u00e1 el documento HTML de acuerdo con la informaci\u00f3n de la hoja [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1195"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1195\/revisions"}],"predecessor-version":[{"id":1196,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1195\/revisions\/1196"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}