blob: bcd306e8f860c69f46ce32da8c74c59a04eba7a3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: '::cue'
slug: 'Web/CSS/::cue'
tags:
- '::cue'
- Archivos multimedia
- CSS
- Formato de pistas de texto para la web
- Pseudo-elemento
- Referencia
- Selector
- WebVTT
- anotaciones
- subtítulos
translation_of: 'Web/CSS/::cue'
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">El <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> señala las pistas de texto <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> dentro del elemento seleccionado. Esto puede ser usado para <a href="https://wiki.developer.mozilla.org/es/docs/Web/API/WebVTT_API#Estilizando_anotaciones_WebVTT">estilizar subtítulos y otras pistas de texto</a> multimedia con pistas de texto.</span></p>
<pre class="brush: css no-line-numbers notranslate">::cue {
color: yellow;
font-weight: bold;
}</pre>
<p>Las propiedades son aplicadas al cojunto completo de anotaciones como si fuesen una unidad. La única excepción es que <code>background</code> y sus versiones largas se aplican a cada pista de texto individualmente para evitar crear cajas y oscurecer inesperadamente grandes partes de los archivos multimedia.</p>
<h2 id="Sintaxis">Sintaxis</h2>
{{CSSSyntax}}
<h2 id="Propiedades_permitidas">Propiedades permitidas</h2>
<p>Las reglas cuyos selectores incluyen este elemento solo pueden usar las siguientes propiedades CSS:</p>
<ul>
<li><a href="/en-US/docs/Web/CSS/background"><code>background</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-attachment"><code>background-attachment</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-clip"><code>background-clip</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-color"><code>background-color</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-image"><code>background-image</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-origin"><code>background-origin</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-position"><code>background-position</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-repeat"><code>background-repeat</code></a></li>
<li><a href="/en-US/docs/Web/CSS/background-size"><code>background-size</code></a></li>
<li><a href="/en-US/docs/Web/CSS/color"><code>color</code></a></li>
<li><a href="/en-US/docs/Web/CSS/font"><code>font</code></a></li>
<li><a href="/en-US/docs/Web/CSS/font-family"><code>font-family</code></a></li>
<li><a href="/en-US/docs/Web/CSS/font-size"><code>font-size</code></a></li>
<li><a href="/en-US/docs/Web/CSS/font-stretch"><code>font-stretch</code></a></li>
<li><a href="/en-US/docs/Web/CSS/font-style"><code>font-style</code></a></li>
<li><a href="/en-US/docs/Web/CSS/font-variant"><code>font-variant</code></a></li>
<li><a href="/en-US/docs/Web/CSS/font-weight"><code>font-weight</code></a></li>
<li><a href="/en-US/docs/Web/CSS/line-height"><code>line-height</code></a></li>
<li><a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a></li>
<li><a href="/en-US/docs/Web/CSS/outline"><code>outline</code></a></li>
<li><a href="/en-US/docs/Web/CSS/outline-color"><code>outline-color</code></a></li>
<li><a href="/en-US/docs/Web/CSS/outline-style"><code>outline-style</code></a></li>
<li><a href="/en-US/docs/Web/CSS/outline-width"><code>outline-width</code></a></li>
<li><a href="/en-US/docs/Web/CSS/ruby-position"><code>ruby-position</code></a></li>
<li><a href="/en-US/docs/Web/CSS/text-combine-upright"><code>text-combine-upright</code></a></li>
<li><a href="/en-US/docs/Web/CSS/text-decoration"><code>text-decoration</code></a></li>
<li><a href="/en-US/docs/Web/CSS/text-decoration-color"><code>text-decoration-color</code></a></li>
<li><a href="/en-US/docs/Web/CSS/text-decoration-line"><code>text-decoration-line</code></a></li>
<li><a href="/en-US/docs/Web/CSS/text-decoration-style"><code>text-decoration-style</code></a></li>
<li><a href="/en-US/docs/Web/CSS/text-decoration-thickness"><code>text-decoration-thickness</code></a></li>
<li><a href="/en-US/docs/Web/CSS/text-shadow"><code>text-shadow</code></a></li>
<li><a href="/en-US/docs/Web/CSS/visibility"><code>visibility</code></a></li>
<li><a href="/en-US/docs/Web/CSS/white-space"><code>white-space</code></a></li>
</ul>
<h2 id="Ejemplos">Ejemplos</h2>
<h3 id="Estilizando_las_anotaciones_WebVTT_como_blanco_sobre_negro">Estilizando las anotaciones WebVTT como blanco sobre negro</h3>
<p>El siguiente CSS ajusta el estilo de las anotaciones para que el texto sea blanco y el fondo sea una caja negro translúcido.</p>
<pre class="brush: css notranslate">::cue {
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
}</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th>Especificacion</th>
<th>Estado</th>
<th>Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
<td>{{Spec2("WebVTT")}}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>
<p>{{Compat("css.selectors.cue")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="/en-US/docs/Web/API/WebVTT_API">Formato de pistas de texto para la web (WebVTT)</a></li>
<li>{{HTMLElement("track")}}, {{HTMLElement("video")}}</li>
</ul>
|
