diff options
Diffstat (limited to 'files/es/web/css/_doublecolon_first-letter')
| -rw-r--r-- | files/es/web/css/_doublecolon_first-letter/index.html | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/files/es/web/css/_doublecolon_first-letter/index.html b/files/es/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..3e243869b6 --- /dev/null +++ b/files/es/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,135 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-letter' +--- +<div>{{CSSRef}}</div> + +<p>El <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elemento</a> <strong><code>::first-letter</code></strong> aplica estilos a la primera letra de la primera línea un <a href="https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements">elemento de bloque</a>, sólo cuando no es precedido de otro contenido (como imágenes o tablas).</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selecciona la primera letra de <p> */ +p::first-letter { + font-size: 130%; +}</pre> + +<p>La primera letra de un elemento no es siempre fácil de identificar:</p> + +<ul> + <li>La puntuación que precede o sigue inmediatamente a la primera letra se incluye. La puntuación incluyo cualquier caracter Unicode definido on las clases <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), y <em>other punctuation</em> (Po).</li> + <li>Algunos idiomas tienen dígrafos que siempre se capitalizan juntos, como el <code>IJ</code> en holandés. En estos casos, ambas letras del dígrafo deben coincidir con el pseudo-elemento <code>::first-letter</code>. (Esto pobremente implementado en los navegadores; consulte la tabla de compatibilidad).</li> + <li>La combinación del pseudoelemento {{ cssxref("::before") }} y la propiedad {{ cssxref("content") }} podría inyectar texto al inico del elemento. En dicho caso, <code>::first-letter</code> se aplicaría a la primera letra de este contenido generado.</li> +</ul> + +<div class="note"> +<p>CSS3 introdujo la notación<code>::first-letter</code> (con doble dos puntos) para distinguir <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="noopener">pseudo-clases</a> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" rel="noopener">pseudo-elementos</a>. Los navegadores también aceptan<code>:first-letter</code>, introducido en CSS2.</p> +</div> + +<h2 id="Propiedades_permitidas">Propiedades permitidas</h2> + +<p>Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento <code>::first-letter</code>:</p> + +<ul> + <li>Todas las propiedades de fuente: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}</li> + <li>Todas las propiedades de fondo: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}</li> + <li>Todas las propiedades de márgenes: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li> + <li>Todas las propiedades de relleno: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li> + <li>Todas las propiedades de bordes: {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}</li> + <li>La propiedad {{ cssxref("color") }}</li> + <li>Las propiedades {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (sólo si <code>float</code> es <code>none</code>)</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>Hace que la primera letra de cada párrafo sea roja y grande.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt + ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo + dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> +<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> +<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut + aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit + esse molestie consequat.</p> +<p>-El comienzo es un signo de puntuación especial.</p> +<p>_El comienzo es un signo de puntuación especial.</p> +<p>"El comienzo es un signo de puntuación especial.</p> +<p>'El comienzo es un signo de puntuación especial.</p> +<p>*El comienzo es un signo de puntuación especial.</p> +<p>#El comienzo es un signo de puntuación especial.</p> +<p>「特殊的汉字标点符号开头。</p> +<p>《特殊的汉字标点符号开头。</p> +<p>“特殊的汉字标点符号开头。</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">p::first-letter { + color: red; + font-size: 130%; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Generaliza propiedades permitidas, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td> + <td>{{ Spec2('CSS3 Text Decoration')}}</td> + <td>Permite el uso de {{cssxref("text-shadow")}} con <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Introducción de la sintaxis de doble dos puntos. Definición de casos particulares, como con idiomas específicos (ej., el dígrafo holandés <code>IJ</code>).</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Sin cambios.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definición inicial, uso de la sintaxis de doble dos puntos.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<div> + + +<p>{{Compat("css.selectors.first-letter")}}</p> +</div> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>{{cssxref("::first-line")}}</li> +</ul> |