Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]

Zusammenfassung: Damit Ihre Webseite schöner aussieht, sehen Sie hier einige häufig verwendete Stile in CSS3. Großartig für Anfänger! Eines Tages erhebt sich der große Felsen mit dem Wind und schwebt bis zu 90.000 Meilen weit! Gemeinsam lernen und gemeinsam weiterkommen!

1. Schriftgrößeneinheit

px (Pixel): Dies ist eine absolute Einheit;

em : 1em entspricht der Breite des Großbuchstaben M im aktuellen übergeordneten Element;

rem : Die Wirkung ist ähnlich wie bei em. 1rem entspricht der Schriftgröße des Stammelements in HTML, nicht des übergeordneten Elements. Es unterstützt neue Browserversionen. Wenn Sie alte Versionen (IE8 und darunter) verwenden, wird empfohlen, die ersten beiden zu verwenden.

2. Schriftstil

font-style : normal (normaler Text)/kursiv (kursiv);

font-weight : nominal (normale Schrift)/fett (fett);

text-transform : ermöglicht Ihnen, die Schriftart für die Transformation festzulegen;

• keine (jede Transformation verhindern)
• Großbuchstaben (den gesamten Text in Großbuchstaben umwandeln)
• Kleinbuchstaben (den gesamten Text in Kleinbuchstaben umwandeln)
• Großschreiben (den ersten Buchstaben aller Wörter groß schreiben)
• volle Breite (alle Glyphen werden auf volle Breite konvertiert)

text-decoration : Textdekoration für die Schriftart festlegen/aufheben

• keine (eventuelle Textdekoration löschen)
• unterstreichen
• Überstrich
• durchgestrichen

Hinweis: Für Linie, Stil und Farbe können mehrere Werte festgelegt werden.

3. Textschatten

text-shdow : 4px 4px 5px rot;

• Eigenschaft 1: Der horizontale Versatz des Schattens vom Originaltext;
• Eigenschaft 2: Der vertikale Versatz des Schattens vom Originaltext;
• Attribut 3: Unschärferadius, höhere Werte bedeuten breitere Schatten;
• Attribut 4: Die Grundfarbe des Schattens;

Hinweis: Ein positiver Versatz verschiebt die Bewegung nach rechts, ein negativer Versatz verschiebt die Bewegung nach links.

Probieren Sie verschiedene Farbtöne aus

Textschatten: -1px -px 1px #aaa,
  0px 4px 1px rgba(0,0,0,0,5),
  4px 4px 5px rgba(0,0,0,0,7),
  0px 0px 7px rgba(0,0,0,0,4);

Das Wirkungsdiagramm sieht wie folgt aus:

4. Textlayout

text-align : steuert, wie Text an seinem Rahmen ausgerichtet wird

• links: linksbündig;
• rechts: rechtsbündig;
• Mitte: zentrierter Text;
• justify: erweitert den Text so, dass alle Textzeilen die gleiche Breite haben. Dieses Attribut sollte mit Vorsicht verwendet werden .

line-height : Legt die Höhe zwischen den einzelnen Textzeilen fest. Sie können einen Wert ohne Einheit festlegen. line-height: 1.5; bedeutet, dass die Textzeilenhöhe auf das 1,5-fache der Schrifthöhe eingestellt wird.

letter-spacing : Legen Sie den Abstand zwischen den Buchstaben fest.

word-spacing : Legen Sie den Abstand zwischen Wörtern fest.

p::erste-Zeile{
    Buchstabenabstand: 2px;
    Wortabstand: 4px;
}

Wie in der folgenden Abbildung gezeigt, ist der erste Satz formatiert, während der letzte Satz nicht formatiert ist.

5. Schauen wir uns einige weitere wichtige Eigenschaften an

Schriftstil

font-variant : Zwischen Kapitälchen und normalem Text umschalten.

font-kerning : Abstandsoptionen ein-/ausschalten;

font-feature-settings : Aktivieren/Deaktivieren verschiedener OpenType-Schriftfunktionen;

font-variant-alternates： steuert die Verwendung alternativer Glyphen für eine bestimmte benutzerdefinierte Schriftart;

font-variant-caps : Steuert die Verwendung alternativer Glyphen für Großbuchstaben;

...

Textlayoutstil

text-indent : Gibt an, wie viel Platz vor der ersten Zeile des Textinhalts gelassen werden soll.

text-overflow : Definiert, wie dem Benutzer angezeigt wird, dass versteckter Überlaufinhalt vorhanden ist.

white-space : definiert, wie mit Leerzeichen und Zeilenumbrüchen innerhalb eines Elements umgegangen wird;

word-break : gibt an, ob innerhalb eines Wortes umgebrochen wird;

...

6. Schriftabkürzung

In der folgenden Reihenfolge: font-style , font-variant , font-weight , font-stretch , font-size , line-height , font-family .

Dabei müssen font-style und font-family angegeben werden, zwischen font-size und line-height muss ein Schrägstrich stehen.

Ein vollständiges Beispiel sieht wie folgt aus:

Schriftart: kursiv normal, fett normal 3em/1,5 Helvetica, Arial, serifenlos;

Oben sind alle wichtigen Wissenspunkte zusammengefasst unter Bezugnahme auf die maßgeblichsten MDN-Webdokumente. Ich hoffe, Sie können sie mit mir teilen. Sollte es unpassende Kommentare geben, könnt ihr diese gerne äußern!

Damit ist dieser Artikel mit der ausführlichen Erläuterung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile] abgeschlossen. Weitere relevante häufig verwendete CSS3-Stile finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!