{"id":1451,"date":"2024-05-22T18:12:09","date_gmt":"2024-05-22T18:12:09","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1451"},"modified":"2024-05-22T22:28:09","modified_gmt":"2024-05-22T22:28:09","slug":"css-hojas-de-estilo-de-cascada","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/css-hojas-de-estilo-de-cascada\/","title":{"rendered":"CSS : Hojas de Estilo de Cascada"},"content":{"rendered":"<header class=\"article-header\">\n<p class=\"title\"><span style=\"font-size: 16px;\">El colorear cosas es divertido y todo, pero es hora de ser un poco m\u00e1s serios acerca de CSS.<\/span><\/p>\n<\/header>\n<article class=\"article-content\">Tenemos algunos temas fundamentales y esenciales que aprender aqu\u00ed.Si comprendes bien esos temas, CSS ser\u00e1 pan comido para ti. Si no, podr\u00edas frustrarte muy r\u00e1pidamente, ya que CSS no har\u00e1 lo que deseas.<\/p>\n<p>CSS significa Hojas de Estilo en Cascada.<\/p>\n<p>La parte \u00abHojas de Estilo\u00bb es f\u00e1cil de entender. Es algo que usamos para dar estilo a nuestro HTML.<\/p>\n<p>Pero&#8230; \u00bfcascada?<\/p>\n<h3>\u00bfQu\u00e9 significa?<\/h3>\n<p>La cascada es un concepto fundamental de CSS. Despu\u00e9s de todo, est\u00e1 en el nombre mismo, la primera C de CSS &#8211; Hojas de Estilo en Cascada &#8211; debe ser algo importante.<\/p>\n<h3>\u00bfQu\u00e9 significa?<\/h3>\n<p>La cascada es el proceso o algoritmo que determina las propiedades aplicadas a cada elemento en la p\u00e1gina. Intenta converger a partir de una lista de reglas CSS que est\u00e1n definidas en varios lugares.<\/p>\n<p>Lo hace teniendo en cuenta:<\/p>\n<ul>\n<li>Especificidad<\/li>\n<li>Importancia<\/li>\n<li>Herencia<\/li>\n<li>Orden de la regla CSS en el archivo<\/li>\n<\/ul>\n<p>Tambi\u00e9n se encarga de resolver conflictos.<\/p>\n<p>Dos o m\u00e1s reglas CSS en competencia para la misma propiedad aplicadas al mismo elemento deben ser elaboradas seg\u00fan la especificaci\u00f3n CSS, para determinar cu\u00e1l debe aplicarse.<\/p>\n<p>Incluso si solo tienes un archivo CSS cargado por tu p\u00e1gina, hay otro CSS que va a ser parte del proceso. Tenemos el CSS del navegador (agente de usuario). Los navegadores vienen con un conjunto predeterminado de reglas.<\/p>\n<p>Luego entra en juego tu CSS.<\/p>\n<p>Luego, el navegador aplica cualquier hoja de estilo de usuario, que tambi\u00e9n podr\u00eda ser aplicada por extensiones del navegador.<\/p>\n<p>Todas esas reglas entran en juego al renderizar la p\u00e1gina.<\/p>\n<p>Ahora veremos los conceptos de especificidad y herencia.<\/p>\n<p>\u00bfQu\u00e9 sucede cuando un elemento es afectado por m\u00faltiples reglas, con diferentes selectores, que afectan la misma propiedad?<\/p>\n<p>Por ejemplo, hablemos de este elemento:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p class=\"nombre-perro\"&gt;Roger&lt;\/p&gt;<\/pre>\n<p>Podr\u00edamos tener:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.nombre-perro {\r\n\u00a0 color: yellow;\r\n}<\/pre>\n<p>y otra regla que apunta a p, que establece el color en otro valor:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p {\r\n\u00a0 color: red;\r\n}<\/pre>\n<p>Y otra regla que apunta a p.nombre-perro:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p.nombre-perro {\r\n\u00a0 color: red;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p>\u00bfQu\u00e9 regla tomar\u00e1 precedencia sobre las dem\u00e1s, y por qu\u00e9?<\/p>\n<p>Ingresa la especificidad.<\/p>\n<p>La regla m\u00e1s espec\u00edfica ser\u00e1 la ganadora.<\/p>\n<p>Si dos o m\u00e1s reglas tienen la misma especificidad, la que aparece al final es la que gana.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>El colorear cosas es divertido y todo, pero es hora de ser un poco m\u00e1s&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1466,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181,178],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1451"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1451"}],"version-history":[{"count":2,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1451\/revisions"}],"predecessor-version":[{"id":1467,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1451\/revisions\/1467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1466"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}