From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/text-emphasis/index.html | 178 ++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/es/web/css/text-emphasis/index.html (limited to 'files/es/web/css/text-emphasis/index.html') diff --git a/files/es/web/css/text-emphasis/index.html b/files/es/web/css/text-emphasis/index.html new file mode 100644 index 0000000000..94979eb8af --- /dev/null +++ b/files/es/web/css/text-emphasis/index.html @@ -0,0 +1,178 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +translation_of: Web/CSS/text-emphasis +--- +
+

La propiedad CSS  de text-emphasis, es una propiedad abreviada para establecer los valores de text-empahasis-style 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 .

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

+ +
+

text-emphasis doesn't reset the value of {{cssxref("text-emphasis-position")}}. 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 {{cssxref("text-emphasis-position")}}.

+
+ +

{{cssinfo}}

+ +

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

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

A heading with emphasis shape and color

+ +

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

+ +

CSS

+ +
h2 {
+  text-emphasis: triangle #D55;
+}
+ +

HTML

+ +
<h2>This is important!</h2>
+ +

Resultado

+ +

{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Initial definition
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("46")}}[1]25.0{{property_prefix("-webkit")}}{{CompatNo()}}15.0{{property_prefix("-webkit")}}6.1{{property_prefix("-webkit")}}
+ 7.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatGeckoDesktop("46")}}[1]4.4{{property_prefix("-webkit")}}{{CompatNo()}}33{{property_prefix("-webkit")}}7.1
+
+ +

[1] In Firefox 45, it wasn't activated by default: in about:config, the user has to set the preference layout.css.text-emphasis.enabled to true. Activated by default in Firefox 46, this preference was removed in Firefox 49.

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf