Beispielcode für die gemeinsame Nutzung von sechs sehr nützlichen Textstilen in CSS

Die vorherigen Wörter

Der CSS-Textstil ist eine Stiländerung relativ zum Inhalt. Denn in der Kaskadenbeziehung ist der Inhalt höher als der Hintergrund. Daher ist der Textstil relativ wichtiger. Manche Menschen verstehen den Unterschied zwischen Text und Schriftarten nicht ganz. Einfach ausgedrückt: Text ist Inhalt, und Schriftarten werden verwendet, um diesen Inhalt anzuzeigen. In diesem Artikel werden die textbezogenen Stile

Einrückung der ersten Zeile

Definition

Beim Einzug der ersten Zeile wird die erste Zeile eines Absatzes eingerückt, was ein üblicher Textformatierungseffekt ist. Im Allgemeinen stehen beim Schreiben von Chinesisch am Anfang zwei Leerzeichen, ähnlich wie folgt:

[Hinweis] Dieses Attribut kann ein negativer Wert sein

text-indent

Wert: | Gilt für: Elemente auf Blockebene (. einschließlich Block und Inline-Block)

Vererbung: Ja

Prozentsatz: Relativ zur Breite des enthaltenden Blocks

Anwenden

[Hängender Einzug]

[Großbuchstaben]

p{
    width: 200px;
    border: 1px solid black;
    text-indent: -1em;//关键代码
    padding-left: 1em;//关键代码
}

Horizontale Ausrichtung

p{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
}
p:first-letter{
    font-size: 30px;
    float: left;
}

Definition

Horizontale Ausrichtung ist die horizontale Ausrichtung, die sich auf den Text in einem Element auswirkt

text-align

Wert: links |. rechts | vererben

Anfangswert: links

Gilt für: Elemente auf Blockebene (einschließlich Block und Inline-Block)

Vererbung: Ja

Ausrichtung

Wenn die horizontale Ausrichtung ausgerichtet ist, kann der Wortabstand angepasst werden, sodass der Text ganzflächig ist Linie Leg es einfach hin. Wenn Sie einen Längenwert für den Buchstabenabstand angeben, wird der Buchstabenabstand

nicht von der

-Ausrichtung beeinflusst, es sei denn, der Wert für den Buchstabenabstand ist normal IE-kompatibel

Für IE7-Browser ändert die Verwendung von text-align nicht nur die horizontale Ausrichtung von Text, sondern auch die horizontale Ausrichtung von untergeordneten Elementen auf Blockebene

.box{
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid black;
    text-align: right;
}    .in{
    height: 100px;
    width: 100px;
    background-color: lightgreen;
}

<p class="box">
    <p class="in">测试文字</p></p>

Wortabstand

Der Wortabstand bezieht sich auf den Wortabstand, der zum Festlegen von Text- oder Wortabständen verwendet wird zwischen. Tatsächlich stellt „Wort“ eine Zeichenfolge aus beliebigen Nicht-Leerzeichen dar, umgeben von einer Art Leerzeichen

[Hinweis] Wörter werden durch Leerzeichen getrennt, und der Abstand zwischen Wörtern = Wortabstand + Leerzeichengröße

[Hinweis] Wortabstand kann negativ sein

Wortabstand

Wert: | 🎜> Anfangswert: normal (Standard ist 0)

Gilt für: alle Elemente

Vererbung: Ja

Buchstabenabstand

Der Buchstabenabstand bezieht sich auf den Zeichenabstand

[Hinweis] Der Buchstabenabstand kann negative Werte sein

letter-spacing

Wert: < ; Länge> |. inherit

Anfangswert: normal (Standard ist 0)

Gilt für: alle Elemente

Vererbung: Ja

Texttransformation

Die Textkonvertierung wird für die Umwandlung der englischen Groß-/Kleinschreibung verwendet

texttransformation

Wert: Großbuchstaben (alle Großbuchstaben) | Kleinbuchstaben (alle Kleinbuchstaben) |. none |. none |. initial value: none

Gilt für: all elements 🎜>

Textmodifikation

Definition

Textmodifikation wird verwendet, um dekorative Linien für Text bereitzustellen

[Hinweis] Die Farbe der Textdekorationszeile ist die gleiche wie die Textfarbe

Textdekoration

Wert: keine | |. line -through (underline)] |. inherit

Anfangswert: keine

Gilt für: alle Elemente

Vererbung: keine

Erben

Textdekorationseigenschaften können nicht vererbt werden, was bedeutet, dass alle dekorativen Linien im Text des untergeordneten Elements dieselbe Farbe wie das übergeordnete Element haben. Die Zierlinie im Text des untergeordneten Elements gehört eigentlich zum übergeordneten Element, sie „durchläuft“ es nur.

[Hinweis] Es kann mehrere nicht widersprüchliche Textänderungszeilen geben

Schließlich Einrücken der ersten Zeile (Textindex), Unter den Sechs Textstile mit horizontaler Ausrichtung (text-align), Wortabstand (word-spacing), Buchstabenabstand (letter-spacing), Texttransformation (text-transform) und Textdekoration (text-decoration). Die erste Zeile ist eingerückt (text-index) und die horizontale Ausrichtung (text-align) kann nur auf Elemente auf Blockebene angewendet werden (einschließlich Block und Inline-Block). Dies ist das Wichtigste, was Sie beachten sollten

Das obige ist der detaillierte Inhalt vonBeispielcode für die gemeinsame Nutzung von sechs sehr nützlichen Textstilen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!