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

El pseudo-element CSS code>::first-letter aplica estils a la primera lletra de la primera línia d'un element de nivell de bloc, però només quan no està precedit d'un altre contingut (com ara imatges o taules en línia).

+ +
/* Selecciona la primera lletra d'un <p> */
+p::first-letter {
+  font-size: 130%;
+}
+ +

La primera lletra d'un element no sempre és trivial per identificar:

+ + + +
+

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

+
+ +

Propietats permeses

+ +

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

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Fa que la primera lletra de cada paràgraf sigui en vermell i gran.

+ +

HTML

+ +
<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>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

Resultat

+ +

{{ EmbedLiveSample('Example', '80%', 420) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Genera propietats permeses per a la composició de textos, decoració de text, propietats de disseny en línia, {{ cssxref("opacity") }} i {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Permet l'ús de {{cssxref("text-shadow")}} amb ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introducció de la sintaxi de dos caràcters de dos punts. Definició del comportament de casos limits, com ara en elements de llista o amb idiomes específics (p. ex., el dígraf holandès IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}Cap canvi.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}9.07.01.0 (85)
Antiga sintaxis d'un caràcter de dos punts (:first-letter)1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}5.53.51.0 (85)
Suport per al dígraf holandès IJ{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} {{ bug("92176") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Antiga sintaxis d'un caràcter de dos punts (:first-letter){{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Suport per al dígraf holandès IJ{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

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