CSS-Absatztext mit Drop Cap_Experience Exchange verschönern

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

Wenn Sie das Gefühl haben, dass es noch nicht klar ist, finden Sie hier eine ausführliche Erklärung:

Zunächst benötigen Sie einen eigenen Text in HTML, sei es in

Sie können ihm eine ID, eine Klasse oder ein direktes Tag zuweisen. Gehen Sie davon aus, dass die ID eines Textabschnitts von Anfang an geschrieben wird >

#article:first-letter {……}

:first-letter ist eine Pseudoklasse, die zum Festlegen der Stylesheet-Eigenschaften des ersten Zeichens im Objekt verwendet wird. Diese Syntax fällt in den Geltungsbereich von CSS2. Einzelheiten finden Sie im „CSS2 Chinese Manual“

Lassen Sie uns über jedes Attribut im Satz im Detail sprechen. Zuerst müssen wir dieses Wort größer machen als die Wörter im Text, sodass die ihm zugewiesene Schriftgröße das 2,5-fache des Textinhalts beträgt. Natürlich können Sie auch zwischen 3-fach und 4-fach wählen und dies nach Ihren eigenen Bedürfnissen modifizieren.

#article:first-letter { font-size:2.5em }

Warum den em-Tag verwenden? Denn manchmal müssen unsere Leser die Textgröße über die Zoomfunktion des Browsers ändern. Wenn sie auf eine bestimmte Größe eingestellt ist, ist sie natürlich unverhältnismäßig. Sie können versuchen, dies zu ändern, um zu sehen, wie es sich anfühlt. Die Größe ist vorhanden, aber die Schriftart ist falsch, dann sollte die Schriftart erhöht und hier die Schriftart Fett hinzugefügt werden.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold;  }

Okay, bisher scheint das erste Wort nicht die Absicht zu haben, zu sinken, daher ist der entscheidende Punkt hier float:left, ja, es bleibt schwebend. Wir müssen wissen, dass ein Objekt, wenn es auf ein Floating-Attribut festgelegt ist, die Eigenschaften eines Elements auf Blockebene aufweist, unabhängig davon, ob es ursprünglich ein Element auf Blockebene ist. Die umgebende Textflussseite, die nicht festgelegt ist, umgibt dieses Objekt. Auch das Umschließen von Bildern in Text verfügt über diese Eigenschaft.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left;  }

Probieren Sie es aus, haben Sie die Drop-Cap gesehen? Natürlich kann man sehen, dass es etwas unordentlich ist. Gibt es noch etwas mehr obendrauf? Machen Sie sich keine Sorgen, richten Sie es mithilfe der Auffüllung so ein, dass oben im Wort mehr Platz bleibt, sodass das erste Wort bündig mit der ersten Zeile abschließt.

Was kann ich zum Schluss noch sagen? Ich habe darüber nachgedacht. Einmal habe ich versucht, das P in

zu implementieren Das Ergebnis ist fehlgeschlagen. Die Schlussfolgerung ist: Wir können das erste Zeichen im Unterobjekt nicht über eine Beschriftungsebene steuern.

Wenn Sie sich für diese Pseudoklasse interessieren, wird Ihnen natürlich empfohlen, weiter zu lernen:

Selektor: erste Zeile { sRules }

Selektor1 Selektor2: erstes Kind { sRules }