aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/cascade
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-15 13:42:10 -0400
committerGitHub <noreply@github.com>2021-07-15 13:42:10 -0400
commit4f0e1ec1c2772904c033f747dc38a08223e8d661 (patch)
tree6212d976fd9f708d4f13e7d472bd765341661c1b /files/es/web/css/cascade
parentd79f316e1c617b165487da0198765d992cce2fff (diff)
downloadtranslated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.tar.gz
translated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.tar.bz2
translated-content-4f0e1ec1c2772904c033f747dc38a08223e8d661.zip
delete pages that were never translated from en-US (es, part 2) (#1550)
Diffstat (limited to 'files/es/web/css/cascade')
-rw-r--r--files/es/web/css/cascade/index.html202
1 files changed, 0 insertions, 202 deletions
diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html
deleted file mode 100644
index 87b99bd61c..0000000000
--- a/files/es/web/css/cascade/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: Introducción a CSS en cascada
-slug: Web/CSS/Cascade
-translation_of: Web/CSS/Cascade
----
-<div>{{CSSRef}}</div>
-
-<div>La <strong>cascada</strong> es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: <em>Hojas de Estilo en Cascada</em>. Este articulo explica que es cascada, el orden de las <span class="seoSummary">{{Glossary("CSS")}} </span><a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones</a> en cascada, y como esto te afecta, el desarrollador web.</div>
-
-<h2 id="¿Cuáles_entidades_CSS_participan_en_la_cascada">¿Cuáles entidades CSS participan en la cascada?</h2>
-
-<p>Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las <a href="/es/docs/Web/CSS/At-rule">at-rules</a> que contienen entidades distintas de las declaraciones, como una regla <code>@font-face</code> que contiene <em>descriptores</em>, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la <code>@font-face</code> identificada por su descriptor de familia de tipografías. Si se definen varias reglas <code>@font-face</code> con el mismo descriptor, solo se considera la <code>@font-face</code>, como conjunto, más adecuada. </p>
-
-<p>Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en <code>@media</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@document</span></font> o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@support</span></font> - participan en la cascada, las declaraciones contenidas en <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@keyframes</span></font> no. Como con <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font>, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.</p>
-
-<p>Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.</p>
-
-<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2>
-
-<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p>
-
-<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p>
-
-<h3 id="User-agent_stylesheets">User-agent stylesheets</h3>
-
-<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p>
-
-<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p>
-
-<h3 id="Author_stylesheets">Author stylesheets</h3>
-
-<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p>
-
-<h3 id="User_stylesheets">User stylesheets</h3>
-
-<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p>
-
-<h2 id="Cascading_order">Cascading order</h2>
-
-<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p>
-
-<ol>
- <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li>
- <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
- <table class="standard-table">
- <thead>
- <tr>
- <th scope="col"></th>
- <th scope="col">Origin</th>
- <th scope="col">Importance</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>user agent</td>
- <td>normal</td>
- </tr>
- <tr>
- <td>2</td>
- <td>user</td>
- <td>normal</td>
- </tr>
- <tr>
- <td>3</td>
- <td>author</td>
- <td>normal</td>
- </tr>
- <tr>
- <td>4</td>
- <td>animations</td>
- <td></td>
- </tr>
- <tr>
- <td>5</td>
- <td>author</td>
- <td><code>!important</code></td>
- </tr>
- <tr>
- <td>6</td>
- <td>user</td>
- <td><code>!important</code></td>
- </tr>
- <tr>
- <td>7</td>
- <td>user agent</td>
- <td><code>!important</code></td>
- </tr>
- <tr>
- <td>8</td>
- <td>transitions</td>
- <td></td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>In case of equality, the <a href="/en-US/docs/Web/CSS/Specificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li>
-</ol>
-
-<h2 id="Resetting_styles">Resetting styles</h2>
-
-<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p>
-
-<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p>
-
-<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2>
-
-<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p>
-
-<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p>
-
-<h2 id="Example">Example</h2>
-
-<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p>
-
-<p><strong>User-agent CSS:</strong></p>
-
-<pre class="brush:css;">li { margin-left: 10px }</pre>
-
-<p><strong class="brush:css;">Author CSS 1:</strong></p>
-
-<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre>
-
-<p><strong class="brush:css;">Author CSS 2:</strong></p>
-
-<pre class="brush:css;">@media screen {
- li { margin-left: 3px }
-}
-
-@media print {
- li { margin-left: 1px }
-}
-</pre>
-
-<p><strong class="brush:css;">User CSS:</strong></p>
-
-<pre class="brush:css;">.specific { margin-left: 1em }</pre>
-
-<p><strong>HTML:</strong></p>
-
-<pre class="brush:html;">&lt;ul&gt;
- &lt;li class="specific"&gt;1&lt;sup&gt;st&lt;/sup&gt;&lt;/li&gt;
- &lt;li&gt;2&lt;sup&gt;nd&lt;/sup&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p>
-
-<p>So three declarations are in competition:</p>
-
-<pre class="brush:css;">margin-left: 0</pre>
-
-<pre class="brush:css;">margin-left: 3px</pre>
-
-<pre class="brush:css;">margin-left: 1px</pre>
-
-<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p>
-
-<pre class="brush:css;">margin-left: 3px</pre>
-
-<p>Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Specification</th>
- <th scope="col">Status</th>
- <th scope="col">Comment</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS4 Cascade")}}</td>
- <td>{{Spec2("CSS4 Cascade")}}</td>
- <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td>
- </tr>
- <tr>
- <td>{{SpecName("CSS3 Cascade")}}</td>
- <td>{{Spec2("CSS3 Cascade")}}</td>
- <td>Removed the override cascade origin, as it was never used in a W3C standard.</td>
- </tr>
- <tr>
- <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td>
- <td>{{Spec2("CSS2.1")}}</td>
- <td></td>
- </tr>
- <tr>
- <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</td>
- <td>{{Spec2("CSS1")}}</td>
- <td>Initial definition.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li>
- <li>{{CSS_Key_Concepts}}</li>
-</ul>