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

Resumen
-------

La propiedad **`font-weight`** de CSS especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en `normal` y `bold`.

|  |  |
| --- | --- |
| Valor inicial | `normal` |
| Applies to | all elements and text. It also applies to `::first-letter` and `::first-line`. |
| Heredable | yes |
| Valor calculado | the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value |
| Animation type | a font weight |

Sintaxis
--------


```css
font-weight: normal;
font-weight: bold;

/\* Relativo al padre \*/
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

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

### Valores

normal

Peso/grueso normal de la fuente. Igual que 400.

bold

Grueso ancho (*negrita*). Igual que 700.

lighter

Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).

bolder

Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).

100, 200, 300, 400, 500, 600, 700, 800, 900

Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que `normal - bold`. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.

Ejemplos
--------

### HTML


```html
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, 'and what
  is the use of a book,' thought Alice 'without pictures or conversations?'
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>
```

### CSS


```css
/\* Poner texto del párrafo en negrita. \*/
p {
  font-weight: bold;
}

/\* Poner texto del div a dos pasos más oscuro que lo
 normal pero menos que una negrita estándar. \*/
div {
  font-weight: 600;
}

/\* Sets text enclosed within span tag
 to be one step lighter than the parent. \*/
span {
  font-weight: lighter;
}
```

### Resultado

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

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

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

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

Resumen
-------

El tipo de dato CSS `<frequency>` denota una dimensión en frecuencia, como el tono de una voz hablando. Consisste en un valor `<number>` seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

Las siguientes unidades deben ser usadas:

* `Hz`, que representa una frecuencia en Hertz. Ejemplos: `0Hz`, `1500Hz`, `10000Hz`.
* `kHz`, que representa una frecuencia en kilohertz. Ejemplos: `0kHz`, `1.5kHz`, `10kHz`.

Aunque todas las unidades representen la misma frecuencia para el valor `0`, la unidad no debe ser omitida en ese caso, puesto que no es un valor `<length>`: `0`, no es válido, y no representa `0Hz`, `0kHz`. Aunque las unidades sean insensibles a mayúsculas en CSS, es buena práctica usar una H mayúscula para `Hz` y `kHz`, como indica el SI, siendo Hertz un apellido.

Ejemplos
--------

### Valores de frecuencia permitidos

| Código | Significado |
| --- | --- |
| `12Hz` | Entero positivo. |
| `-456kHz` | Entero negativo. |
| `4.3Hz` | No entero. |
| `14KhZ` | La unidad es insensible al uso de mayúsculas, aunque no se recomienda una representación que no esté acorde al SI. |
| `+0Hz` | Cero, con un símbolo `+ y la unidad`. |
| `-0kHz` | Cero, con un símbolo `-` y la unidad (Aunque no sea común, es un valor permitido). |

### Valores de frecuencia no permitidos

| Código | Significado |
| --- | --- |
| `12.0` | Éste es un tipo `<number>`, no un tipo <frequency>, debe tener una unidad. |
| `7 Hz` | No se permite espacio entre el número `<number>` y la unidad. |
| `0` | El valor cero puede ser escrito sin unidad solo para tipo `<length>`, no para <frequency>. |

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

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

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

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

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

The `-moz-orient` CSS especifica la orientación del elemento al que se aplica.

|  |  |
| --- | --- |
| Valor inicial | `inline` |
| Applies to | any element; it has an effect on `progress` and `meter`, but not on <input type="range"> or other elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

Sintaxis
--------

Error: could not find syntax for this item### Valores

`inline`

El elemento se representa en la misma dirección que el eje del texto : horizontal para los modos de escritura horizontales , verticalmente para los modos de escritura vertical .

`block`

El elemento se representa de forma ortogonal al eje del texto : verticalmente para los modos de escritura horizontal , horizontal para los modos de escritura vertical .

`horizontal`

El elemento se representa horizontalmente.

`vertical`

El elemento se representa verticalmente.

Ejemplos
--------

### HTML


```html
<p>The following progress meter is horizontal (the default):</p>
<progress max="100" value="75"></progress>

<p>The following progress meter is vertical:</p>
<progress class="vert" max="100" value="75"></progress>
```

### CSS


```css
.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}
```

### Resultado

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

Aunque somete al W3C , con retroalimentación positiva inicial , esta propiedad no es todavía parte de ninguna especificación ; Actualmente , esto es una extensión de Mozilla-specific (that is, `-moz-orient`).

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

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

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

* `box-orient` (en-US)
border-collapse
===============

### Resumen

La propiedad `border-collapse` se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar.

En el modelo de fusión, las celdas adyacentes comparten los mismos bordes

En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del `espaciado de borde`).

* `Valor inicial`: `separado`
* `Valor heredado`: Yes
* Media: `visual` (en-US)
* `Valor calculado`:
### Sintaxis
```

border-collapse: value
```

### Valores

* **inherit** : Define explícitamente el valor como heredada del elemento padre.
* **separate** : Utiliza el modo de presentación de separación de borde.
* **collapse** : Utiliza el modo de presentación de fusión de borde
### Ejemplos

Ver El Ejemplo Vivo
```

<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
```


```
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">
```

### Notas

En el modelo de fusión, el valor del `estilo de borde` de `inset` se comporta como `groove`, y `outset` como `ridge`.

CSS 2 especifica que el valor inicial para esta propiedad es `collapse`, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera `separate`.

### Especificaciones

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |

### Compatibilidad con navegadores

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

### Ver también

`border-spacing`
:-moz-drag-over
===============

**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-drag-over` se usa para editar un elemento cuando se produce un evento de arrasttar (drag) sobre él.

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

element:-moz-drag-over { propiedades del estilo }
```

Ejemplo
-------

### CSS


```css
td:-moz-drag-over {
  color: red;
}
```

### HTML


```html
<table border="1">
  <tr>
    <td width="100px" height="100px">Arrastra aquí</td>
  </tr>
</table>
```

### Resultado
Valor real
==========

Resumen
-------

El **valor real** (**actual value**) de una propiedad CSS es el valor usado una vez que se aplican todas las aproximaciones. Por ejemplo, tal vez un agente usuario solo puede renderizar bordes con un valor de píxel entero, y se vería forzado a calcular la aproximación de la anchura del borde.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

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

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

**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`** es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.


```css
border-inline: 1px;
border-inline: 2px dotted;
border-inline: medium dashed blue;
```


`border-inline` puede ser usada para establecer los valores de uno o más de `border-inline-width`, `border-inline-style`, y `border-inline-color` estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades `border-top` y `border-bottom` o `border-right`, and `border-left` dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

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

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `border-inline-width`: `medium`
* `border-inline-style`: `none`
* `border-inline-color`: `currentcolor`
 |
| Applies to | all elements |
| Heredable | no |
| Valor calculado | as each of the properties of the shorthand:* `border-inline-width`: absolute length; `0` if the border style is `none` or `hidden`
* `border-inline-style`: como se especifica
* `border-inline-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-inline-color`: by computed value type
* `border-inline-style`: discrete
* `border-inline-width`: by computed value type
 |

Sintaxis
--------

### Valores

El `border-inline` es especificado con uno o más de los siguientes valores, en cualquier orden:

`<'border-width'>`

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

`<'border-style'>`

La línea de estilo del borde. Mira `border-style`.

`<'color'>`

El color del borde. Mira `color`.

### Sintaxis formal
```

border-inline =   
  <'border-block-start'>    
  
```

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-rl;
  border-inline: 5px dashed blue;
}
```

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

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

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`, `border-right`, `border-bottom`, o `border-left`.
* `writing-mode`, `direction`, `text-orientation`
widows
======

La propiedad CSS **`widows`** especifica el número minimo de lineas en un contenedor de bloques que se deben mostrar en la parte superior de la pagina (en-US), region o columna. Esta propiedad se usa normalmente para controlar como se producen las pausas.


```css
/\* valores <enteros> \*/
widows: 2;
widows: 3;

/\* valores globales \*/
widows: inherit;
widows: initial;
widows: unset;
```


**Nota:** En la tipografia, un *widow* is la ultima linea de un paragrafo que aparece solo en la parte superior de la pagina.

|  |  |
| --- | --- |
| Valor inicial | `2` |
| Applies to | block container elements |
| Heredable | yes |
| Valor calculado | como se especifica |
| Animation type | by computed value type |

Sintaxis
--------

### Valores

`<integer>`

The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.

### Sintaxis Formal
```

widows =   
  <integer [1,∞]>    
  
```

Ejemplo
-------

### HTML


```html
<div>
  <p>Este es el primer paragrafo que contiene algun texto.</p>
  <p>
    Este es el segundo paragrafo que contiene algún texto mayor que el primero.
    Es usado para desmostrar como trabaja widows.
  </p>
  <p>
    Este es el tercer paragrafo. Es un poco mas extenso en texto que el primero.
  </p>
</div>
```

### CSS


```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```

### Resultado

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

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

* `orphans` (en-US)
* Medio paginados (en-US)
:placeholder-shown
==================

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

La pseudo-clase (en-US) **`:placeholder-shown`** de CSS representa cualquier elemento `<input>` o `<textarea>` que esté mostrando actualmente el texto de marcador de posición (placeholder).


```css
/\* Selecciona cualquier elemento con un placeholder activo \*/
:placeholder-shown {
  border: 2px solid silver;
}
```

Sintaxis
--------

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

### Ejemplo básico

#### HTML


```html
<input placeholder="¡Escribe algo aquí!" />
```


#### CSS


```css
input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}
```


#### Resultado

### Texto desbordante

En pantallas angostas como teléfonos inteligentes, el ancho de los cuadros de búsqueda y otros campos de formulario pueden acortarse drásticamente. Esto puede provocar que el texto de marcador de posición se recorte de una manera no deseada. A menudo es útil alterar este comportamiento con la propiedad `text-overflow`.

#### HTML


```html
<input placeholder="¡Ingresa algo en este campo, por favor!" />
```


#### CSS


```css
input:placeholder-shown {
  text-overflow: ellipsis;
}
```


#### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # placeholder |

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

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

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

* El pseudo-elemento `::placeholder` estiliza el placeholder *por sí mismo*.
* Elementos HTML relacionados: `<input>`, `<textarea>`
* `:-moz-placeholder` (en-US), `::-moz-placeholder` (en-US)
* Formularios HTML (en-US)
padding-block-start
===================

**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 **`padding-block-start`** define el bloque lógico de inicio de relleno de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades `padding-top`, `padding-right` (en-US), `padding-bottom`, or `padding-left` (en-US) dependiendo de los valores definidos por `writing-mode`, `direction`, y `text-orientation`.

Esto se relaciona con `padding-block-end`, `padding-inline-start`, y `padding-inline-end`, que define los otros rellenos del elemento.

Pruébalo
--------

Sintaxis
--------


```css
/\* <length> values \*/
padding-block-start: 10px; /\* An absolute length \*/
padding-block-start: 1em; /\* A length relative to the text size \*/

/\* <percentage> value \*/
padding-block-start: 5%; /\* A padding relative to the block container's width \*/

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


|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | all elements, except `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` and `table-column` |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | as `length` |
| Animation type | a length |

### Valores

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

### Sintaxis formal
```

padding-block-start =   
  <'padding-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;
  padding-block-start: 20px;
  background-color: #c8c800;
}
```

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

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

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: `padding-top`, `padding-right` (en-US), `padding-bottom`, y `padding-left` (en-US)
* `writing-mode`, `direction`, `text-orientation`
:-moz-handler-disabled
======================

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

`:-moz-handler-disabled` selecciona elementos que no pueden ser mostrados porque sus manejadores han sido deshabilitados por el usuario.

Es útil principalmente para desarrolladores de temas.

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

* `:-moz-handler-blocked`
* `:-moz-handler-crashed`
inset-inline
============

**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 **`inset-inline`** define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. 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-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /\* value applied to start and end \*/

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

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

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


La abreviación para la otra dimensión es `inset-block`, que es la abreviación para `inset-block-start`, y `inset-block-end`.

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `inset-inline-start`: `auto`
* `inset-inline-end`: `auto`
 |
| Applies to | positioned elements |
| Heredable | no |
| Percentages | logical-width of containing block |
| Valor calculado | as each of the properties of the shorthand:* `inset-inline-start`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
* `inset-inline-end`: same as box offsets: `top`, `right`, `bottom`, `left` properties except that directions are logical
 |
| Animation type | a length, percentage or calc(); |

Sintaxis
--------

### Valores

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

### Sintaxis formal
```

inset-inline =   
  <'top'>{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;
  position: relative;
  inset-inline: 20px 50px;
  background-color: #c8c800;
}
```

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

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

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`