+!Este `div` es primero!
¡Este `span` anidado es el primero!
- ¡Este `em` anidado es el primero, pero este `em` anidado es el último!
+
+ ¡Este `em` anidado es el primero, pero este
+ `em` anidado es el último!
+
¡Este `span` anidado tiene estilo!
¡Este `b` califica!
Este es el `div` final.
diff --git a/files/es/web/css/_colon_first/index.md b/files/es/web/css/_colon_first/index.md
index 9f589be97d73f5..3cfba7d0e89cf2 100644
--- a/files/es/web/css/_colon_first/index.md
+++ b/files/es/web/css/_colon_first/index.md
@@ -47,7 +47,7 @@ p {
```js
document.querySelector("button").onclick = function () {
window.print();
-}
+};
```
### Resultado
diff --git a/files/es/web/css/_colon_focus-visible/index.md b/files/es/web/css/_colon_focus-visible/index.md
index 052453550854d8..76539443fa2083 100644
--- a/files/es/web/css/_colon_focus-visible/index.md
+++ b/files/es/web/css/_colon_focus-visible/index.md
@@ -22,16 +22,17 @@ Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-cl
En este ejemplo, el selector `:focus-visible` usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo `:focus`.
```html
--
-
-
-
+
+
+
+
+
``` ```css -input, button { +input, +button { margin: 10px; } diff --git a/files/es/web/css/_colon_focus-within/index.md b/files/es/web/css/_colon_focus-within/index.md index f89896617c80dd..a6396d76809779 100644 --- a/files/es/web/css/_colon_focus-within/index.md +++ b/files/es/web/css/_colon_focus-within/index.md @@ -31,10 +31,10 @@ En este ejemplo, el formulario recibirá estilos de color especiales cuando cual ``` diff --git a/files/es/web/css/_colon_focus/index.md b/files/es/web/css/_colon_focus/index.md index 956ee32c18cc53..6a1a434088db7c 100644 --- a/files/es/web/css/_colon_focus/index.md +++ b/files/es/web/css/_colon_focus/index.md @@ -25,8 +25,10 @@ input:focus { ### HTML ```html -
- +
+ ``` ### CSS diff --git a/files/es/web/css/_colon_fullscreen/index.md b/files/es/web/css/_colon_fullscreen/index.md index 6a23cdb1a988b0..9f2d7c5fa4d6de 100644 --- a/files/es/web/css/_colon_fullscreen/index.md +++ b/files/es/web/css/_colon_fullscreen/index.md @@ -37,29 +37,34 @@ div:fullscreen { ```html
Demostración :fullscreen
-Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.
++ Este texto se pondrá grande y rojo cuando el navegador esté en modo de + pantalla completa. +
Host selectors example
+
+ Host selectors example
+
```
Dentro del constructor del elemento, creamos los elementos `style` y `span`, llenamos el `span` con el contenido del elemento personalizado y llenamos el elemento `style` con algunas reglas CSS:
```js
-let style = document.createElement('style');
- let span = document.createElement('span');
- span.textContent = this.textContent;
-
- const shadowRoot = this.attachShadow({mode: 'open'});
- shadowRoot.appendChild(style);
- shadowRoot.appendChild(span);
-
- style.textContent = 'span:hover { text-decoration: underline; }' +
- ':host-context(h1) { font-style: italic; }' +
- ':host-context(h1):after { content: " - no links in headers!" }' +
- ':host-context(article, aside) { color: gray; }' +
- ':host(.footer) { color : red; }' +
- ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+let style = document.createElement("style");
+let span = document.createElement("span");
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({ mode: "open" });
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent =
+ "span:hover { text-decoration: underline; }" +
+ ":host-context(h1) { font-style: italic; }" +
+ ':host-context(h1):after { content: " - no links in headers!" }' +
+ ":host-context(article, aside) { color: gray; }" +
+ ":host(.footer) { color : red; }" +
+ ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```
La regla `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` estiliza todas las instancias del elemento `en inglés (en) */ p:lang(en) { - quotes: '\201C' '\201D' '\2018' '\2019'; + quotes: "\201C" "\201D" "\2018" "\2019"; } ``` @@ -34,17 +34,29 @@ En este ejemplo, la pseudo-clase `:lang()` se usa para hacer coincidir los eleme ### HTML ```html -
Esta cita en inglés tiene una citaanidadaadentro.
Esta cita en francés tiene una citaanidadaadentro.
Esta cita en aleman tiene una citaanidadaadentro.
+
+Esta cita en inglés tiene una cita+anidadaadentro.
+
+Esta cita en francés tiene una cita+anidadaadentro.
+
```
### CSS
```css
-:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
-:lang(fr) > q { quotes: '« ' ' »'; }
-:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+:lang(en) > q {
+ quotes: "\201C" "\201D" "\2018" "\2019";
+}
+:lang(fr) > q {
+ quotes: "« " " »";
+}
+:lang(de) > q {
+ quotes: "»" "«" "\2039" "\203A";
+}
```
### Resultado
diff --git a/files/es/web/css/_colon_last-child/index.md b/files/es/web/css/_colon_last-child/index.md
index 8260cce1f4787d..7d8a6d4b60afaf 100644
--- a/files/es/web/css/_colon_last-child/index.md
+++ b/files/es/web/css/_colon_last-child/index.md
@@ -61,7 +61,8 @@ p:last-child {
Esta cita en aleman tiene una cita+anidadaadentro.
- Artículo 1
- Artículo 2 -
- Artículo 3 +
-
+ Artículo 3
- Artículo 3.1
- Artículo 3.2 diff --git a/files/es/web/css/_colon_last-of-type/index.md b/files/es/web/css/_colon_last-of-type/index.md index 56f0ebf686ace5..a80b663a71f1d4 100644 --- a/files/es/web/css/_colon_last-of-type/index.md +++ b/files/es/web/css/_colon_last-of-type/index.md @@ -56,7 +56,10 @@ Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Te
- Primero +
-
+ Primero
-
-
- Esta lista tiene solo un elemento. +
- Esta lista tiene solo un elemento.
- - Segundo +
-
+ Segundo
-
-
- Esta lista tiene tres elementos. -
- Esta lista tiene tres elementos. -
- Esta lista tiene tres elementos. +
- Esta lista tiene tres elementos. +
- Esta lista tiene tres elementos. +
- Esta lista tiene tres elementos.
- - no-repeat +
- + no-repeat -
- repeat +
- + repeat -
- repeat-x +
- + repeat-x -
- repeat-y +
- + repeat-y -
- space +
- + space -
- round +
- + round -
- repeat-x, repeat-y (multiple images) +
- + repeat-x, repeat-y (multiple images)
-Ya has visitado este enlace.
+Este es un enlace ordinario.
+Ya has visitado este enlace.
Enlace de marcador de posición (no se personalizará) ``` diff --git a/files/es/web/css/_colon_nth-child/index.md b/files/es/web/css/_colon_nth-child/index.md index 0a44498c10b40c..727bb2a78d7ef8 100644 --- a/files/es/web/css/_colon_nth-child/index.md +++ b/files/es/web/css/_colon_nth-child/index.md @@ -61,8 +61,10 @@ La pseudo-clase `nth-child` se especifica con un único argumento, que represent #### HTML ```html -
+span:nth-child(2n+1), SIN un -<em>entre los hijos.+
span:nth-child(2n+1), SIN un<em>entre los + hijos. +Los hijos 1, 3, 5 y 7 son seleccionados.
Span 1! @@ -74,13 +76,17 @@ La pseudo-clase `nth-child` se especifica con un único argumento, que represent Span 7!-
- -
-span:nth-child(2n+1), CON un -<em>entre los hijos.Los hijos 1, 5 y 7 son seleccionados.
+
- 3 se usa en el conteo porque es un hijo, pero - no se selecciona porque no es un<span>.
+ ++
+span:nth-child(2n+1), CON un<em>entre los + hijos. ++ Los hijos 1, 5 y 7 son seleccionados.
+ 3 se usa en el conteo porque es un hijo, pero no se selecciona porque no es un +<span>. +Span! Span @@ -92,14 +98,19 @@ La pseudo-clase `nth-child` se especifica con un único argumento, que represent Span-
- -
-span:nth-of-type(2n+1), CON un -<em>entre los hijos.Los hijos 1, 4, 6 y 8 son seleccionados.
+
- 3 no se usa en el conteo ni se selecciona porque es un<em>, - no un<span>, ynth-of-typesolo selecciona - hijos de ese tipo. El<em>se omite por completo y se ignora.
+ ++
+span:nth-of-type(2n+1), CON un<em>entre los + hijos. ++ Los hijos 1, 4, 6 y 8 son seleccionados.
+ 3 no se usa en el conteo ni se selecciona porque es un +<em>, no un<span>, y +nth-of-typesolo selecciona hijos de ese tipo. El +<em>se omite por completo y se ignora. +Span! Span @@ -127,9 +138,9 @@ div em { margin-bottom: 3px; } -.first span:nth-child(2n+1), -.second span:nth-child(2n+1), -.third span:nth-of-type(2n+1) { +.first span:nth-child(2n + 1), +.second span:nth-child(2n + 1), +.third span:nth-of-type(2n + 1) { background-color: lime; } ``` diff --git a/files/es/web/css/_colon_nth-last-child/index.md b/files/es/web/css/_colon_nth-last-child/index.md index 9fb1a4df91caa6..4ad599851c0ee6 100644 --- a/files/es/web/css/_colon_nth-last-child/index.md +++ b/files/es/web/css/_colon_nth-last-child/index.md @@ -93,12 +93,12 @@ table { } /* Selecciona los últimos tres elementos */ -tr:nth-last-child(-n+3) { +tr:nth-last-child(-n + 3) { background-color: pink; } /* Toma todos los elementos a partir del penúltimo elemento */ -tr:nth-last-child(n+2) { +tr:nth-last-child(n + 2) { color: blue; } @@ -141,7 +141,7 @@ tr:nth-last-child(n) { background-color: lightgray; } -tr:nth-last-child(n+1){ +tr:nth-last-child(n + 1) { font-weight: 600; } ``` diff --git a/files/es/web/css/_colon_nth-of-type/index.md b/files/es/web/css/_colon_nth-of-type/index.md index 2ababd81e7a49a..74fb89a8bbe9cc 100644 --- a/files/es/web/css/_colon_nth-of-type/index.md +++ b/files/es/web/css/_colon_nth-of-type/index.md @@ -46,7 +46,7 @@ Ver {{Cssxref(":nth-child")}} para una explicación más detallada de su sintaxi ```css /* Párrafos impares */ -p:nth-of-type(2n+1) { +p:nth-of-type(2n + 1) { color: red; } diff --git a/files/es/web/css/_colon_only-child/index.md b/files/es/web/css/_colon_only-child/index.md index e7a7b6989031eb..c325981a475b81 100644 --- a/files/es/web/css/_colon_only-child/index.md +++ b/files/es/web/css/_colon_only-child/index.md @@ -34,9 +34,11 @@ p:only-child {- Yo tengo hermanos.``` @@ -59,19 +61,22 @@ main :only-child { ```html
- ¡Yo también!
- Yo también tengo hermanos, pero este es un hijo único. + Yo tengo hermanos.
+ ¡Yo también!
+ Yo también tengo hermanos, pero este es un hijo único.-
-
-
+
Soy un `div` #1.Yo soy el único `p` entre mis hermanos.
Soy un `div` #2.-Soy un `div` #3. +-+ Soy un `div` #3. Yo soy el único hijo `i`. Soy un `em` #1. Soy un `em` #2. diff --git a/files/es/web/css/_colon_out-of-range/index.md b/files/es/web/css/_colon_out-of-range/index.md index da1e5374f85634..0ae5ca52345866 100644 --- a/files/es/web/css/_colon_out-of-range/index.md +++ b/files/es/web/css/_colon_out-of-range/index.md @@ -29,9 +29,17 @@ Esta pseudo-clase es útil para dar al usuario una indicación visual de que el ```htmlAll the faces are transparent and the three back faces are visible through the front ones.
++ All the faces are transparent and the three back faces are visible + through the front ones. +
No face is opaque, but the three back faces are always hidden now.
++ No face is opaque, but the three back faces are always hidden now. +
- There were doors all round the hall, but they were all locked; and when - Alice had been all the way down one side and up the other, trying every - door, she walked sadly down the middle, wondering how she was ever to - get out again. + There were doors all round the hall, but they were all locked; and when Alice + had been all the way down one side and up the other, trying every door, she + walked sadly down the middle, wondering how she was ever to get out again.
``` @@ -75,19 +74,17 @@ p { ```html- There were doors all round the hall, but they were all locked; and when - Alice had been all the way down one side and up the other, trying every - door, she walked sadly down the middle, wondering how she was ever to - get out again. - - Suddenly she came upon a little three-legged table, all made of solid - glass; there was nothing on it except a tiny golden key, and Alice's - first thought was that it might belong to one of the doors of the hall; - but, alas! either the locks were too large, or the key was too small, - but at any rate it would not open any of them. However, on the second - time round, she came upon a low curtain she had not noticed before, and - behind it was a little door about fifteen inches high: she tried the - little golden key in the lock, and to her great delight it fitted! + There were doors all round the hall, but they were all locked; and when Alice + had been all the way down one side and up the other, trying every door, she + walked sadly down the middle, wondering how she was ever to get out again. + Suddenly she came upon a little three-legged table, all made of solid glass; + there was nothing on it except a tiny golden key, and Alice's first thought + was that it might belong to one of the doors of the hall; but, alas! either + the locks were too large, or the key was too small, but at any rate it would + not open any of them. However, on the second time round, she came upon a low + curtain she had not noticed before, and behind it was a little door about + fifteen inches high: she tried the little golden key in the lock, and to her + great delight it fitted!
``` diff --git a/files/es/web/css/background-blend-mode/index.md b/files/es/web/css/background-blend-mode/index.md index 757de27813809d..dfca613fa32e28 100644 --- a/files/es/web/css/background-blend-mode/index.md +++ b/files/es/web/css/background-blend-mode/index.md @@ -59,18 +59,19 @@ background-blend-mode: unset; ```css #div { - width: 300px; - height: 300px; - background: url('br.png'),url('tr.png'); - background-blend-mode: screen; + width: 300px; + height: 300px; + background: url("br.png"), url("tr.png"); + background-blend-mode: screen; } ``` ```js -document.getElementById("select").onchange = function(event) { - document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; -} -console.log(document.getElementById('div')); +document.getElementById("select").onchange = function (event) { + document.getElementById("div").style.backgroundBlendMode = + document.getElementById("select").selectedOptions[0].innerHTML; +}; +console.log(document.getElementById("div")); ``` {{ EmbedLiveSample('Examples', "330", "330") }} diff --git a/files/es/web/css/background-clip/index.md b/files/es/web/css/background-clip/index.md index 496872fafe96b9..03bb0e90c66ec7 100644 --- a/files/es/web/css/background-clip/index.md +++ b/files/es/web/css/background-clip/index.md @@ -42,23 +42,33 @@ background-clip: inherit ```htmlThe yellow background extends behind the border.
-The yellow background extends to the inside edge of the border.
-The yellow background extends only to the edge of the content box.
++ The yellow background extends to the inside edge of the border. +
++ The yellow background extends only to the edge of the content box. +
``` ### Contenido CSS ```css p { - border: 5px navy; - border-style: dotted double; - margin: 2em; - padding: 2em; - background: #F8D575; + border: 5px navy; + border-style: dotted double; + margin: 2em; + padding: 2em; + background: #f8d575; +} +.border-box { + background-clip: border-box; +} +.padding-box { + background-clip: padding-box; +} +.content-box { + background-clip: content-box; } -.border-box { background-clip: border-box; } -.padding-box { background-clip: padding-box; } -.content-box { background-clip: content-box; } ``` #### Salida diff --git a/files/es/web/css/background-color/index.md b/files/es/web/css/background-color/index.md index b69e225fe06031..2cb88701c1f546 100644 --- a/files/es/web/css/background-color/index.md +++ b/files/es/web/css/background-color/index.md @@ -35,17 +35,11 @@ background-color: color | transparent | inherit ### HTML ```html -- Lorem ipsum dolor sit amet, consectetuer -+Lorem ipsum dolor sit amet, consectetuer-- Lorem ipsum dolor sit amet, consectetuer -+Lorem ipsum dolor sit amet, consectetuer-- Lorem ipsum dolor sit amet, consectetuer -+Lorem ipsum dolor sit amet, consectetuer``` ### CSS @@ -57,13 +51,13 @@ background-color: color | transparent | inherit } .exampletwo { - background-color: rgb(153,102,153); - color: rgb(255,255,204); + background-color: rgb(153, 102, 153); + color: rgb(255, 255, 204); } .examplethree { background-color: #777799; - color: #FFFFFF; + color: #ffffff; } ``` diff --git a/files/es/web/css/background-repeat/index.md b/files/es/web/css/background-repeat/index.md index a16bd97dc6fd85..42d5ce4fd1d961 100644 --- a/files/es/web/css/background-repeat/index.md +++ b/files/es/web/css/background-repeat/index.md @@ -57,9 +57,9 @@ Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero | `repeat` | La imagen se repite hasta cubrir todo el fondo existente. La última imagen debe ser recortada si no encaja. | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - | `space` | La imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando `space` es cuando no hay suficiente sitio para desplegar una imagen. | + | `space` | La imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando `space` es cuando no hay suficiente sitio para desplegar una imagen. | | `round` | Como el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px. | - | `no-repeat` | La imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido es definida por la propiedad de CSS {{cssxref("background-position")}}. | + | `no-repeat` | La imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido es definida por la propiedad de CSS {{cssxref("background-position")}}. | ### Sintaxis formal @@ -71,25 +71,32 @@ Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero ```html-
-