text-emphasis
=============

La **propiedad** **CSS** de **text-emphasis**, es una propiedad *abreviada* para establecer los valores de text-empahasis-style (en-US) y text-emphasis-color, en una sola declaración.

Esta **propiedad** aplicara el énfasis a cada carácter especificado en el texto del elemento, a excepción de caracteres separados como espacios y caracteres de control .


```css
/\* Valor Inicial \*/
text-emphasis: none; /\* No emphasis marks \*/

/\* <string> valor \*/
text-emphasis: "x";
text-emphasis: "点";
text-emphasis: "\25B2";
text-emphasis: "\*" #555;
text-emphasis: "foo"; /\* Should NOT use. It may be computed to or rendered as 'f' only \*/

/\* Valor de la Palabra Clave \*/
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled sesame;
text-emphasis: open sesame;

/\* Valor de la Palabra clave combinada con un color \*/
text-emphasis: filled sesame #555;

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


La propiedad **text-emphasis** es diferente a la propiedad text-decoration.

Text-decoration no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad **test-emphasis** si hereda, lo que significa que es posible cambiar el **énfasis** para los descendientes.

The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and `text-emphasis` may affect line height when the current leading is not enough for the marks.

**Nota:** `text-emphasis` doesn't reset the value of `text-emphasis-position` (en-US). This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property `text-emphasis-position` (en-US).

|  |  |
| --- | --- |
| Valor inicial | as each of the properties of the shorthand:* `text-emphasis-style` (en-US): `none`
* `text-emphasis-color`: `currentcolor`
 |
| Applies to | all elements |
| Heredable | yes |
| Valor calculado | as each of the properties of the shorthand:* `text-emphasis-style` (en-US): como se especifica
* `text-emphasis-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `text-emphasis-color`: a color
* `text-emphasis-style` (en-US): discrete
 |

Sintaxis
--------

### Valores

`none`

No emphasis marks.

`filled`

The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.

`open`

The shape is hollow.

`dot`

Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).

`circle`

Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`). This is the default shape in horizontal writing modes when no other shape is given.

`double-circle`

Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).

`triangle`

Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).

`sesame`

Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`). This is the default shape in vertical writing modes when no other shape is given.

`<string>`

Display the given string as marks. Authors should not specify more than one *character* in `<string>`. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

`<color>`

Defines the color of the mark. If no color is present, it defaults to `currentColor`.

### Formal syntax
```

text-emphasis =   
  <'text-emphasis-style'>  ||  
  <'text-emphasis-color'>    
  
```

Ejemplos
--------

### A heading with emphasis shape and color

This example draws a heading with triangles used to emphasize each character.

#### CSS


```css
h2 {
  text-emphasis: triangle #d55;
}
```


#### HTML


```html
<h2>This is important!</h2>
```


#### Resultado

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

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

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

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

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

* The longhand properties `text-emphasis-style` (en-US), `text-emphasis-color`.
* The `text-emphasis-position` (en-US) property allowing to define the position of the emphasis marks.