6 gängige Textstile in CSS (Zusammenfassung)

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 Kapitel werden die 6 gängigen Textstile in CSS (Zusammenfassung) ausführlich vorgestellt, damit jeder sie in der täglichen Webentwicklung verwenden kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Einzug der ersten Zeile

1. Der Einzug der ersten Zeile dient zum Einrücken der ersten Zeile eines Absatzes Einrückung ist ein häufiger Textformatierungseffekt. Im Allgemeinen stehen beim Schreiben auf Chinesisch zwei Leerzeichen am Anfang, ähnlich wie hier

Hinweis: Dieses Attribut kann negativ sein

2. Verwendung:

text-indent: <length> | <percentage> | inherit;

Anfangswert : 0

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

Vererbung: Ja

Prozentsatz: relativ zur Breite des enthaltenden Blocks

3. Anwendung (Codebeispiel)

Hängender Einzug:

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

Rendering:

Drop cap:

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

Rendering:

2. Horizontale Ausrichtung1. Definition

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

2. Verwendung:

text-align: left | center | right | justify | inherit

Anfangswert: links

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

Vererbung: Ja

Blocksatz

Wenn die horizontale Ausrichtung ausgerichtet ist, wird der Wortabstand möglicherweise so angepasst, dass der Text genau über die gesamte Zeile passt. Wenn Sie einen Längenwert für den Buchstabenabstand angeben, wird der Buchstabenabstand durch die Ausrichtung nicht 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;
}

rrree

Rendering:

3. Wortintervall 1. Das Wortintervall bedeutet Wortabstand, Wird verwendet, um den Abstand zwischen Text oder Wörtern festzulegen. Tatsächlich bedeutet „Wort“ eine Zeichenfolge aus beliebigen Nicht-Leerzeichen, umgeben von einer Art Leerzeichen

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

Hinweis: Wortraum kann ein negativer Wert sein

2. Verwendung

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

Anfangswert: normal (Standard ist 0)

Gilt für: Alle Elemente

Vererbung: Ja

4. Buchstabenintervall

Der Buchstabenabstand bezieht sich auf den ZeichenabstandHinweis: Der Buchstabenabstand kann negative Werte sein

Verwendung:

word-spacing: <length> | normal | inherit

Anfangswert: normal (Standard ist 0)

Gilt für: Alle Elemente

Vererbung: Ja

5. Textkonvertierung

Textkonvertierung wird für die Konvertierung der englischen Groß-/Kleinschreibung verwendet Verwendung:

letter-spacing: <length> | normal | inherit

Anfangswert: keiner

Gilt für: Alle Elemente

Vererbung: Ja

Sechs, Textänderung

1. DefinitionTextmodifikation wird verwendet, um Modifikationslinien für Text bereitzustellen

Hinweis: Die Farbe der Textmodifikationslinie ist dieselbe wie die des Textes Farbe

2. Verwendung

text-transform: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

Anfangswert: keiner

Anwenden auf: alle Elemente

Vererbung: keiner

Geerbt

Textdekorationseigenschaften können nicht vererbt werden, was bedeutet, dass alle Dekorationslinien 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 lediglich.

Hinweis: Es können mehrere nicht widersprüchliche Textänderungszeilen angezeigt werden

7. Zum Schluss

Erste Zeile einrücken (text-index), horizontale Ausrichtung (text-align), Wortabstand (word-spacing), Buchstabenabstand (letter-spacing), Texttransformation (text-transform), Textänderung (text - Dekoration) Unter den sechs Textstilen können die Einrückung der ersten Zeile (Textindex) und die horizontale Ausrichtung (Textausrichtung) nur auf Elemente auf Blockebene (einschließlich Block und Inline-Block) angewendet werden Aufmerksamkeit auf.

Das obige ist der detaillierte Inhalt von6 gängige Textstile in CSS (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!