recursal/MDN huggingface dataset:
padding-top
===========

Sumario
-------

La propiedad **`padding-top`** CSS establece el espacio de relleno requerido en la parte superior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad **`margin-top`**, valores negativos no son válidos.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column`. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Percentages | refer to the width of the containing block |
| Valor calculado | the percentage as specified or the absolute length |
| Animation type | a length |

Sintaxis
--------


```css
/\* <length> values (valores fijos) \*/
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/\* <percentage> value (valores porcentuales) \*/
padding-top: 10%;

/\* Global values (valores globales) \*/
padding-top: inherit;
padding-top: initial;
padding-top: unset;
```

### Valores

`<length>`

Especifica un valor positivo fijo. Veáse `<length>` para más detalles.

`<percentage>`

Especifica un porcentaje con respecto al bloque que lo contiene.

### Sintaxis formal
```

padding-top =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplos
--------


```css
.content {
  padding-top: 5%;
}
.sidebox {
  padding-top: 10px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

Resumen
-------

La propiedad `animation` de CSS es una propiedad abreviada (shorthand property) para `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count` y `animation-direction`.

La lista de propiedades CSS que pueden ser animadasestá disponible; cabe señalar que estas son las mismas propiedades soportadas por CSS transitions.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `animation-name`: `none`
* `animation-duration`: `0s`
* `animation-timing-function`: `ease`
* `animation-delay`: `0s`
* `animation-iteration-count`: `1`
* `animation-direction`: `normal`
* `animation-fill-mode`: `none`
* `animation-play-state`: `running`
* `animation-timeline` (en-US): `auto`
 |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `animation-name`: como se especifica
* `animation-duration`: como se especifica
* `animation-timing-function`: como se especifica
* `animation-delay`: como se especifica
* `animation-direction`: como se especifica
* `animation-iteration-count`: como se especifica
* `animation-fill-mode`: como se especifica
* `animation-play-state`: como se especifica
* `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
 |
| Animation type | Not animatable |

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

Formal grammar:  [ <'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
                    <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'> ]
                  [, [<'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
                      <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'>] ]*
```

Ejemplos
--------

Consulte CSS animations para ver los ejemplos.

Sobre Accesibilidad
-------------------

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando Reduced Motion Media Query. (en-US)

Para más información (en inglés):

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations (en-US)
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| CSS Animations Level 1 # animation |

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

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

Consulte también
----------------

* Usando animaciones CSS (en-US)
* `AnimationEvent`
:any-link
=========

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

La pseudo-clase `:any-link` de CSS representa a un elemento que actúa como el ancla origen de un hipervínculo independientemente de si ha sido visitado, es decir, coincide con cualquier elemento `<a>`, `<area>` o `<link>` con un atributo `href`. Por lo tanto, coincide con todos los elementos que coincidan con `:link` o `:visited`.

```css
/\* Selecciona cualquier elemento que coincida con :link o :visited \*/
:any-link {
  color: green;
}
```

Sintaxis
--------

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

### HTML


```html
<a href="https://example.com">Enlace externo</a><br />
<a href="#">Enlace de destino interno</a><br />
<a>Enlace de marcador de posición (no se personalizará)</a>
```

### CSS


```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* navegadores WebKit \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

Las **Reglas Condicionales** (At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.

Referencia
----------

### Reglas condicionales

* `@document` (en-US)
* `@media`
* `@supports`
* `@import`
Guías
-----

*None.*

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 5  |
| CSS Conditional Rules Module Level 4  |
| CSS Conditional Rules Module Level 3  |

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

{{Compat}}
border-block-end-width
======================

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

La propieda de CSS **`border-block-end-width`** define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad `border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width`, o `border-left-width` (en-US) property dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <'border-width'> values \*/
border-block-end-width: 5px;
border-block-end-width: thick;
```


Las propiedades relacionadas son `border-block-start-width`, `border-inline-width`, y `border-inline-end-width` , que define los otros anchos de borde del elemento.

|  |  |
| --- | --- |
| Valor inicial | `medium` |
| Applies to | all elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

### Valores

`<'border-width'>`

El tamaño del borde. Mira `border-width`.

### Sintaxis formal
```

border-block-end-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

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: 1px solid blue;
  border-block-end-width: 5px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # border-width |

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 una de las propiedades del borde físico: `border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width`, and `border-left-width` (en-US)
* `writing-mode`, `direction`, `text-orientation`
-webkit-mask-clip
=================

**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.

Si se especificado `-webkit-mask-image` , `-webkit-mask-clip` determina el comportamiento de recorte (clipping) de la imagen de máscara.

|  |  |
| --- | --- |
| Valor inicial | `border-box` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Síntaxis
--------
```

mask-clip =   
  [ <coord-box> | no-clip ]#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```


donde:

<clip-style>

`border | padding | content | text`

Valores
-------

border

`Si se ha especificado border` , la máscara de imagen se extiende hasta el borde del elemento.

padding

Si se ha especificado `padding` , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.

content

Si se ha espeficiado `content` , la imagen de máscara se recorta al tamaño del contenido del elemento.

text

Si se ha especificado `text` , la imagen de máscara de recorta al tamaño del texto del elemento.

Ejemplo
-------


```css
div {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-clip: padding;
}
```

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

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

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

`-webkit-mask`, `-webkit-mask-origin`, `-webkit-mask-box-image`, `-webkit-mask-image`,`-webkit-mask-composite`,`-webkit-mask-repeat`
:visited
========

La pseudo-clase **`:visited`** de CSS representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.


```css
/\* Selecciona cualquier <a> que ha sido visitado \*/
a:visited {
  color: green;
}
```


Los estilos definidos por la pseudo-clase `:visited` serán anulados por cualquier pseudo-clase posterior relacionada con el enlace (`:link`, `:hover` o `:active`) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla `:visited` después de la regla `:link` pero antes de las reglas `:hover` y `:active`, según lo definido por el orden LVHA: `:link` — `:visited` — `:hover` — `:active`.

Restricciones de estilo
-----------------------

Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:

* Las propiedades CSS permitidas son `color`, `background-color`, `border-color`, `border-bottom-color`, `border-left-color`, `border-right-color` (en-US), `border-top-color`, `column-rule-color` (en-US), y `outline-color`.
* Los atributos SVG permitidos son `fill (en-US)` y `stroke (en-US)`.
* El componente alfa de los estilos permitidos será ignorado. En su lugar, se utilizará el componente alfa del estado non-`:visited` del elemento, excepto cuando ese componente sea 0, en cuyo caso el estilo establecido en `:visited` se ignorará por completo.
* Aunque estos estilos pueden cambiar la apariencia de los colores para el usuario final, el método `window.getComputedStyle` mentirá y siempre devolverá el valor del color non-`:visited`.

**Nota:** Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea Privacidad y el selector :visited (en-US).

Sintaxis
--------

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

Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con `:visited`. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para `color` y `column-rule-color`. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector `:visited`.

### HTML


```html
<a href="#test-visited-link">¿Ya has visitado este enlace?</a><br />
<a href="">Ya has visitado este enlace.</a>
```

### CSS


```css
a {
  /\* Especifique los valores predeterminados no transparentes a ciertas propiedades,
 lo que les permite ser diseñado con el estado :visited \*/
  background-color: white;
  border: 1px solid white;
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

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

* Privacidad y el selector :visited (en-US)
* pseudo-clases relacionadas con enlaces: `:link`, `:active`, `:hover`
border-block-width
==================

**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-width`** CSS property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-width` (en-US) y `border-bottom-width`, o `border-left-width` (en-US), y `border-right-width` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.


```css
/\* <'border-width'> values \*/
border-block-width: 5px;
border-block-width: thick;
```


El ancho del borde en otra dimensión puede establecerse con `border-inline-width`, que establece `border-inline-start-width`, y `border-inline-end-width`.

|  |  |
| --- | --- |
| Valor inicial | `medium` |
| Applies to | all elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | absolute length; `0` if the border style is `none` or `hidden` |
| Animation type | by computed value type |

Sintaxis
--------

### Valores

`<'border-width'>`

El ancho del borde. Mira `border-width`.

### Sintaxis formal
```

border-block-width =   
  <'border-top-width'>{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: 1px solid blue;
  border-block-width: 5px;
}
```

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

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

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 una de las propiedades del borde físico: `border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width`, y `border-left-width` (en-US)
* `writing-mode`, `direction`, `text-orientation`
::-webkit-meter-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-meter-inner-element` es un pseudo-elemento propietario de WebKit CSS para seleccionar y aplicar estilo al contenedor exterior de un elemento `<meter>` (en-US). Es necesario una marca adicional para mostrar este elemento como si fuera de sólo lectura.

Ejemplos
--------


```html
<meter min="0" max="10" value="6">Score out of 10</meter>
```



```css
meter {
  /\* Resetear la apariencia por defecto\*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

meter::-webkit-meter-inner-element {
  -webkit-appearance: inherit;
  box-sizing: inherit;
  border: 1px solid #aaa;
}
```


**Nota:** Sólo funcionará en navegadores basasdo en Webkit/Blink.

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

No es parte de ninguna especificación. Es un pseudo-elemento propietario 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 estilo a otras partes del elemento `<meter>` (en-US) :

* `::-webkit-meter-bar`
* `::-webkit-meter-even-less-good-value`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
Elemento de reemplazo
=====================

Summary
-------

Dentro de CSS tenemos los **elementos de reemplazo**, cuya representación esta fuera del ámbito de propio CSS. Son un tipo de objeto externo, por tanto su representación es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son `<img>`, `<object>`, `<video>` o elementos de formulario como `<textarea>`, `<input>`. Algunos elementos como `<audio>` or `<canvas>` ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a través de las propiedades CSS `content` son *objetos de reemplazo anonimos.*.

CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos `auto` valores.

Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como `vertical-align`.

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

* CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models (en-US), and margin collapsing, or the initial, computed, resolved, specified, used (en-US), and actual values. Definitions of value syntax, shorthand properties and replaced elements.
::cue
=====

El pseudo-elemento CSS **`::cue`** señala las pistas de texto WebVTT (en-US) dentro del elemento seleccionado. Esto puede ser usado para estilizar subtítulos y otras pistas de texto (en-US) multimedia con pistas de texto.


```css
::cue {
  color: yellow;
  font-weight: bold;
}
```


Las propiedades son aplicadas al cojunto completo de anotaciones como si fuesen una unidad. La única excepción es que `background` y sus versiones largas se aplican a cada pista de texto individualmente para evitar crear cajas y oscurecer inesperadamente grandes partes de los archivos multimedia.

Sintaxis
--------

Error: could not find syntax for this itemPropiedades permitidas
----------------------

Las reglas cuyos selectores incluyen este elemento solo pueden usar las siguientes propiedades CSS:

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
* `color`
* `font`
* `font-family`
* `font-size`
* `font-stretch` (en-US)
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
* `opacity`
* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* `ruby-position` (en-US)
* `text-combine-upright` (en-US)
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-decoration-thickness` (en-US)
* `text-shadow`
* `visibility`
* `white-space`
Ejemplos
--------

### Estilizando las anotaciones WebVTT como blanco sobre negro

El siguiente CSS ajusta el estilo de las anotaciones para que el texto sea blanco y el fondo sea una caja negro translúcido.


```css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

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

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

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

* Formato de pistas de texto para la web (WebVTT) (en-US)
* `<track>`, `<video>`
:-moz-first-node
================

**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
-------

La pseudo-clase CSS `:-moz-first-node` representa cualquier elemento que sea el primer nodo hijo de algún otro elemento. Se diferencia de `:first-child` en que no selecciona al primer hijo si tiene texto (que no sea espacios en blanco) detrás de él.

**Nota:** Cualquier espacion en blanco al principio del elemento se ignora a la hora de determina cual elemento es `:-moz-first-node`.

Síntaxis
--------
```

span:-moz-first-node { propiedades del estilo }
```

Ejemplo
-------

### CSS


```css
span:-moz-first-node {
  background-color: lime;
}
```

### HTML


```html
<div>
  <span>:-moz-first-node</span>
  <span>:-moz-last-node</span>
</div>
```

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

* `:-moz-last-node`
* `:first-child`