recursal/MDN huggingface dataset:
border-bottom
=============

### Resumen

La propiedad `border-bottom` permite de definir de una vez todas las propiedades individuales `border-bottom-color`, `border-bottom-style`, y `border-bottom-width`, las cuales describen el color, estilo y ancho del borde inferior de un elementos.

* `Valor inicial`: ver propiedades individuales
* Se aplica a : todos los elementos
* `Valor heredado`: no
* Porcentajes: N/A
* Medio: `visual` (en-US)
* `Valor calculado`: ver propiedades individuales
### Sintaxis
```

border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
```

### Valores

<border-width>

ver `border-bottom-width`.

<border-style>

ver `border-bottom-style`.

<border-color>

ver `border-bottom-color`.

### Ejemplos

Ver El Ejemplo Vivo
```

element {
    border-bottom-width: 1px solid #000;
}
```

### Notas

Si no se especifica el color del borde, este tomará el valor definido en la propiedad del `color` general.

Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.

Como con todas las propiedades generales, `border-bottom` siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.

Lo que significa que:
```

  border-bottom-style: dotted;
  border-bottom: thick green;
```


es idéntico a:
```

  border-bottom-style: dotted;
  border-bottom: none thick green;
```


y el valor de `border-bottom-style` dado antes de `border-bottom` es ignorado.

Como el valor por defecto de `border-bottom-style` es `none`, el no especificar la parte <border-style> en la propiedad general significa: **sin borde**.

### Especificaciones

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

### Compatibilidad con navegadores

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

### Ver también

`border`, `border-bottom`, `border-bottom-width`, `border-bottom-style`, `border-bottom-color`,
grid-gap
========

Resumen
-------

La propiedad CSS `grid-gap` es una propiedad abreviada shorthand para `grid-row-gap` (en-US) y `grid-column-gap` que especifica los canales entre las filas y las columnas de la cuadrícula.

Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `row-gap` (en-US): `normal`
* `column-gap`: `normal`
 |
| Applies to | multi-column elements, flex containers, grid containers |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `row-gap` (en-US): as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | as each of the properties of the shorthand:* `row-gap` (en-US): a length, percentage or calc();
* `column-gap`: a length, percentage or calc();
 |

Sintaxis
--------


```css
/\* Un valor <longitud> \*/
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;

/\* Un valor <porcentaje> \*/
grid-gap: 16%;
grid-gap: 100%;

/\* Dos valores <longitud> \*/
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;

/\* Uno o dos valores <porcentaje> \*/
grid-gap: 16% 100%;
grid-gap: 21px 82%;

/\* Valores Globales \*/
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;
```

### Valores

`<longitud>`

Es el ancho del calalón que separa las lineas de las rejillas.

`<percentage>`

Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.

### Sintaxis formal
```

gap =   
  <'row-gap'> <'column-gap'>?    
  
```

Ejemplo
-------

Contenido HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


CSS


```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  grid-gap: 20px 5px;
}

#grid > div {
  background-color: lime;
}
```

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

See also
--------

* Related CSS properties: `grid-row-gap` (en-US), `grid-column-gap`
* Grid Layout Guide: *Basic concepts of grid layout - Gutters*
:host
=====

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La pseudo-clase CSS **`:host`** selecciona la sombra host de sombra DOM que contiene el CSS que se usa en el interior — es decir, esto le permite seleccionar un elemento personalizado desde su sombra DOM.

**Nota:** Esto no tiene ningún efecto cuando se usa fuera de una sombra DOM.


```css
/\* Selects a shadow root host \*/
:host {
  font-weight: bold;
}
```

Sintaxis
--------

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

Los siguientes fragmentos se toman de nuestro ejemplo de selectores de host (ver también en directo).

En este ejemplo, tenemos un elemento personalizado simple — `<context-span>` — que se puede envolver alrededor del texto:


```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```


Dentro del constructor del elemento, creamos los elementos `style` y `span`, llenamos el `span` con el contenido del elemento personalizado y llenamos el elemento `style` con algunas reglas CSS:


```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```


La regla `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` estiliza todas las instancias del elemento `<context-span>` (la sombra host en esta instancia) en el documento.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

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

* Componentes Web
* `:host()` (en-US)
* `:host-context()`
<number>
========

Un valor para una propiedad CSS, un número incluyendo un valor entero `<integer>`.
border-inline-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-inline-color`** define el color del borde lógico en línea de un elemento, 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-color` y `border-bottom-color`, o `border-left-color`, y `border-right-color` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.


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


El color del borde en otra dimensión puede establecerse con `border-block-color` que establece `border-block-start-color`, y `border-block-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. Mira `color`.

### Sintaxis formal
```

border-inline-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-inline-color: red;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-border-inline-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 una de 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`+ bug 1297097
font-style
==========

Resumen
-------

La propiedad `font-style` permite definir el aspecto de una familia tipográfica entre los valores: `normal`, italic (cursiva) y `oblique`.

|  |  |
| --- | --- |
| Valor inicial | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | by computed value type; `normal` animates as `oblique 0deg` |

Sintaxis
--------


```css
font-style: normal;
font-style: italic;
font-style: oblique;

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

### Valores

`normal`

Escoge un tipo de letra clasificado como `normal` dentro de una `familia de fuente`.

`italic`

Escoge un tipo de letra etiquetado como `italic`, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como `oblique` en lugar de eso.

`oblique`

Escoge un tipo de letra etiquetado como `oblique`, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como `italic` en lugar de eso.

### Sintaxis formal
```

font-style =   
  normal                           |  
  italic                           |  
  oblique <angle [-90deg,90deg]>?    
  
```

Ejemplo
-------

El ejemplo muestra los valores diferentes de `font-style`.


```html
<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
```



```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```


Ten en cuenta que no todas las fuentes tienen tipos de letra distintos para `oblique` y `italic`, si este no es el caso, los navegadores simulan el estilo que falta utilizando el tipo de letra presente.

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-style-prop |

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

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

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

Resumen
-------

La propiedad CSS `animation-duration` indica la cantidad de tiempo que la animación tarda en completar un ciclo (duración).

El valor por defecto es `0s`, que indica que la animación no debe producirse.

Es conveniente usar la propiedad abreviada `animation` para ajustar todas las propiedades de animación a la vez

|  |  |
| --- | --- |
| Valor inicial | `0s` |
| Applies to | todos los elementos y los pseudoelementos `::before` y `::after` |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | Not animatable |

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

Gramatica formal: 
```
animation-duration =   
  <time [0s,∞]>#    
  
```


animation-duration: 6s
animation-duration: 120ms
animation-duration: 1s, 15s
animation-duration: 10s, 30s, 230ms
```

### Valores

`<time>`

El tiempo que tarda la animación en terminar su secuencia. Podemos especificarlo en segundos (usando `s`) o milisegundos (usando `ms`). Si no especificamos la unidad, la sentencia no será válida.


**Nota:** No acepta valores negativos, si los ponemos la sentencia se ignorará. Algunas implementaciones antiguas (con prefijos) pueden considerar los valores negativos como si fueran `0s`.

Ejemplos
--------

Visitar CSS animations para ver algunos ejemplos.

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

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

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

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

Consultar también
-----------------

* Usando animaciones CSS
* `AnimationEvent`
:only-of-type
=============

La pseudo-clase **`:only-of-type`** CSS representa un elemento que no tiene hermanos del mismo tipo.


```css
/\* Selecciona cada <p>, pero solo si es el único \*/
/\* elemento <p> dentro de su padre \*/
p:only-of-type {
  background-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 itemEjemplo
-------

#### HTML


```html
<main>
  <div>Soy un `div` #1.</div>
  <p>Yo soy el único `p` entre mis hermanos.</p>
  <div>Soy un `div` #2.</div>
  <div>
    Soy un `div` #3.
    <i>Yo soy el único hijo `i`.</i>
    <em>Soy un `em` #1.</em>
    <em>Soy un `em` #2.</em>
  </div>
</main>
```


#### CSS


```css
main :only-of-type {
  color: red;
}
```


#### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # only-of-type-pseudo |

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

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

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

* `:only-child`
* `:first-of-type`
* `:last-of-type`
* `:nth-of-type`
outline-offset
==============

Resumen
-------

La propiedad CSS **`outline-offset`** es usada para establecer el espacio entre un contorno `outline` y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

El espacio será transparente (el elemento padre determinará el fondo).

Sintaxis
--------


```css
/\* Valores <length> \*/
outline-offset: 3px;
outline-offset: 0.2em;

/\* Valores globales \*/
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
```

### Valores

`<length>`

La anchura del espacio. Ver `<length>` para unidades posibles. Valores negativos colocan el borde dentro del elemento.

### Sintaxis formal
```

outline-offset =   
  <length>    
  
```

Ejemplos
--------


```css
p {
  outline: dashed thin;
  /\* Mueve el contorno 10px lejos del borde \*/
  outline-offset: 10px;
  border: 1px solid black;
}
```


Html


```html
<p>outline: offset 10px. Border is solid and outline is dashed</p>
```


El código anterior producirá este efecto:

#### Otro ejemplo
```

<p>
  <span style="outline-offset: 1px; outline: green solid 3px;">
    <span style="outline-offset: 1px; outline: blue solid 3px;">
      outline: multiple offsets;
    </span>
  </span>
</p>
```

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-offset |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
-webkit-overflow-scrolling
==========================

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

La propiedad CSS `-webkit-overflow-scrolling` controla si los dispositivos táctiles usan el desplazamiento momentum o inercial (momentum-based scroll) para el elemento dado.

|  |  |
| --- | --- |
| Valor inicial | `auto` |
| Applies to | scrolling boxes |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | discrete |

Valores
-------

`auto`

Usa el desplazamiento (scroll) normal, donde el contenido deja inmediatamente de desplazarse cuando quitas el dedo de la pantalla.

`touch`

Use el desplazamiento momentum o inercial, donde el contenido sigue desplazándose después incluso de haber acabado el gesto de control y de haber quitado el dedo de la pantalla. La velocidad y duración de esta continuación es proporcional a cuán fuerte fue el gesto de desplazamiento o scroll. Además se crea un nuevo contexto de apilado (stacking context).

### Sintaxis Formal

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

### HTML


```html
<div class="scroll-touch">
  <p>This paragraph has momentum scrolling</p>
</div>
<div class="scroll-auto">
  <p>This paragraph does not.</p>
</div>
```

### CSS


```css
div {
  width: 100%;
  overflow: auto;
}

p {
  width: 200%;
  background: #f5f9fa;
  border: 2px solid #eaf2f4;
  padding: 10px;
}

.scroll-touch {
  -webkit-overflow-scrolling: touch; /\* Lets it scroll lazy \*/
}

.scroll-auto {
  -webkit-overflow-scrolling: auto; /\* Stops scrolling immediately \*/
}
```

### Resultado

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

No es parte de ninguna especificación. Apple tiene una descripción en la Referencia CSS de Safari.

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

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

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

* Artículo en CSS-Tricks con ejemplo
* Smashing Magazine- describiendo el efecto del scroll con rebote y cómo funciona en diferentes navegadores
min-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 **`min-block-size`** define el tamaño mínimo horizontal o vertical de un elemento de bloque, dependiendo de los modos de escritura. Esto corresponde ya sea a la propiedad `min-width` o a la propiedad `min-height`, dependiendo del valor de `writing-mode`.

Pruébalo
--------

Sintaxis
--------


```css
/\* <length> values \*/
min-block-size: 100px;
min-block-size: 5em;

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

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

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


Si el modo de escritura es verticalmente orientado, el valor de `min-block-size` se relaciona con el mínimo ancho del elemento; de otra manera, se relaciona al mínimo alto del elemento. Una propiedad relacionada es `min-inline-size`, que define la otra dimensión del elemento.

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

### Valores

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

### Sintaxis formal
```

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

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


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

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-min-block-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: `min-width` y `min-height`
* `writing-mode`
Propiedades personalizadas (--\*): variables CSS
================================================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Learn more
* See full compatibility
* Report feedback
Los nombres de las propiedades que tiene el prefijo `--`, como `--ejemplo-nombre`, representan las *propiedades personalizadas* que contienen un valor que puede ser usado en otras declaraciones usando la función `var()`.

Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.

|  |  |
| --- | --- |
| Valor inicial | see prose |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | as specified with variables substituted |
| Animation type | discrete |

Sintaxis
--------


```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```


`<declaración-valor>`

Este valor coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga un token no permitido.


**Nota:** Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas — `--mi-color` se tratará como una propiedad personalizada separada de `--Mi-color`.

### Sintaxis formal

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

### HTML


```html
<p id="firstParagraph">
  Este párrafo debe tener un fondo azul y un texto amarillo.
</p>
<p id="secondParagraph">
  Este párrafo debe tener un fondo amarillo y un texto azul.
</p>
<div id="container">
  <p id="thirdParagraph">
    Este párrafo debe tener un fondo verde y un texto amarillo.
  </p>
</div>
```

### CSS


```css
:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

### Resultado

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |

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

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

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

* Usando variables CSS
* La función `var()`