recursal/MDN huggingface dataset:
font-size
=========

Resumen
-------

La propiedad `font-size` especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades `em` y `ex`.

|  |  |
| --- | --- |
| Valor inicial | `medium` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Heredable | yes |
| Percentages | refer to the parent element's font size |
| Valor calculado | as specified, but with relative lengths converted into absolute lengths |
| Animation type | a length |

Sintaxis
--------

`font-size:` `xx-small` | `x-small` | `small` | `medium` | `large` | `x-large` | `xx-large`

`font-size:` `smaller` | `larger`

`font-size:` <longitud> | <porcentaje> | `inherit`

### Valores

xx-small, x-small, small, medium, large, x-large, xx-large

un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es `medium`). De forma parecida a las sentencias HTML `<font size="1">` hasta `<font size="7">` donde el tamaño por defecto es `<font size="3">`.

larger, smaller

más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.

<longitud>

una unidad positiva de longitud.


<Porcentaje>

un porcentaje positivo del cuerpo de letra del elemento padre.

Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como `longitud` absoluta en unidades distintas a `em` o `ex`. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades `px` (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.

Ejemplos
--------

Ver El Ejemplo Vivo
```

/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
p { font-size: xx-large }

/* Ajusta la cabecera de nivel 1 (h1) a 2,5 veces del tamaño
 * del texto. */
h1 { font-size: 250% }

/* Ajusta el texto incluido en span a 16px */
span { font-size: 16px; }
```

Notas
-----

Las unidades `em` y `ex` en la propiedad `font-size` son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades `em` y los porcentajes se comportan de igual forma cuando hablamos de `font-size`.

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

* CSS 1
* CSS 2.1
* css3-fonts
border-end-start-radius
=======================

**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-end-start-radius`** define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos `writing-mode`, `direction`, y `text-orientation`.


```css
/\* <length> values \*/
/\* With one value the corner will be a circle \*/
border-end-start-radius: 10px;
border-end-start-radius: 1em;

/\* With two values the corner will be an ellipse \*/
border-end-start-radius: 1em 2em;

/\* Global values \*/
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: unset;
```


Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad `border-top-right-radius`.

Sintaxis
--------

### Valores

`<length-percentage>`

Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS `<length>`. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.

### Sintaxis formal
```

border-end-start-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

.exampleText {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-start-radius: 10px;
}
```

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

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

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

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

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

* La propiedad física asignada: `border-top-right-radius`
* `writing-mode`, `direction`, `text-orientation`
margin-inline-start
===================

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

The **`margin-inline-start`** define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades `margin-top` (en-US), `margin-right`, `margin-bottom`, o `margin-left` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Pruébalo
--------

Sintaxis
--------


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

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

/\* Global values \*/
margin-inline-start: inherit;
```


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

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

### Valores

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

### Sintaxis formal
```

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

Ejemplo
-------

### Contenido HTML


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

### Contenido CSS


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

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

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

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

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

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

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

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

Resumen
-------

La propiedad CSS `background-clip` especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a `border-style` o `border-image`); de lo contrario el borde cubre la diferencia.

|  |  |
| --- | --- |
| Valor inicial | `border-box` |
| Applies to | all elements. It also applies to `::first-letter` and `::first-line`. |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | a repeatable list |

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

Sintaxis Formal: 
```
background-clip =   
  <visual-box>#    
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```


```
```

background-clip: border-box
background-clip: padding-box
background-clip: content-box

background-clip: inherit
```

### Valores

`border-box`

El fondo se extiende hasta el borde exterior de el contenedor (pero por debajo de la frontera, en orden z).

`padding-box`

El fondo no se muestra a través del borde (el fondo se extiende hasta el borde exterior del padding).

`content-box`

El fondo se dibuja desde donde inicia el contenido.

Ejemplo
-------

### Contenido HTML


```html
<p class="border-box">The yellow background extends behind the border.</p>
<p class="padding-box">
  The yellow background extends to the inside edge of the border.
</p>
<p class="content-box">
  The yellow background extends only to the edge of the content box.
</p>
```

### Contenido CSS


```css
p {
  border: 5px navy;
  border-style: dotted double;
  margin: 2em;
  padding: 2em;
  background: #f8d575;
}
.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}
```


#### Salida

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

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

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

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

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

* `clip`
* Modelo de caja CSS (en-US)
outline-width
=============

Resumen
-------

La propiedad CSS **`outline-width`** es usada para establecer el grosor del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento:

|  |  |
| --- | --- |
| Valor inicial | `medium` |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | an absolute length; if the keyword `none` is specified, the computed value is `0` |
| Animation type | a length |

Sintaxis
--------


```css
/\* Valores clave \*/
outline-width: thin;
outline-width: medium;
outline-width: thick;

/\* Valores <length> \*/
outline-width: 1px;
outline-width: 0.1em;

/\* Valores globales \*/
outline-width: inherit;
```

### Valores

`thin`

Depende del Agente Usuario. Generalmente **1px** en navegadores de escritorio como Firefox.

`medium`

Depende del Agente Usuario. Generalmente **3px** en navegadores de escritorio como Firefox.

`thick`

Depende del Agente Usuario. Generalmente **5px** en navegadores de escritorio como Firefox.

`<length>`

Ver valores `<length>`.

### Sintaxis formal
```

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

Ejemplos
--------

Contenido HTML


```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="twoem">2em</span>
```


Contenido CSS


```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#twoem {
  outline-width: 2em;
}
```

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

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

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

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

Resumen
-------

La propiedad de CSS **`border-top`** es una abreviatura que establece los valores de `border-top-color`, `border-top-style` (en-US), y `border-top-width` (en-US). Estas propiedades las características del borde superior de un elemento.

**Nota:** Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.

Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:


```css
border-top: none thick green;
```


es lo mismo que


```css
border-top: thick green;
```


y el valor de `border-top-style` (en-US) establecido antes de `border-top` es ignorado.

El no especificar la parte de border-style que está destinada a establecer el valor de `border-top-style` (en-US) significa que se tomará el valor por defecto, lo que significa que el `border-top-style` (en-US) será `none.`

También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de `border-top-style` (en-US) dado que al indicar `border-top` se establecerá implicitamente el valor de `border-top-style` (en-US) a `none`


```css
border-top-style: dotted;
border-top: thick green;
```


|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `border-top-width` (en-US): `medium`
* `border-top-style` (en-US): `none`
* `border-top-color`: `currentcolor`
 |
| Applies to | all elements. It also applies to `::first-letter`. |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `border-top-width` (en-US): the absolute length or `0` if `border-top-style` (en-US) is `none` or `hidden`
* `border-top-style` (en-US): como se especifica
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-top-color`: a color
* `border-top-style` (en-US): discrete
* `border-top-width` (en-US): a length
 |

Sintaxis
--------


```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
```

### Valores

`<br-width>`

See `border-top-width` (en-US).

`<br-style>`

See `border-top-style` (en-US).

`<color>`

See `border-top-color`.

### Sintaxis formal
```

border-top =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Ejemplos
--------


```css
element {
  border-top: 1px solid #000;
}
```

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.
list-style
==========

Resumen
-------

La propiedad de estilo de lista (`list-style`) permite definir de golpe todos los parámetros: `list-style-type`, `list-style-image`, y `list-style-position`.

* `Valor inicial`: ver propiedades individuales
* Se aplica a: elementos con 'display: list-item'
* `Valor heredado`: no
* Porcentajes: N/A
* Medio: `visual`
* `Valor calculado`: ver propiedades individuales
Sintaxis
--------

list-style: [ list-style-type || list-style-position || list-style-image ] | inherit

### Valores

ver `list-style-type`.

ver `list-style-image`.

ver `list-style-position`.

Ejemplos
--------

### HTML


```html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>
```

### CSS


```css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}
```

### Resultado

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

* CSS 1 (en)
* CSS 2.1 (en)
* css3-lists (en)
Compatibilidad con navegadores
------------------------------

### Ver también

`list-style-type`, `list-style-image`, `list-style-position`
-webkit-print-color-adjust
==========================

**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 propiedad CSS `-webkit-print-color-adjust` es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.

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

-webkit-print-color-adjust: economy | exact
```

### Valores

`economy`

Comportamiento normal. Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión.

`exact`

Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada.

Herencia
--------

Esta propiedad es heredada (en-US).

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

Aún no es parte de ninguna especificación aunque hay una propuesta en la wiki de CSSWG para que sea estandarizada.

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

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

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

* WebKit bug 64583: "WIP: Añade la propiedad CSS para controlar la impresión de fondos de elementos individuales"
* CSSWG wiki: print-backgrounds - una propuesta para estandarizar esta propiedad
* Módulo Color CSS Nivel 4: la propiedad `color-adjust` una propuesta más nueva para estandarizar esta propiedad
grid-column-gap
===============

La propiedad CSS **`grid-column-gap`** especifica el gutter (en-US) entre grid columns.


```css
/\* <length> values \*/
grid-column-gap: 20px;
grid-column-gap: 1em;
grid-column-gap: 3vmin;
grid-column-gap: 0.5cm;

/\* <percentage> value \*/
grid-column-gap: 10%;

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


El efecto es como si las grid lines afectadas adquieren una anchura específica: Los grid track (en-US) entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

|  |  |
| --- | --- |
| Valor inicial | `normal` |
| Applies to | multi-column elements, flex containers, grid containers |
| Heredable | no |
| Percentages | refer to corresponding dimension of the content area |
| Valor calculado | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a length, percentage or calc(); |

Syntax
------

### Valores

`<length-percentage>`

Es el ancho del canal que separa las columnas de la grilla. `<percentage>` valores son relativos a la dimensión del elemento.

### Sintaxis formal
```

column-gap =   
  normal                     |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Ejemplo
-------

HTML


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


CSS


```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-column-gap: 20px;
}

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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |
| CSS Grid Layout Module Level 2 # gutters |
| CSS Multi-column Layout Module Level 1 # column-gap |

Compatibilidad en navegadores
-----------------------------

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

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

* Propiedades CSS relacionadas: `grid-row-gap` (en-US), `grid-gap`
* Guía sobre CSS Grid Layout: *Conceptos básicos sobre CSS Grid Layout - Gutters*
-webkit-tap-highlight-color
===========================

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

**`-webkit-tap-highlight-color`** es una propiedad CSS no estándar que fija el color que sirve para destacar un enlace cuando se golpea sobre él (normalmente con el dedo en dispositivos táctiles). Ese color destacado indica que se ha presionado correctamente e indica el elemento sobre el cuál se ha golpeado.

|  |  |
| --- | --- |
| Valor inicial | `black` |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | discrete |

Síntaxis
--------


```css
-webkit-tap-highlight-color: red;
```

### Valores

Un `color value`.

### Síntaxis Formal

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

*No es parte de ninguna especificación.* Apple tiene una descripción en la Guía Web de Contenidos sobre Safari.

Compatibilidad con los distintos navegadores
--------------------------------------------

Soportado por WebKit/Safari, Blink/Chrome, y y algunas versiones de Internet Explorer y Microsoft Edge.
background-color
================

### Resumen

`Background-color` es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra clave `transparent`.

* `Valor inicial`: transparente
* Se aplica a: todos los elementos
* `Herencia`: no
* Percentages: N/A
* Medio: `visual`
* `Valor calculado`: como se haya especificado
### Sintaxis
```

background-color: color | transparent | inherit
```

### Valores

<color>

Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.


transparent

El valor por defecto del color de fondo (`background-color`) es `transparent` tomando así el color del elemento que está justo debajo de él en el apilamiento.

Ejemplos
--------

### HTML


```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS


```css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### Result

### Especificaciones

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

### 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`