recursal/MDN huggingface dataset:
inset
=====

La propiedad de CSS **`inset`** define el bloque lógico y las compensaciones de inicio y finalización en línea de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades `top` y `bottom`, o `right` y `left` dependiendo de las propiedades en los valores definidos para `modo de escritura`, `dirección` y `orientación de texto`.


```css
/\* <length> values \*/
inset: 3px 10px 3px 10px;
inset: 2.4em 3em 3em 3em;
inset: 10px; /\* value applied to all edges \*/

/\* <percentage>s of the width or height of the containing block \*/
inset: 10% 5% 5% 5%;

/\* Keyword value \*/
inset: auto;

/\* Global values \*/
inset: inherit;
inset: initial;
inset: unset;
```


|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `top`: `auto`
* `bottom`: `auto`
* `left`: `auto`
* `right`: `auto`
 |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| Valor calculado | as each of the properties of the shorthand:* `top`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `bottom`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `left`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
* `right`: if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, `auto`
 |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------

### Valores

La propiedad `inset` toma los mismos valores de la propiedad `left`.

### Sintaxis formal
```

inset =   
  <'top'>{1,4}    
  
```

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;
  position: relative;
  inset: 20px 50px 30px 10px;
  background-color: #c8c800;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset |

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: `top`, `right`, `bottom`, y `left`
* `writing-mode`, `direction`, `text-orientation`
font-size-adjust
================

Resumen
-------

La propiedad `font-size-adjust` especifica que el tamaño de la fuente debería escogerse basándose en el tamaño de las minúsculas en lugar las mayúsculas.

Esto resulta útil ya que la legibilidad de las fuentes, especialmente en el tamaño pequeño, está determinada por el tamaño de las letras minúsculas más que por las mayúsculas. Esto puede causar problemas cuando la primera opción en `font-family` no está disponible y su reemplazo tiene significativamente un aspecto distinto (el ratio entre las letras minúsculas y mayúsculas de la fuente).

Para hacer esto de forma que sea compatible con los navegadores que no soportan `font-size-adjust`, se ha especificado de forma que sea el número por el que está multiplicada la propiedad `font-size`. Esto quiere decir que el valor especificado para la propiedad debería ser el valor de*ratio* o relación de aspecto entre las minúsculas y las mayúsculas de la fuente escogida como primera opción. Por ejemplo, si especificamos una fuente `font-size: 16px; font-size-adjust: 0.5`, realmente estamos especificando que las letras minúsculas de la fuente deben tener `8px` de alto (16px multiplicado por 0.5).

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | a number |

Sintaxis
--------

`font-size-adjust:` <número> | `none` | `inherit`

### Valores

`none`

Escoge el tamaño de la fuente basándose sólo en función de la propiedad `font-size`.

<número>

Escoge el tamaño de la fuente de manera tal que su letra minúscula (determinada por la altura-x de la fuente) sea el*número* de veces el tamaño de `font-size`.

El número especificado es generalmente la relación de aspecto de la fuente de primera elección en la propiedad `font-family`. Esto significa que la primera fuente, si está disponible, aparecerá con el mismo tamaño en los navegadores, soporten estos o no la propiedad `font-size-adjust`.

Ejemplos
--------

Ver El Ejemplo Vivo
```

p{
  font: 12px Verdana, sans-serif;
  font-size-adjust: 0.58;
}
```

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

* CSS 2
* css3-fonts
Compatibilidades
----------------

Soportado en todas las plataformas a partir de Gecko 1.9 / Firefox 3, pero soportado sólo en Windows bastante antes.
column-count
============

La propiedad CSS **`column-count`** divide el contenido de un elemento en el número de columnas indicado.

Pruébalo
--------

Sintaxis
--------


```css
/\* Keyword value \*/
column-count: auto;

/\* <integer> value \*/
column-count: 3;

/\* Global values \*/
column-count: inherit;
column-count: initial;
column-count: unset;
```

### Valores

`auto`

El número de columnas es determinado por otras propiedades CSS, como `column-width` (en-US).

``<integer>``

Es un `<integer>` estrictamente positivo que describe el número ideal de columnas en las que el contenido del elemento va a fluir. Si la propiedad `column-width` (en-US) se establece a un valor que no sea `auto`, se limitará a indicar el número máximo permitido de columnas.

### Sintaxis formal
```

column-count =   
  auto             |  
  <integer [1,∞]>    
  
```

Ejemplos
--------

### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `column-count`
  property. The text is equally distributed over the columns.
</p>
```

### CSS


```css
.content-box {
  column-count: 3;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # cc |

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

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

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

* Diseño con columnas múltiples (en-US)
* Conceptos básicos de Multicol (en-US)
text-decoration-color
=====================

Resumen
-------

La propiedad **`text-decoration-color`** establece el color usado cuando se dibujan subrayados o líneas a través del texto, especificadas por la propiedad `text-decoration-line`. El color especificado será el mismo para los tres tipos de línea.

CSS no provee un mecanismo directo para especificar un color único para cada tipo de línea. Sin embargo, se puede obtener un efecto similar anidando elementos HTML, aplicando diferente tipo de línea para cada uno (via la propiedad `text-decoration-line`), y especificando un color de línea (usando `text-decoration-color`) propio para cada elemento.

|  |  |
| --- | --- |
| Valor inicial | `currentcolor` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Valor calculado | computed color |
| Animation type | a color |

Sintaxis
--------


```css
/\* valores <color> \*/
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

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

### Valores

`<color>`

La propiedad `color` acepta varlos nombres clave y notaciones numéricas. Vea `<color>` para más detalles.

### Sintaxis formal
```

text-decoration-color =   
  <color>    
  
```

Ejemplos
--------


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


El ejemplo anterior tiene el mismo efecto que el código siguiente, que además añade un estilo para cuando el elemento tiene el puntero del mouse encima.


```html
<!doctype html>
<html>
  <head>
    <style>
 .example {
 font-size: 24px;
 text-decoration: underline;
 color: red;
 }
 .example:hover {
 color: blue;
 text-decoration: line-through;
 }
 </style>
  </head>
  <body>
    <span class="example">
      <span style="color:black;"
 >texto negro con subrayado rojo, y azul con el cursor encima</span
 >
    </span>
  </body>
</html>
```

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

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

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

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

Guía de referencia de CSS

### Resumen

**initial** es un valor permitido en todas las propiedades CSS. Fuerza la utilización del valor inicial de la propiedad para el elemento al cual se aplica.

#### Para propiedades no heredadas

Para las propiedades no heredadas, este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla. Por ejemplo:
```

 /* definimos un borde verde de un encabezamiento de segundo nivel */
 h2 { border: medium solid green }

 /* pero las cabeceras de la barra lateral utilizan el valor inicial de la propiedad color */
 #sidebar h2 { border-color: initial; }

 /* ...en CSS1 se obtiene usando 'border: medium solid' */
```


#### Para propiedades heredadas

Para las propiedades heredadas, se usa menos ya que no refuerza el comportamiento por defecto.

### Especificaciones

* css3-values
* css3-cascade
### Compatibilidad

Sólo algunas especificaciones son soportadas en Firefox (las cuales se incrementan en cada versión superior) Únicamente soportado en Firefox algunas propiedades (se incrementa el número en cada versión).

### Ver también

inherit

Categorías

Interwiki Languages Links
::-moz-list-bullet
==================

**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 pseudoelemento CSS **`::-moz-list-bullet`** es una extensión de Mozilla que representa el marcador (normalmente una viñeta) de un elemento de lista (`<li>`) en una lista desordenada (`<ul>`).

Sintaxis
--------


```css
li::-moz-list-bullet
```

Ejemplos
--------

### Dar estilo a los marcadores de elementos de la lista

#### HTML


```html
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
```


#### CSS


```css
::-moz-list-bullet {
  color: red;
  font-size: 1.5em;
}
```


#### Resultado

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

No forma parte de ningún estándar.

Véase también
-------------

* `:-moz-list-number`
* `::marker`
list-style-type
===============

### Resumen

El `tipo de estilo de lista` especifica la apariencia del listado.

* `Valor inicial`: `disco/punto`
* Se aplica a: elementos con 'display: list-item'
* `Valor heredado`: Sí
* Porcentajes: n/a
* Medio: `visual`
* `Valor calculado`: según se especificó
### Sintaxis
```

 list-style-type:  <std-list-style-name> | `none` | `inherit` ;
```

### Valores

<std-list-style-name>

un nombre de estilo de lista estándar: `disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha`

`disc`

un disco.

`circle`

un círculo.

`square`

un cuadrado.

`decimal`

números decimales empezando con 1.

`decimal-leading-zero`

números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99).

`lower-roman`

números romanos en minúscula (i, ii, iii, iv, v, etc.).

`upper-roman`

números romanos en mayúscula (I, II, III, IV, V, etc.).

`lower-greek`

letras griegas en minúscula alfa/α, beta/β, gamma/γ, ...

`lower-latin`

letras ASCII en minúscula (a, b, c, ... z).

`upper-latin`

letras ASCII en mayúscula (A, B, C, ... Z).

`armenian`

numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...).

`georgian`

numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).

`lower-alpha`

es igual que `lower-latin`.

`upper-alpha`

es igual que `upper-latin`.

`none`

nada.

Ejemplos
--------

### CSS


```css
ol.normal {
  list-style-type: upper-alpha;
}

/\* or use the shortcut "list-style": \*/
ol.shortcut {
  list-style: upper-alpha;
}
```

### HTML


```html
<ol class="normal">
  List 1
  <li>Hello</li>
  <li>World</li>
  <li>What's up?</li>
</ol>

<ol class="shortcut">
  List 2
  <li>Looks</li>
  <li>Like</li>
  <li>The</li>
  <li>Same</li>
</ol>
```

### Result

### Notas

Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con `lower-latin` no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.

### Especificaciones

* CSS 1
* CSS 2.1
* css3-lists
### Compatibilidad con navegadores

### Ver también

`list-style`, `list-style-image`, `list-style-position`
block-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 **`block-size`** CSS define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad `width` o la propiedad `height`, dependiendo de los valores de `writing-mode`.

Pruébalo
--------

Resumen
-------

La propiedad de CSS **`block-size`** define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad `width` o `height`, dependiendo del valor definido en `writing-mode`.

Si el modo de escritura está orientado verticalmente, el valor de `block-size` se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con `inline-size`, la cual define las otras dimensiones del elemento.

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

Sintaxis
--------


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

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

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

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

### Valores

La propiedad `block-size` toma los mismos valores que las propiedades `width` y `height`.

### Sintaxis formal
```

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

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


```css
.texto {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}
```

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.

Véase también
-------------

* Las propiedades físicas asignadas: `width` y `height`
* `writing-mode`
::spelling-error
================

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

El pseudo-elemento CSS **`::spelling-error`** representa un segmento de texto que el user agent (en-US) ha marcado como deletreado incorrectamente.


```css
::spelling-error {
  color: red;
}
```

Propiedades permitidas
----------------------

Solo se puede usar un pequeño subconjunto de propiedades de CSS en una regla con `::spelling-error` en su selector:

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` y sus longhands
* `text-decoration` y sus propiedades asociadas
* `text-emphasis-color`
* `text-shadow`
Síntaxis
--------
```

::spelling-error
```

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

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

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

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

* `::grammar-error` (en-US)
@import
=======

Resumen
-------

La regla-at CSS `@import` permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas `@charset`; como esto no es una declaración anidada, no puede ser usado dentro de grupos condicionales de reglas-at.

Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio `@import`. Estas condiciones @import se especifican separando por una coma las consultas de medios (media query) despues de la *url*. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando `all` para el medio tiene el mismo efecto.

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

@import url;                      or
@import url list-of-media-queries;
```


Dónde :

*url*

es una `<string>` (en-US) o un `<uri>()` (en-US)

Representa la ubicación del recurso a importar. La *url* puede ser absoluta o relativa.

*list-of-media-queries*

Es una lista separada por comas de consultas de medios (media query) que condicionan la aplicación de las reglas CSS definidas en el enlace *url*. Si el navegador no soporta cualquiera de estos consultas de medios (media query), ni siquiera cargará el recurso vinculado.

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

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # at-import |

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

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

Resumen
-------

La propiedad CSS **`isolation`** define si el elemento debe crear un nuevo stacking context (en-US).

Esto es especialmente útil en conjunto con `background-blend-mode` que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

Sintaxis
--------


```css
/\* Keyword values \*/
isolation: auto;
isolation: isolate;

/\* Global values \*/
isolation: inherit;
isolation: initial;
isolation: unset;
```

### Valores

`auto`

Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere.

`isolate`

Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado.

### Sintaxis formal
```

isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     |  
  isolate    
  
```

Ejemplos
--------


```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```



```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

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

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

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

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

También puedes ver
------------------

* `<blend-mode>`
* `mix-blend-mode`, `background-blend-mode`
max-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 **`max-inline-size`** define el tamaño máximo horizontal o vertical de un elemento bloque dependiendo del modo de escritura. Esto corresponde a las propiedades `max-width` (en-US) o `max-height` dependiendo de los valores definidos por `writing-mode`. Si el modo de escritura esta orientado verticalmente, el valor de `max-inline-size` relacionado al alto máximo del elemento, de lo contrario, se relaciona con el ancho máximo del elemento. Se relaciona con `max-block-size`, que define la otra dimensión del elemento.

Pruébalo
--------

Sintaxis
--------


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

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

/\* Keyword values \*/
max-inline-size: none;
max-inline-size: max-content;
max-inline-size: min-content;
max-inline-size: fit-content;
max-inline-size: fill-available;

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


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

### Valores

La propiedad `max-inline-size` toma los mismos valores como las propiedades `max-width` (en-US) y `max-height`.

### Sintaxis formal
```

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

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-inline-size: 200px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-inline-size |
| 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: `max-width` (en-US) y `max-height`
* `writing-mode`