From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/_doublecolon_first-line/index.html | 115 +++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 files/pt-br/web/css/_doublecolon_first-line/index.html (limited to 'files/pt-br/web/css/_doublecolon_first-line') diff --git a/files/pt-br/web/css/_doublecolon_first-line/index.html b/files/pt-br/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..e1fc0246ff --- /dev/null +++ b/files/pt-br/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,115 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

O pseudoelemento ::first-line aplica estilos à primeira linha de um elemento no nível do bloco. Observe que o comprimento da primeira linha depende de muitos fatores, incluindo a largura do elemento, a largura do documento e o tamanho da fonte do texto.

+ +
/* Seleciona a primeira linha dentro da tag <p> */
+p::first-line {
+  color: red;
+}
+ +
+

O CSS3 introduziu a notação ::first-line(com dois pontos) para distinguir pseudo-classes de pseudo-elementos. Os navegadores também aceitam  :first-line introduzida no CSS2.

+
+ +

Propriedades permitidas

+ +

Somente um pequeno subconjunto de propriedades CSS pode ser usado com o::first-line pseudo-elemento:

+ + + +

Sintaxe

+ +
{{csssyntax}}
+ +

Exemplos

+ +

HTML

+ +
<p>Os estilos serão aplicados apenas à primeira linha deste parágrafo.
+Depois disso, todo o texto será estilizado normalmente. Entendeu o que eu quis dizer?</p>
+
+<span>A primeira linha deste texto não receberá um estilo especial
+porque não é um elemento no nível do bloco.</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* AVISO: NÃO UTILIZE: */
+  /* Muitas propriedades são inválidas em pseudo-elementos ::first-line */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Examples', 350, 160)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}}Define mais estritamente onde ::first-letter pode ocorrer.
+ Generaliza propriedades permitidas para tipografia, decoração de texto e propriedades de layout embutido e {{cssxref("opacity")}}.
+ Define a herança de::first-letter.
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}Permite o uso de {{cssxref("text-shadow")}} com ::first-letter.
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}Introdução da sintaxe de dois-pontos.
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}Nenhuma mudança.
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}Definição inicial, usando a sintaxe de dois pontos.
+ +

Compatibilidade do navegador

+ +
+ + +

{{Compat("css.selectors.first-line")}}

+
+ +

Veja também

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