From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../ca/web/css/_doublecolon_first-line/index.html | 117 +++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 files/ca/web/css/_doublecolon_first-line/index.html (limited to 'files/ca/web/css/_doublecolon_first-line/index.html') diff --git a/files/ca/web/css/_doublecolon_first-line/index.html b/files/ca/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..065c7dc0f3 --- /dev/null +++ b/files/ca/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,117 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS ::first-line aplica estils a la primera línia d'un element de nivell de bloc. Tingueu en compte que la longitud de la primera línia depèn de molts factors, incloent l'amplada de l'element, l'amplada del document i la mida de la font del text

+ +
/* Selecciona la primera línia d'un <p> */
+p::first-line {
+  color: red;
+}
+ +
+

CSS3 va introduir la notació de ::first-line (de dos caràcters, de dos punts) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :first-line, introduït en CSS2.

+
+ +

Propietats permeses

+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::first-line:

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p>Styles will only be applied to the first line of this paragraph.
+After that, all text will be styled like normal. See what I mean?</p>
+
+<span>The first line of this text will not receive special styling
+because it is not a block-level element.</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* WARNING: DO NOT USE THESE */
+  /* Many properties are invalid in ::first-line pseudo-classes */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{ Spec2('CSS4 Pseudo-Elements')}}Defineix de manera més estricta on pot apareixer una ::first-letter.
+ Generalitza propietats permeses per a composició tipogràfica, decoració de text i propietats de disseny en línia i {{cssxref("opacity")}}.
+ Defineix l'herència de ::first-letter.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{ Spec2('CSS3 Text Decoration')}}Permès lùs de {{cssxref("text-shadow")}} amb ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }}{{ Spec2('CSS3 Selectors') }}Introdueix la sintaxi de dos caràcter de dos punts.
{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }}{{ Spec2('CSS2.1') }}Cap canvi
{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }}{{ Spec2('CSS1') }}La definició inicial fa servir la sintaxi d'un sol caràcter de dos punts.
+ + + +

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

+ +

Vegeu també

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