recursal/MDN huggingface dataset:
border-left-color
=================

### Resumen

`border-left-color` pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo `transparente`.

* Valor inicial: `color` propiedad
* Se aplica a : todos los elementos
* Heredable: no
* Porcentajes: N/A
* Media: `visual` (en-US)
* Valor calculado: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.
### Sintaxis
```

border-left-color:color | transparent | inherit
```

### Valores

color

El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados

transparent

El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.

### Propiedades parecidas

* `border-color`
* `border-bottom-color`
* `border-right-color` (en-US)
* `border-top-color`
### Examples

Ver El Ejemplo Vivo
```

element {
 width: 300px;
        padding: 15px;
        border-bottom-size: 1px;
        border-bottom-style: solid;
        border-bottom-color: #000;
}
```


```
p {
border-style: solid;
border-left-color: #ff0000
}

p {
border-style: solid;
border-left-color: rgb(255,0,0)
}
```

### Notas

* Color Chart by VisiBone
Selectores de hijo
==================

El combinador `>` separa a dos selectores y busca solo a los elementos que coindicen con el segundo selector y que son hijos **directos** del primero. EN contraste, cuando se combinan dos selectores con el selector de descendiente, la expresión busca elementos que coinciden con el segundo selector y que tienen algun ancestro que coindice con el primero, sin importar el nivel de separación que tengan dentro del DOM.

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

selector1 > selector2 { style properties }
```

Ejemplo
-------


```css
span {
  background-color: white;
}
div > span {
  background-color: DodgerBlue;
}
```



```html
<div>
  <span
 >Span #1, dentro del div.
    <span>Span #2, dentro del span que está en el div.</span>
  </span>
</div>
<span>Span #3, no está dentro del div.</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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

El **selector universal** CSS (`*`) coincide con elementos de cualquier tipo.


```css
/\* Selecciona todos los elementos \*/
\* {
  color: green;
}
```


A partir de CSS3, el asterisco se puede usar en combinación con `namespaces` (en-US):

* `ns|*` - coincide con todos los elementos en el espacio de nombres *ns*
* `*|*` - coincide con todos los elementos
* `|*` - matches all elements without any declared namespace
Sintaxis
--------
```

* { style properties }
```


El asterisco es opcional con selectores simples. Por ejemplo, `*.warning` y `.warning` son equivalentes.

Ejemplos
--------

### CSS


```css
\* [lang^="en"] {
  color: green;
}

\*.warning {
  color: red;
}

\*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/\* despejar automáticamente el siguiente hermano después de un elemento flotante \*/
.floating + \* {
  clear: left;
}
```

### HTML


```html
<p class="warning">
  <span lang="en-us">Un span verde</span> en un párrafo rojo.</span>
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">Un span rojo</span> en un párrafo verde.</span>
</p>
```

### Resultado

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

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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

Las **consultas de medios** le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.

Son un componente clave del responsive design (en-US). Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.

En CSS, use la `@ media` at-rule para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use `@ import` para aplicar condicionalmente una hoja de estilo completa.

### Consultas de medios en HTML

En HTML, las consultas de medios se pueden aplicar a varios elementos:

 En el atributo `<link>` `media` del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).
 En el atributo `<source>` `media` del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos `<picture>`.)
 En el atributo `<style>` del elemento `media`, definen los medios a los que se debe aplicar el estilo.

### Consultas de medios en JavaScript

En JavaScriptpuede usar el método `Window.matchMedia ()` para probar la ventana contra una consulta de medios. También puede usar `MediaQueryList.addListener ()` para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.

Puede obtener más información sobre el uso programático de consultas de medios en Pruebas de consultas de medios. (en-US)

Referencias
-----------

### At-rules

* `@import`
* `@media`
Guides
------

Usando consultas de medios

Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios.

Probando las consultas de medios programáticamente (en-US)

Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador).

Usando consultas de medios en accesibilidad (en-US)

Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web.

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

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

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

* Use `@ apoya` para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS.
border-spacing
==============

### Resumen

La propiedad de `espaciado de borde` especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de separación de borde). Es el equivalente al atributo `cellspacing` en HTML.

* `Valor inicial`: 0
* Se aplica a: tablas y elementos con la propiedad `inline-table`
* `Valor heredado`: sí
* Medio: `visual` (en-US)
* `Valor calculado`: dos largos absolutos.
### Sintaxis

border-spacing: <length> | <length> <length> | inherit

### Valores

* **<length>** : un largo a utilizar para el espaciado horizontal y vertical.
* **<length> <length>** : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).
### Ejemplos

Ver El Ejemplo Vivo
```

table#space {
  border-collapse: separate;
  border-spacing: 10px 5px;
}
```

### Notas

Ésta propiedad sólo se aplica cuando `border-collapse` es especificado en `separate`.

El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.

### Especificaciones

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # separated-borders |

### Compatibilidad con navegadores

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

### Ver también

`border-collapse`
-webkit-text-fill-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
-------

La propiedad CSS -**`webkit-text-fill-color`** especifica el color de relleno de las letras de un texto. Si la propiedad no está establecidad se usará el valor de la propiedad `color`.

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-fill-color |

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

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

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

* Post del blog Surfin' Safari anunciando esta característica
* Artículo de CSS-Tricks explicando esta característica
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
-moz-user-input
===============

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

En las aplicaciones Mozilla , `-moz-user-input` determina si un elemento aceptará entrada por parte del usuario. `user-focus`, una propiedad similar fue propuesta en primeros borradores de un predecesor de la especificación CSS3 UI pero fue rechazada posteriormente por el grupo de trabajo..

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

`-moz-user-input` fue was one of the proposals leading to the proposed CSS 3 `user-input` property, which has not yet reached Candidate Recommendation (call for implementations).

Para elementos que normalmente son receptores de entrada por parte del usuario, como `<textarea>`, el valor inicial de `-moz-user-input` es `enabled`.

Síntaxis
--------


```css
/\* Palabras clave valor \*/
-moz-user-input: none;
-moz-user-input: enabled;
-moz-user-input: disabled;

/\* Valores gloables \*/
-moz-user-input: inherit;
-moz-user-input: initial;
-moz-user-input: unset;
```

### Valores

none

El elemento no responde a la entrada de datos por parte del usuario y no estará `:active`.

enabled

El elemento acepta entrada por parte del usuario. Para cajas de texto es el comportamiento por defecto.

disabled

El elemento no acepta datos del usuario. Sin embargo, no es lo mismo que establecer `disabled` a true, en ese caso el elemento es dibujado normalmente.

### Síntaxis Formal

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


```css
input.example {
  /\* the user will be able to select the text, but not change it. \*/
  -moz-user-input: disabled;
}
```

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

* `-moz-user-focus`
* `-moz-user-modify`
* `-moz-user-select` (en-US)
::-moz-page
===========

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El pseudo-elemento CSS `::-moz-page` se aplica a una página individual que va a ser impresa o que está en previsualización para impresión.

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

No es parte de ninguna especificación.

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

* `::-moz-page-sequence`
* `::-moz-scrolled-page-sequence`
@page
=====

Resumen
-------

La regla @page es usada para modificar algunas propiedades CSS cuando se va a imprimir una página web. No se pueden cambiar todas las propiedades CSS con `@page`, solo los márgenes, las líneas viudas, huérfanas y los saltos de página. Cualquier intento de cambiar otra propiedad será ignorada.

La regla `@page` puede ser accesada por medio de la interfaz modelo objeto `CSSPageRule` (en-US).

**Nota:** La W3C esta discutiendo como manejar las unidades relativas `<length>` : `vh`, `vw`, `vmin`, y `vmax`. Mientras tanto, se recomienda no usarlas en la regla `@page`.

Sintaxis
--------

### Descriptores

`size` (en-US)

Especifica el tamaño y la orientación de la caja objetivo de la página. En general, una caja es representada dentro de una hoja, también indica el tamaño de la hoja destino.

`marks`

Añade marcas de corte y/o registro al documento.

`bleed`

Especifica la extensión más allá de la caja de página a la que se recorta el procesamiento de página.

### Sintaxis Formal
```

@page =   
  @page <page-selector-list>? { <declaration-rule-list> }    
  
<page-selector-list> =   
  <page-selector>#    
  
<page-selector> =   
  [ <ident-token>? <pseudo-page>\* ]!    
  
<pseudo-page> =   
  ':' [ left | right | first | blank ]    
  
```

Ejemplos
--------

Por favor dirígete a las pseudo-classes (en-US) de `@page` por ejemplos.

* `:blank`
* `:first`
* `:left`
* `:right`
* `:recto` 
Experimental
* `:verso` 
Experimental
Especificaciones
----------------

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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

### Resumen

`border-bottom-width` define el ancho del borde inferior de una caja.

* `Valor inicial`: `medio`
* Se aplica a : todos los elementos
* `Valor heredado`: no
* Porcentajes: N/A
* Medio: `visual` (en-US)
* `Valor calculado`: largo absoluto o '0' si el estilo es `none` o `hidden`.
### Sintaxis
```

border-bottom-width: <border-width> | inherit
```

### Valores

thin

un borde fino.

medium

un borde mediano.

thick

un borde grueso.

<length>

El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.

Nota : El valor `em` también es soportada.

### Propiedades relacionadas

* `border-left-style` (en-US)
* `border-right-style` (en-US)
* `border-top-style` (en-US)
* `border-style`
### Ejemplos

Ver El Ejemplo Vivo
```

element {
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #000;
}
```

### Especificaciones

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

### Compatibilidad con navegadores

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

### Ver también

`border-bottom`, `border-color`, `border-bottom-style`, `border-bottom-width`
column-span
===========

La propiedad **`column-span`** CSS hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a `all`.

Pruébalo
--------


```css
/\* Keyword values \*/
column-span: none;
column-span: all;

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


A un elemento que se extiende más de una columna se le llama elemento extendido (*spanning element)*.

Sintaxis
--------

La propiedad `column-span` se especifica como una de las palabras clave listadas a continuación.

### Valores

`none`

El elemento no se extiende en sobre varias columnas.

`all`

El elemento se extiende sobre todas las columnas. El contenido en el flujo normal que aparece antes del elemento se equilibra automáticamente en todas las columnas antes de que aparezca el elemento. El elemento establece un nuevo contexto de formato de bloque..

### Sintaxis formal
```

column-span =   
  none  |  
  all     
  
```

Ejemplo
-------

En este ejemplo, la cabecera se expande sobre todas las columnas del artículo.

### HTML


```html
<article>
  <h2>My Very Special Columns</h2>
  <p>
    This is a bunch of text split into three columns using the CSS `columns`
    property. The text is equally distributed over the columns.
  </p>
</article>
```

### CSS


```css
article {
  columns: 3;
}

h2 {
  column-span: all;
}
```

### Resultado

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

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

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

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

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

La propiedad de CSS **`border-block`** 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-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;
```


`border-block` puede ser usada para establecer los valores de uno o más `border-block-width`, `border-block-style`, y `border-block-color` estableciendo tanto el inicio como el final en la dimensión del bloque 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. Corresponde a las propiedades `border-top` y `border-bottom` o `border-right`, y `border -left`  dependiendo de los valores definidos para  `modo de escritura` ,  `dirección` , y  `orientación de texto`  .

Los bordes en la otra dimensión se pueden establecer con `border-inline`, que establece `border-inline-start`, y `border-inline- fin`.

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

Sintaxis
--------

### Valores

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

`<'border-width'>`

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

`<'border-style'>`

El estilo de la línea del borde. Mirar `border-style`.

`<'color'>`

El color del borde. Mirar `color`.

### Sintaxis formal
```

border-block =   
  <'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-block: 5px dashed blue;
}
```

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

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

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`
::-webkit-slider-runnable-track
===============================

**No estándar:** Esta característica no es parte de los estándares. No la uses en sitios Web en producción: no funcionará para todos los usuarios. Podrían haber también incompatibilidades considerables entre distintas implementaciones y el comportamiento podría cambiar en el futuro.

Resumen
-------

El pseudo-elemento CSS **`::-webkit-slider-runnable-track`** representa el trayecto (la ranura sobre la que se desliza el indicador) de un `<input>` con `type="range"`.

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

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

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

* `::-webkit-slider-thumb`
* Pseudo-elementos similares usados en otros navegadores:
    + `::-ms-track`
    + `::-moz-range-track`
* CSS-Tricks: Dando estilos con CSS a elementos Input de tipo range para que se muestren correctamente en distintos navegadores.
* QuirksMode: Dando estilos y aplicando scripts a elementos deslizantes
max-height
==========

### Resumen

La propiedad `max-height` se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la `altura` pueda llegar a ser más grande que la de `max-height`.

* `Valor inicial`: `ninguno`
* Se aplica a : elementos de bloque o remplazados
* `Valor heredado`: no
* Porcentajes: se refiere a la altura del bloque contenedor.
* Medio: `visual` (en-US)
* `Valor calculado`:
### Sintaxis
```

max-height: <length> | <percentage>
```

### Valores

* **none** : la `altura` no tiene valor máxima.
* **length** : puede ser en px, cm, in (píxel, centímetro o inches)
* **percentage** : % especificado como un porcentaje de la altura del bloque contenedor.
### Ejemplos
```

table { max-width: 75%; }

form { max-width: none; }
```

### Notas

`max-height` sobrescribe `height`, pero **no** `min-height`.

### Especificaciones

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| 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.

### Ver también

`modelo de caja`, `ancho`, `tamaño de cajas -Mozilla` (en-US), `altura mínima`, `altura máxima`
<filter-function>
=================

El tipo de datos CSS **`<filter-function>`** representa un efecto gráfico que puede cambiar la apariencia de una imagen de entrada. Se usa en las propiedades `filter` y `backdrop-filter`.

Sintaxis
--------

El tipo de datos `<filter-function>` se especifica utilizando una de las funciones de filtro enumeradas a continuación. Cada función requiere un argumento que, si no es válido, da como resultado que no se aplique ningún filtro.

`blur()`

Difumina la imagen.

`brightness()`

Hace que la imagen sea más brillante o más oscura.

`contrast()` (en-US)

Aumenta o disminuye el contraste de la imagen.

`drop-shadow()` (en-US)

Aplica una sombra paralela detrás de la imagen.

`grayscale()` (en-US)

Convierte la imagen a escala de grises.

`hue-rotate()` (en-US)

Cambia el tono general de la imagen.

`invert()` (en-US)

Invierte los colores de la imagen.

`opacity()` (en-US)

Hace que la imagen sea transparente.

`saturate()` (en-US)

Super-saturado o desaturado la imagen de entrada.

`sepia()` (en-US)

Convierte la imagen a sepia.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

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

* Propiedades que usan este tipo de datos: `filter` y `backdrop-filter`