recursal/MDN huggingface dataset:
@charset
========

Resumen
-------

La regla-at **`@charset`** de CSS especifica la codificación de caracteres usada en la hoja de estilos. Éste debe ser el primer elemento en la hoja de estilos, y no debe ser precedidad por ningun otro caracter; al no ser una declaración anidada, no puede ser usada dentro de grupos de reglas-at condicionales. Si se definen varias reglas-at `@charset`, solamente se usará la primera. La regla-at `@charset` no puede ser usada dentro de un atributo `style` style en un elemento HTML o dentro del elemento `<style>` , ya que en estos casos se tomará en cuenta la codificación de la página HTML contenedora.

Esta regla-at es útil cuando se usan caracteres fuera de la codificación ASCII en alguna propiedad CSS, como `content`.

Habiendo diferentes maneras de definir la codificación de caracteres en una hoja de estilos, el navegador intentará seguir este orden para identificarlo (deteniéndose en el primer paso que dé resultado):

1. El valor de la Marca de orden de bytes al principio del archivo.
2. El valor dado por el atributo charset del encabezado HTTP `Content-Type:` o su equivalente en el protocolo usado para descargar la hoja de estilos.
3. La regla-at `@charset` de CSS.
4. Usar la codificación de caracteres definida en el documento de referencia: el atributo `charset` attribute del elemento `<link>`. Este método es obsoleto para HTML5 y no debe ser usado.
5. Asumir que el documento es UTF-8.
Sintaxis
--------


```css
@charset "UTF-8";
@charset 'iso-8859-15';
```


donde:

*charset*

Es un valor `<string>` (en-US) que denota la codificación de caracteres que será usada. Debe ser el nombre de una codificación de caracteres compatible con Web, definida en el registro IANA. Si varios nombres están asociados a una codificación, solamente se usará el que está marcado como *principal*.

### Sintaxis formal

Error: could not find syntax for this itemEjemplos
--------


```css
@charset "UTF-8"; /\* Establece la codificación de la hoja de estilos a Unicode UTF-8 \*/
@charset 'iso-8859-15'; /\* Establece la codificación de la hoja de estilos a Latin-9 (idiomas de Europa Occidental, con símbolo de euro) \*/
@charset "UTF-8"; /\* Inválido, hay un caracter (espacio) antes de la regla-at \*/
@charset UTF-8; /\* Inválido, sin comillas simples o dobles, el valor no es una cadena <string> (en-US) de CSS \*/
```

Especificaciones
----------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<integer>
=========

Sumario
-------

Un valor entero usado para algunas propiedades CSS que no tiene unidades.

### Usado en

* `-moz-column-count` (en-US)
text-decoration-style
=====================

Resumen
-------

La propiedad CSS **`text-decoration-style`** define el estilo de las líneas especificadas por `text-decoration-line`. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por `text-decoration-line`.

Si la decoración especificada tiene un significado semántico propio, como *line-through*, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como `<del>` o `
`. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.

|  |  |
| --- | --- |
| Valor inicial | `solid` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis
--------


```css
/\* Valores clave \*/
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/\* Valores globales \*/
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;
```

### Valores

`solid double dotted dashed wavy`

Es una de las siguientes palabras clave:

| Palabra clave | Descripción | Comentario |
| --- | --- | --- |
| `solid` | Dibuja una línea simple |  |
| `double` | Dibuja una línea doble |  |
| `dotted` | Dibuja una línea punteada |  |
| `dashed` | Dibuja una línea discontinua |  |
| `wavy` | Dibuja una línea ondulada |  |
| `-moz-none`
Non-standard
 | No dibuja una línea | **No usarse:** usar `text-decoration-line``: none` en su lugar |

`inherit`

Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.

### Sintaxis formal
```

text-decoration-style =   
  solid   |  
  double  |  
  dotted  |  
  dashed  |  
  wavy      
  
```

Ejemplos
--------


```css
.example {
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: wavy;
  -moz-text-decoration-color: red;
  -webkit-text-decoration-line: underline;
  -webkit-text-decoration-style: wavy;
  -webkit-text-decoration-color: red;
}
```



```css
.example {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```



```html
<p class="example">Así se ve el resultado.</p>
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-style-property |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-webkit-progress-inner-element
================================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El pseudo-elemento CSS **`::-webkit-progress-inner-element`** representa la parte más exterior de un elemento `<progress>`. Es el padre del pseudo-elemento `::-webkit-progress-bar`.

**Nota:** para que `::-webkit-progress-inner-element` tenga efecto , hay que darle valor none a `-webkit-appearance` (en-US) en el elemento `<progress>`.

Ejemplo
-------

### Contenido CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}
```

### Contenido HTML


```html
<progress value="10" max="50"></progress>
```

### Salida

Una barra de progreso que use el estilo especificado anteriormente tendrá una apariencia similar a la siguiente::

![](/es/docs/Web/CSS/::-webkit-progress-inner-element/-webkit-progress-inner-element_example.png)

Especificaciones
----------------

No es parte de ninguna especificación. Es un pseudo-elemento propitario y específico de WebKit/Blink.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver además
----------

* Los pseudo-elementos usados por WebKit/Blink para dar estilos a otras partes de un elemento `<progress>` :
    + `::-webkit-progress-bar`
    + `::-webkit-progress-value`
* `::-moz-progress-bar`
* `::-ms-fill`
Pseudoelementos
===============

Resumen
-------

Al igual que las `Pseudo-classes`, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento `::first-line` selecciona solo la primera línea del elemento especificado por el selector.

Sintaxis
--------
```

selector::pseudo-elemento { propiedad: valor; }
```

Lista de pseudoelementos
------------------------

* `::after`
* `::before`
* `::first-letter`
* `::first-line`
* `::selection`
* `::backdrop`
* `::placeholder` 
Experimental
* `::marker` 
Experimental
* `::spelling-error` 
Experimental
* `::grammar-error` (en-US) 
Experimental
Notas
-----

De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.

**Nota:** `::selection` siempre se escribe con dos puntos dobles (::).

**Nota:** Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.


| Navegador | Versión inferior | Soporta |
| --- | --- | --- |
| Internet Explorer | 8.0 | `:pseudoelemento` |
| 9.0 | `:pseudoelemento` y `::pseudoelemento` |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudoelemento` |
| 1.0 (1.5) | `:pseudoelemento` y `::pseudoelemento` |
| Opera | 4.0 | `:pseudoelemento` |
| 7.0 | `:pseudoelemento` y `::pseudoelemento` |
| Safari (WebKit) | 1.0 (85) | `:pseudoelemento` y `::pseudoelemento` |
margin-inline-end
=================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`margin-inline-end`** define el margen final lógico en línea de un elemento, que se asigna a un margen físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. En otras palabras, corresponde a las propiedades `margin-top` (en-US), `margin-right`, `margin-bottom` o `margin-left` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <length> values \*/
margin-inline-end: 10px; /\* An absolute length \*/
margin-inline-end: 1em; /\* relative to the text size \*/
margin-inline-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-inline-end: auto;

/\* Global values \*/
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: unset;
```


Se relaciona con `margin-block-start`, `margin-block-end` (en-US), and `margin-inline-start`, que define las otras márgenes del elemento.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | same as `margin` |
| Heredable | no |
| Percentages | depends on layout model |
| Valor calculado | if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto` |
| Animation type | a length |

### Valores

La propiedad `margin-inline-end` toma los mismos valores de la propiedad `margin-left` (en-US).

### Sintaxis formal
```

margin-inline-end =   
  <'margin-top'>    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* `margin-inline-start`
* Las propiedades físicas mapeadas: `margin-top` (en-US), `margin-right`, `margin-bottom`, y `margin-left` (en-US)
* `writing-mode`, `direction`, `text-orientation`
border-block-color
==================

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad de CSS **`border-block-color`** define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades `border-top-color` y `border-bottom-color`, o `border-right-color` (en-US) y `border-left-color` dependiendo de los valores definidos para `writing-mode`, `direction`, y `text-orientation`.


```css
border-block-color: yellow;
border-block-color: #f5f6f7;
```


El color de borde en la otra dimensión puede ser establecida con `border-inline-color` que establece `border-inline-start-color`, y `border-inline-end-color`.

|  |  |
| --- | --- |
| Valor inicial | `currentcolor` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | computed color |
| Animation type | by computed value type |

Sintaxis
--------

### Valores

`<'color'>`

El color del borde. Mirar `color`.

### Sintaxis formal
```

border-block-color =   
  <'border-top-color'>{1,2}    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### Contenido CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-color: red;
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-block-color |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Mira también
------------

* Esta propiedad se asigna a las propiedades del borde físico: `border-top-color`, `border-right-color` (en-US), `border-bottom-color`, o `border-left-color`.
* `writing-mode`, `direction`, `text-orientation`+ error 1297097
CSS Flow Layout
===============

El *Flujo Normal*, o también Flow Layout, es la forma en que los elementos de línea y de bloque son presentados en una página sin que haya cambios en su diseño. El flujo es esencialmente un grupo de elementos que se perciben entre sí e interactúan entre ellos en nuestro diseño. Cuando uno de ellos se encuentra *fuera del flujo*, éste se comporta de manera independiente.

In normal flow, **inline** elements display in the inline direction, that is in the direction words are displayed in a sentence according to the Writing Mode of the document. **Block** elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.

Ejemplo Básico
--------------

The following example demonstrates Block and Inline Level boxes. The two paragraph elements with a green border are Block Level, displaying one under the other.

The first sentence also includes a span element with a blue background. This is inline level and therefore displays in place in the sentence.

Guides
------

* Block and Inline Layout in Normal Flow (en-US)
* In Flow and Out of Flow (en-US)
* Formatting Contexts Explained (en-US)
* Flow Layout and Writing Modes (en-US)
* Flow Layout and Overflow (en-US)
Reference
---------

### Glossary Entries

* Block (CSS)

1. **CSS**
2. **CSS Reference**
scroll-behavior
===============

La propiedad CSS **`scroll-behavior`** especifica el comportamiento del desplazamiento para un elemento con desplazamiento, cuando éste se produce debido a la navegación o a APIs CSSOM. Otros desplazamientos, p.ej. aquellos realizados por el usuario, no se ven afectados por esta propiedad. Cuando esta propiedad está especificada en el elemento raíz, se aplica al viewport.

Esta propiedad puede ser ignorada por los agentes de usuario.


```css
/\* Keyword values \*/
scroll-behavior: auto;
scroll-behavior: smooth;

/\* Global values \*/
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
```


|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | scrolling boxes |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------

Valores

`auto`

La caja de desplazamiento realiza el desplazamiento instantáneamente.

`smooth`

La caja se desplaza suavemente, utilizando una función de tiempo definida por el agente de usuario (user-agent) sobre un período de tiempo también definido por éste. Los agentes de usuario seguirán las convenciones de su propia plataforma, en caso de que existan.

### Sintaxis formal
```

scroll-behavior =   
  auto    |  
  smooth    
  
```

Example
-------

### HTML


```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
```

### CSS


```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

### Output

Especificaciones
----------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Transformaciones CSS
====================

El módulo **Transformaciones CSS** define cómo los elementos diseñados con CSS se pueden transformar en un espacio bidimensional o tridimensional.

Referencia
----------

### Propiedades

* `backface-visibility`
* `perspective`
* `perspective-origin` (en-US)
* `rotate` (en-US)
* `scale` (en-US)
* `transform`
* `transform-box` (en-US)
* `transform-origin`
* `transform-style`
* `translate` (en-US)
### Tipos de datos

* `<transform-function>`
Guías
-----

Usando transformaciones CSS

Tutorial paso a paso sobre cómo transformar elementos estilizados con CSS.

Especificaciones
----------------

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |
<resolution>
============

Resumen
-------

El tipo de dato CSS `<resolution>`, usado en media queries (en-US), define la densidad de píxeles de un dispositivo de salida, su resolución. Es un `<number>` inmediatamente seguido por una unidad de resolución (`dpi`, `dpcm`, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un `<length>`: `0` es inválida y no representa `0dpi`, `0dpcm`, ni `0dppx`.

Unidades
--------

`dpi`

Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, `1dpi ≈ 0.39dpcm`.

`dpcm`

Esta unidad representa el número de dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, `1dpcm ≈ 2.54dpi`.

`dppx`

Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por `image-resolution` (en-US).

Ejemplos
--------

Éstos son algunos de los usos correctos de valores `<resolution>`:
```

96dpi                                              Uso correcto: a `<number>` (here an `<integer>`) followed by the unit.
@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.
```


Here are some incorrect uses:
```

72 dpi                                             Incorecto: no hay espacios entre `<number>` y la unidad.
ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores `<length>`.
```

Especificaciones
----------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # resolution |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* CSS Media Queries (en-US)
:first-child
============

La pseudo-clase **`:first-child`** de CSS representa el primer elemento entre un grupo de elementos hermanos.


```css
/\* Selecciona cualquier <p> que sea el primer
 elemento entre sus hermanos \*/
p:first-child {
  color: lime;
}
```


**Nota:** Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

Sintaxis
--------

Error: could not find syntax for this itemEjemplos
--------

### Ejemplo básico

#### HTML


```html
<div>
  <p>¡Este texto está seleccionado!</p>
  <p>Este texto no está seleccionado.</p>
</div>

<div>
  <h2>Este texto no está seleccionado: no es un `p`.</h2>
  <p>Este texto no está seleccionado.</p>
</div>
```


#### CSS


```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```


#### Resultado

### Diseñando una lista

#### HTML


```html
<ul>
  <li>Objeto 1</li>
  <li>Objeto 2</li>
  <li>
    Objeto 3
    <ul>
      <li>Objeto 3.1</li>
      <li>Objeto 3.2</li>
      <li>Objeto 3.3</li>
    </ul>
  </li>
</ul>
```


#### CSS


```css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
```


#### Resultado

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # first-child-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `:first-of-type`, `:last-child`, `:nth-child`
::-moz-color-swatch
===================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

El **`::-moz-color-swatch`** pdseudo-elemento CSS es una extension de Mozilla que representa el color seleccionado en un `<input>` de `type="color"`.

**Nota:** Usando `::-moz-color-swatch` con cualquier cosa excepto `<input type="color">` no concuerda con nada y no tiene efecto.

Sintaxis
--------

Error: could not find syntax for this itemEjemplo
-------

### HTML


```html
<input type="color" value="#de2020" />
```

### CSS


```css
input[type="color"]::-moz-color-swatch {
  border-radius: 10px;
  border-style: none;
}
```

### Resultado

Especificaciones
----------------

No es parte de ninguna especificacion. Es un pseudo-elemento patentado específicamente para Gecko.

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver tambien
-----------

* Pseudo-elementos similares usados por otros buscadores:
    + `::-webkit-color-swatch`, pseudo-elemento soportado por WebKit y Blink (Safari, Chrome, and Opera)