recursal/MDN huggingface dataset:
:enabled
========

La pseudo-clase `:enabled` CSS representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él, acepta que se le introduzca texto, etc.) o si accepta el foco. El elemento también tiene un estado deshabilitado el en cuál, no puede ser activado ni acepta el foco.


```css
/\* Selecciona cualquier <input> habilitado \*/
input:enabled {
  color: blue;
}
```

Sintaxis
--------

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

El siguiente ejemplo hace que el color del texto y el botón `<input>` sean verdes cuando están habilitados, y grises cuando están deshabilitados. Esto ayuda al usuario a comprender con qué elementos se puede interactuar.

### HTML


```html
<form action="url\_of\_form">
  <label for="FirstField">Primer campo (habilitado):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />

  <label for="SecondField">Segundo campo (deshabilitado):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />

  <input type="button" value="Enviar" />
</form>
```

### CSS


```css
input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

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

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

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

* `:disabled`
<angle>
=======

Summary
-------

El tipo de dato `<angle>` de CSS representa valores de ángulo. Los valores positivos representan ángulos en sentido de las agujas del reloj, mientras los valores negativos representan ángulos en sentido opuesto. Su sintáxis es un valor de tipo numérico (`<number>`) seguido inmediatamente por la unidad (`deg`, `grad`, `rad` o `turn`). Al igual que cualquier otra dimensión en CSS, no debe haber espacio entre la unidad y el número.

Para propiedades estáticas y una unidad dada, un ángulo puede ser representado por muchos valores: `90deg` y `-270deg`, o `1turn` y `4turn` representan la misma posición final. Sin embargo, para posiciones dinámicas, como aplicar una transición (`transition`) en la propiedad `transform`, el efecto será diferente.

Se deben usar las siguientes unidades:

* `deg`, que representa un ángulo en grados. Un círculo completo equivale a `360deg`. Ejemplos: `0deg`, `90deg`, `360deg`.
* `grad`, que representa un ángulo en grado centesimal. Un circulo completo equivale a `400grad`. Ejemplos: `0grad`, `100grad`, `400grad`.
* `rad`, que representa un ángulo en radianes. Un círculo completo equivale a 2π radianes, que se aproxima a `6.2832rad`. `1rad` es 180/π grados. Ejemplos: `0rad`, `1.0708rad`, `6.2832rad`.
* `turn`, que representa el número de vueltas del ángulo. Un círculo completo equivale a `1turn`. Ejemplos: `0turn`, `0.25turn`, `1turn`.

Aun cuando todas las unidades representan lo mismo para el valor `0`, la unidad no debe ser omitida en ese caso, puesto que no es un valor de tipo `<length>`: `0` es inválido, y no representa `0deg`, `0grad`, `0rad` o `0turn`.

Ejemplos
--------

| Angle90.png | Ángulo recto: `90deg = 100grad = 0.25turn ≈ 1.5708rad` |
| --- | --- |
| Angle180.png | Ángulo llano: `180deg = 200grad = 0.5turn ≈ 3.1416rad` |
| AngleMinus90.png | Ángulo recto (hacia la izquierda): `-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
| Angle0.png | Ángulo nulo: `0deg = 0grad = 0turn = 0rad`Nota: `0` no es un valor de ángulo válido. |

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

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

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

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

En un documento HTML, los **selectores de ID** de CSS buscan un elemento basado en el contenido del atributo `ID`. El atributo `ID` del elemento seleccionado debe coincidir exactamente con el valor dado en el selector.


```css
/\* El elemento con id="demo" \*/
#demo {
  border: red 2px solid;
}
```

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

#id_value { style properties }
```


Nótese que esto es equivalente al siguiente `attribute selector`:
```

[id=id_value] { style properties }
```

Ejemplo
-------

### CSS


```css
#identified {
  background-color: skyblue;
}
```

### HTML


```html
<div id="identified">¡Este div tiene un ID especial!</div>
<div>Este solo es un div regular.</div>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # id-selectors |

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

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

**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-value`** representa la parte rellena de la barra del elemento `<progress>`. Es hija del pseudo-elemento `::-webkit-progress-bar`.

**Nota:** para que `::-webkit-progress-value` tenga efecto en el elemento <progress> `-webkit-appearance` (en-US) deberá tener *none* como valor.

Ejemplo
-------

### Contenido CSS


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

::-webkit-progress-value {
  background-color: orange;
}
```

### Contenido HTML


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

Resultado
---------

Una barra de progreso con el estilo indicado anteriormente será similar a esta:

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

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

No es parte de ninguna especificación. Es un 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-elemento de WebKit/Blink para dar estilos a otras partes de un elemento `<progress>`:
    + `::-webkit-progress-bar`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
* `::-ms-fill`
border-block-end-color
======================

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

La propiedad CSS `border-block-end-color` define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades `border-top-color`, `border-right-color` (en-US), `border-bottom-color`, o `border-left-color`, dependiendo de los valores definidos para `writing-mode`, `direction`, y `text-orientation`.


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


Está relacionada con `border-block-start-color`, `border-inline-start-color`, y `border-inline-end-color`, que definen las otras propiedades de color de borde del elemento.

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

Sintaxis
--------

### Valores

`<'border-color'>`

Véase `border-color`

### Sintaxis formal
```

border-block-end-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

### Contenido HTML


```html
<div>
  <p class="exampleText">Texto de ejemplo</p>
</div>
```

### Contenido CSS


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

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

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

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

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

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

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

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

### Definicion

El margen derecho de propiedad establece el margen derecho de un elemento.

* Nota: Los valores negativos son permitidas.
* Heredado: No.
### Sintaxis JavaScript

CSS propiedades también se puede cambiar dinámicamente con una JavaScript. Scripting Sintaxis: object.style.marginRight="10px"

### Ejemplo
```

h1
{
margin-right: 10px
}
h2
{
margin-right: -20px
}
```


* Fuente: []
inline-size
===========

**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 **`inline-size`** define el tamaño horizontal o vertical de un bloque de elementos, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad `width` o `height`, dependiendo del valor de `writing-mode`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <length> values \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> values \*/
inline-size: 75%;

/\* Keyword values \*/
inline-size: 25em border-box;
inline-size: 75% content-box;
inline-size: max-content;
inline-size: min-content;
inline-size: available;
inline-size: fit-content;
inline-size: auto;

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


Si el modo de escritura es verticalmente orientado, el valor de `inline-size` se relaciona con la altura del elemento; de lo contrario, se relaciona con el ancho del elemento. Una propiedad relacionada es `block-size`, que define la otra dimensión del elemento.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | same as `width` and `height` |
| Heredable | no |
| Percentages | inline-size of containing block |
| Valor calculado | same as `width` and `height` |
| Animation type | a length, percentage or calc(); |

### Valores

La propiedad `inline-size` toma los mismos valores de las propiedades `width` y `height`.

### Sintaxis formal
```

inline-size =   
  <'width'>    
  
```

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

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

* Las propiedades físicas mapeadas: `width` y `height`
* `writing-mode`
:-moz-locale-dir(ltr)
=====================

**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-locale-dir(ltr)` selecciona un elemento si el interfaz del usuario se está mostrando de izquierda a derecha. Esto viene determinado cuando la opción de las preferencias `intl.uidirection.locale` (donde `locale` es la localización de idioma actual) está estáblecido a "ltr".

Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña. Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.

Este selector no funciona adecuadamente en HTML; siempre selecciona no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).

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

* `:-moz-locale-dir(rtl)`
border-block-start-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-start-width`** define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades `border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width`, o `border-left-width` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


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


Propiedades relacionadas son`border-block-end-width`, `border-inline-start-width`, y `border-inline-end-width`, que definen los otros anchos del 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 ancho del borde. Mira `border-width`.

### Sintaxis formal
```

border-block-start-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-start-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`, y `border-left-width` (en-US)
* `writing-mode`, `direction`, `text-orientation`
opacity
=======

Resumen
-------

La propiedad CSS `opacity` define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.

Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo contexto de apilamiento.

|  |  |
| --- | --- |
| Valor inicial | `1` |
| Applies to | all elements |
| Heredable | no |
| Percentages | map to the range `[0,1]` |
| Valor calculado | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | by computed value type |

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

opacity:  <valor alfanumérico>
```

### Valores

`<alphavalue>`

Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano.

| valor | Significado |
| --- | --- |
| `0` | El elemento es transparente (invisible). |
| Cualquier valor entre 0 y 1 | El elemento es translúcido. |
| `1` | El elemento es opaco (sólido). |

Ejemplos
--------


```css
hbox.example {
  opacity: 0.5; /\* see the background through the hbox \*/
}
```

### Live Example
```

pre {                               /* make the box translucent (20% opaque) */
   border: solid red;
   opacity: 0.2;
   filter: alpha(opacity=20);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}
```


```
pre {                               /* make the box translucent (50% opaque) */
   border: solid red;
   opacity: 0.5;
   filter: alpha(opacity=50);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}
```


```
pre {                               /* make the box translucent (80% opaque) */
   border: solid red;
   opacity: 0.8;
   filter: alpha(opacity=80);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}
```

### Variando la opacidad con :hover


```html
<!doctype html>
<html>
  <head>
    <style>
 img.opacity {
 opacity: 1;
 filter: alpha(opacity=50);
 zoom: 1;
 }

 img.opacity:hover {
 opacity: 0.5;
 filter: alpha(opacity=100);
 zoom: 1;
 }
 </style>
  </head>

  <body>
    <img
 src="//developer.mozilla.org/media/img/mdn-logo.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
  </body>
</html>
```

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

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

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

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

Más información
---------------

* MSDN Microsoft's filter:alpha(opacity=xx)
background-position
===================

* « Anterior
* Siguiente »
Resumen
-------

`background-position` define la posición inicial de la imagen de fondo especificada.

* `Valor inicial`: 0% 0%
* Se aplica a: todos los elementos
* `Herencia`: no
* Porcentajes: se refiere al tamaño de la caja misma
* Medio: `visual`
* `Valor calculada`: para <length> el valor absoluto, para otros un porcentaje.
Sintaxis
--------
```

background-position: [ <percentage> | <length> | left | center | right  ]
                     [ <percentage> | <length> | top  | center | bottom ] ? ;
```


```
background-position: [ top | center | bottom ];
```


```
background-position: inherit;
```

### Valores

`porcentaje` <percentage>

Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.

`<length>` <length>

con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.

top left y left top

Es igual a '0% 0%'.

top, top center y center top

Es igual a '50% 0%'.

right top y top right

Es igual a '100% 0%'.

left, left center y center left

Es igual a '0% 50%'.

center and center center

Es igual a '50% 50%'.

right, right center y center right

Es igual a '100% 50%'.

bottom left y left bottom

Es igual a '0% 100%'.

bottom, bottom center y center bottom

Es igual a '50% 100%'.

bottom right y right bottom

Es igual a '100% 100%'.

Si solo se especifica un valor, se entenderá que es la posición horizontal con la vertical al 50%. De otra manera el primer valor especifica la posición horizontal. Se admiten valores negativos y combinaciones de palabras claves, largos (lenght) o porcentajes, pero en el caso de mezclar las palabras claves con otros valores, '**left' y 'right'** solo se utilizarán como primer valor y '**top' y 'bottom'** como segundo.

Ejemplos
--------
```

.exampleone {
 background-image: url("logo.png");
 background-position: top center;
}

.exampletwo {
 background-image: url("logo.png");
 background-position: 25% 75%;
}

.examplethree {
 background-image: url("logo.png");
 background-position: 2cm bottom;
}

.examplefour {
 background-image: url("logo.png");
 background-position: center 10%;
}

.examplefive {
 background-image: url("logo.png");
 background-position: 2cm 50%;
}
```

### Especificaciones

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-position |

### Compatibilidad con navegadores

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

### Ver también

`background`, `background-attachment`, `background-color`, `background-image`, `background-position`, `background-repeat`
:disabled
=========

La pseudo-clase `:disabled` de CSS representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado (por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.


```css
/\* Selecciona cualquier <input> deshabilitado \*/
input:disabled {
  background: #ccc;
}
```

Sintaxis
--------

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

Este ejemplo muestra un formulario de envío básico. Utiliza el evento JavaScript `change` (en-US) para permitir al usuario habilitar / deshabilitar los campos de facturación.

### HTML


```html
<form action="#">
  <fieldset id="shipping">
    <legend>Dirección de Envío</legend>
    <input type="text" placeholder="Nombre" />
    <input type="text" placeholder="Dirección" />
    <input type="text" placeholder="Código postal" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>Dirección de facturación</legend>
    <label for="billing\_is\_shipping">Igual que la dirección de envío:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="Nombre" disabled />
    <input type="text" placeholder="Dirección" disabled />
    <input type="text" placeholder="Código postal" disabled />
  </fieldset>
</form>
```

### CSS


```css
input[type="text"]:disabled {
  background: #ccc;
}
```

### JavaScript


```js
// Esperar a que la página termine de cargarse
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // Adjunte el detector de eventos `change` al checkbox
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // Seleccione los campos de texto de facturación
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // Alternar los campos de texto de facturación
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

### Resultado

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

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

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

* `:enabled`