recursal/MDN huggingface dataset:
::-webkit-meter-even-less-good-value
====================================

**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 `::-webkit-meter-even-less-good-value` da color rojo al elemento meter cuando el valor y el atributo optimum están fuera del rango establecido y en zonas opuestas. Por ejemplo valor < low < high < optimum o valor> high > low > optimum.

Ejemplos
--------


```html
<meter min="0" max="10" value="6">Score out of 10</meter>
```



```css
meter::-webkit-meter-even-less-good-value {
  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
  height: 100%;
  box-sizing: border-box;
}
```


**Nota:** This will only work in Webkit/Blink-based browsers.

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

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

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

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

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

The pseudo-elements used by WebKit/Blink to style other parts of a `<meter>` (en-US) element are as follows:

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
-webkit-mask-origin
===================

**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-mask-origin` determina el origen de una imagen de máscara. El valor de la propiedad `-webkit-mask-position` se interpreta en relación al valor de esta propiedad. No se aplica cuando `-webkit-mask-attachment` es `fixed`.

|  |  |
| --- | --- |
| Valor inicial | `border-box` |
| Applies to | all elements; In SVG, it applies to container elements excluding the `defs` (en-US) element and all graphics elements |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | discrete |

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

mask-origin =   
  <coord-box>#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Valores
-------

padding

Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas "`0 0`" es la esquina superior izquierda del límite del padding, "`100% 100%`" es la esquina inferior derecha.)

border

La posición de la imagen de máscara es relativa al borde.

content

La posición de la imagen de máscara es relativa al contenido.

Ejemplos
--------


```css
.example {
  border: 10px double;
  padding: 10px;
  -webkit-mask-image: url("mask.png");

  /\* La imagen de máscara estará dentro del padding \*/
  -webkit-mask-origin: content;
}
```



```css
div {
  -webkit-mask-image: url("mask1.png"), url("mask2.png");
  -webkit-mask-origin: padding, content;
}
```

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

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

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

`-webkit-mask`, `-webkit-mask-box-image`, `-webkit-mask-attachment`, `-webkit-mask-image`,`-webkit-mask-composite`, `-webkit-mask-repeat`, `-webkit-mask-clip`
-webkit-mask-box-image
======================

**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-mask-box-image` establece la imagen de máscara para la caja del borde de un elemento.

* Valor inicial: none
* Se aplica a : Todos los elementos
* Heredable: no
* Media: `visual` (en-US)
* Valor calculado: tal y como se especfica
Síntaxis
--------
```

-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
```


Where:

<mask-box-image>

``<uri>()` (en-US) | <gradient> | none`

<top> <right> <bottom> <left>

`<length> | <percentage>`

<x-repeat> <y-repeat>

`repeat | stretch | round`

### Valores

<uri>

La localización del recurso imagen que será usada como imagen de máscara..

<gradient>

La función -webkit-gradient que se usará como imagen de máscara.

none

Para especificar que la caja del borde no va a tener imagen de máscara.

<length>

El tamaño del desplazamiento de la imagen de máscara. Ver `<length>` para posibles unidades.

<percentage>

El desplazamiento de la imagen de máscara tiene un valor que se corresponde con un porcentaje de la dimensiones (altura y anchura) del tamaño de la caja del borde.

repeat

La imagen de máscara se repite tanta veces como sean necesarios para cubrir la caja. Puede incluir una imagen parcial si no existe una división exacta con el tamaño de la caja.

stretch

La imagen de máscara se encoge para contener la caja del borde exactamente.

round

Se encoge y repite de tal manera que no existan partes de la imagen de máscara al final de la caja.

Ejemplos
--------


```css
.exampleone {
  -webkit-mask-box-image: url("mask.png");
}

.exampletwo {
  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
```

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

No forma parte de ningún estándar.

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

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

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

`-webkit-mask`, `-webkit-mask-origin`, `-webkit-mask-attachment`,`-webkit-mask-clip`,`-webkit-mask-image`,`-webkit-mask-composite`,`-webkit-mask-repeat`
border-width
============

### Resumen

La propiedad **`border-width`** define el ancho del borde.

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

 border-width: <border-width-value> {1,4} | `heredado`
```

### Valores

**<border-width-value>**

`thin | medium | thick |``largo`

thin

Un borde fino.

medium

Un borde mediano.

thick

Un borde grueso.

<length>

 El grosor de un borde es un valor explícito por lo cual el ancho **no** puede ser nunca negativo.
 Nota: Un valor `em` también es reconocido y soportado.


### Propiedades relacionadas

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

Ver el ejemplo en vivo
```

element {
    border-width: thin;
    border-style: solid;
    border-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`, `border-color`, `border-style`, `border-width`
Selectores de hermanos generales
================================

Resumen
-------

El combinador `~` separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

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

elemento ~ elemento { estilos }
```

Ejemplo
-------


```css
p ~ span {
  color: red;
}
```



```html
<span>Este span no es rojo.</span>
<p>Aquí hay un párrafo.</p>
<code>Aquí hay algo de código.</code>
<span
 >Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten
  el mismo padre.</span
>
```

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

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

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

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

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

* Selectores de hermanos adyacentes (en-US)
right
=====

### Sumario

La propiedad `right` especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

Para los elementos con una posición absoluta (aquellos que tienen la propiedad `position``: absolute` ó `position: fixed`), la propiedad right determina la distancia entre el margen derecho del elemento y el borde derecho de su bloque contenedor.

* Valor inicial: `auto` (en-US)
* Se aplica a: positioned elements
* Heredable: no
* Porcentajes: se refiere al ancho del bloque contenedor.
* Media: `visual` (en-US)
* Valor calculado: valor absoluto, porcentaje ó auto.
### Sintaxis
```

right: <length> | <percentage> | auto | inherit ;
```

### Valores

`<length>`

Una longitud, puede ser un valor negativo, cero, o un valor positivo.

`<percentage>`

Un porcentaje del ancho del bloque contenedor.

### Ejemplos
```

div {
   position: absolute;
   right: 20px;
   height: 200px;
   border: 1px solid #000;
}
```

### Especificaciones

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

### Compatibilidad con navegadores

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

### Ver también

`position`, `top`, `bottom`, `left`
:blank
======

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

**Nota:** El selector `:blank` esta considerado en riesgo, puesto que la CSSWG sigue haciendo cambios.Ver CSSWG issue #1967.

La pseudo-clase CSS **`:blank`** selecciona elementos de entrada vaciós (eg. `<input>` or `<textarea>`).

Sintáxis
--------

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

| Specification |
| --- |
| Selectors Level 4 # blank-pseudo |

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

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

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

* `:empty`
border
======

* « Anterior
* Siguiente »
### Propiedades Constitutivas

Esta es una propiedad abreviada para las siguientes propiedades CSS:

* border-color
* border-style
* border-width
### Resumen

La propiedad `border` permite definir en una única regla todos los bordes de los elementos seleccionados. Se puede utilizar `border` para definir el o los valores siguientes: `border-width`, `border-style`, `border-color`.

* `Valor inicial`: ver propiedades individuales
* Se aplica a: todos los elementos
* `Herencia`: no
* Porcentajes: N/A
* Medio: `visual`
* `Valor calculada`: ver propiedades individuales
### Sintaxis
```

border: [border-width || border-style || border-color | inherit] ;
```

### Valores

`border-width`.

`border-style`.

`border-color`.

### Ejemplos

Ver ejemplo en vivo
```

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

### Notas importantes

Mientras que las propiedades `border-width`, `border-style` y `border-color` admiten hasta cuatro valores diferentes, ésta (*border*) no acepta más de uno por cada propiedad.

### Especificaciones

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

### Compatibilidad con navegadores

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

### Ver también

`border`, `border-color`, `border-style`, `border-width`### Descripción

Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a `border-image` no puede ser realizada mediante el uso de `border`, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a `none`.

La propiedad abreviada `border` es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) `border-width`, `border-style` y `border-color` puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. `border-top)` y lógicas (p. ej. `border-block-start`) del borde.

### Bordes vs. contornos

Los bordes y los contornos son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:

* Los contornos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento.
* De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo.
Selectores de clase
===================

En un documento HTML, los selectores de clase buscan un elemento basado en el contenido de su atributo `class`. El atributo `class` está definido como una lista de elementos separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector.

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

.classname { style properties }
```


Nótese que esto es equivalente al siguiente `selector de atributo`:
```

[class~=classname] { style properties }
```

Ejemplo
-------

### CSS


```css
span.classy {
  background-color: DodgerBlue;
}
```

### HTML


```html
<span class="classy">Aquí hay un span con algo de texto.</span>
<span>Aquí hay otro.</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

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

**Transiciones CSS** es un módulo de CSS que define cómo crear transiciones suaves entre diferentes valores de las propiedades CSS. Permite tanto crearlas como definir su evolución usando funciones relacionadas con el tiempo.

Referencia
----------

### Propiedades

* `transition`
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function` (en-US)
Guías
-----

Using CSS transitions (en-US)

Tutorial donde se explica paso a paso cómo crear transiciones suaves usando CSS. El artículo describe cada propiedad CSS relevante y explica como interactúan entre ellas.

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

| Specification |
| --- |
| CSS Transitions  |

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

* Transiciones relacionadas, CSS Animations pueden producir animaciones independientemente de los cambios en los valores.
Valor especificado
==================

El **valor especificado** (**specified value**) de una propiedad CSS es establecido de una de las siguientes maneras:

1. Si la hoja de estilos del documento tiene un valor especificado para la propiedad, éste será usado. Por ejemplo, si la propiedad `color` es establecida con valor `green`, el color del texto del elemento que corresponda será verde.
2. Si la hoja de estilos del documento no tiene un valor especificado para la propiedad, se heredará del elemento padre (si es posible). Por ejemplo, si tenemos un párrafo (`<p>`) dentro de un `<div>`, y el `<div>` tiene el valor de su propiedad `font` como "Arial", y el `<p>` no tiene definida la propiedad `font`, se heredará la fuente Arial.
3. Si ninguna de las anteriores está disponible, se aplica el valor inicial del elemento segun la especificación CSS.
Especificaciones
----------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-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.
perspective
===========

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

Resumen
-------

La propiedad `perspective` CSS determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z>0 se hace más grande y con z<0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.

Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.

La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad `perspective-origin` (en-US).

Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo contexto de apilamiento.

|  |  |
| --- | --- |
| Valor inicial | `none` |
| Applies to | transformable elements |
| Heredable | no |
| Valor calculado | the absolute length or `none` |
| Animation type | a length |
| Creates stacking context | yes |

Syntax
------
```

Sintaxis Formal: 
```
perspective =   
  none            |  
  <length [0,∞]>    
  
```


```
```

perspective: none
perspective: 20px     /* <longitud> valores */
perspective: 3.5em

perspective: inherited
```

### Valores

`none`

Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada.

`<length>`

Es una `<length>` dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva.

Ejemplos
--------

| `perspective:250px;` | `perspective:350px;` | `perspective:500px;` |
| --- | --- | --- |
| 123456 | 123456 | 123456 |

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-property |

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

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

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

* Usando transformaciones CSS
text-emphasis-color
===================

La propiedad CSS **`text-emphasis-color`** (que podría traducirse como color del texto con énfasis) define el color de las marcas de énfasis. Este valor también puede definirse usando el atajo `text-emphasis`


```css
/\* Valor inicial\*/
text-emphasis-color: currentColor;

/\* <color> \*/
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

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


|  |  |
| --- | --- |
| Valor inicial | `currentcolor` |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | computed color |
| Animation type | a color |

Sintáxis
--------

### Valores

`<color>`

Define el color de las marcas de énfasis. Si ningún color es declarado, el color por defecto es `currentColor` (color actual).

### Sintáxis Formal
```

text-emphasis-color =   
  <color>    
  
```

Ejemplos
--------

### CSS


```css
h3 {
  text-emphasis-color: #555;
  text-emphasis-style: "\*";
}
```

### HTML


```html
<p>Este es un ejemplo:</p>

<h3>Esto está marcado con énfasis!</h3>
```

### Resultado

Ejemplo incrustado en vivoEspecificaciones
----------------

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

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

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

Ver También
-----------

* El tipo de dato `<color>`.
* Las otras propiedades de marcas de énfasis relacioanadas: `text-emphasis-style` (en-US), `text-emphasis`, y `text-emphasis-position` (en-US).
* Otras propiedades relacionadas al color: `color`, `background-color`, `border-color`, `outline-color`, `text-emphasis-color`, `text-shadow`, `caret-color`, y `column-rule-color` (en-US)
* Aplicando color a los elementos HTML utilizando CSS.
border-color
============

* « Anterior
* Siguiente »
### Resumen

la propiedad `border-color` es un atajo para definir el color de los cuatro bordes de un elemento.

* `Valor inicial`: el `color` del elemento en sí
* Se aplica a: todos los elementos
* `Herencia`: no
* Percentages: N/A
* Medio: `visual`
* `Valor calculada`: el valor del `color` por defecto, o lo que se especificó.
### Sintaxis
```

border-color: [ <color> || transparent ]{1,4} | inherit
```

### Valores

<color>

el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.


transparent

el borde no aparece pero ocupa el sitio definido.

Se pueden pasar hasta cuatro valores;

 Con **un** color, los cuatro lados tendrán el mismo.
 Con **dos** colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.
 Con **tres** colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.
 Con **cuatro** colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.

### Ejemplos

Ver El Ejemplo Vivo
```

element {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
```

### Notas

Para poder ver el/los bordes también hay que definir `el ancho` con un valor positivo y `el estilo` con algo visible. (*diferente de `none o hidden`*)

### Especificaciones

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |

### Compatibilidad con navegadores

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

### Extensiones Mozilla

La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.

* `-moz-border-bottom-colors`
* `-moz-border-left-colors` (en-US)
* `-moz-border-right-colors`
* `-moz-border-top-colors`
### Ver también

`border`, `border-color`, `border-style`, `border-width`
Pseudo-classes
==============

Una **pseudoclase CSS** es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo, `:hover` aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.
```

div:hover {
  background-color: #F89B4D;
}
```


Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador (`:visited`, por ejemplo), el estado de su contenido (como `:checked` en algunos elementos de formulario), o la posición del ratón (como `:hover` que permite saber si el ratón está encima de un elemento o no).

**Nota:** En lugar de usar pseudoclases, `pseudo-elements` puede usarse para dar estilo a una *parte específica* de un elemento.

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

selector:pseudoclase { propiedad: valor; }
```


Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.

Indice de las pseudo-clases estándar
------------------------------------

* `:active`
* `:checked`
* `:default`
* `:dir()`
* `:disabled`
* `:empty`
* `:enabled`
* `:first`
* `:first-child`
* `:first-of-type`
* `:fullscreen`
* `:focus`
* `:hover`
* `:indeterminate`
* `:in-range`
* `:invalid`
* `:lang()`
* `:last-child`
* `:last-of-type`
* `:left`
* `:link`
* `:not()`
* `:nth-child()`
* `:nth-last-child()`
* `:nth-last-of-type()`
* `:nth-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:read-only`
* `:read-write`
* `:required`
* `:right`
* `:root`
* `:scope` (en-US)
* `:target`
* `:valid`
* `:visited`
Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |