Ausführliche Erläuterung häufig verwendeter textlayoutbezogener Eigenschaften im CSS-Layout

Dieser Artikel enthält eine detaillierte Erklärung häufig verwendeter Textlayout-Attribute im CSS-Layout. Ich hoffe, dass er für Freunde hilfreich ist.

Detaillierte Erläuterung häufig verwendeter Textlayout-bezogener Attribute im CSS-Layout

1. Verwenden Sie Schriftart usw., um Schriftart, Farbe, Größe usw. festzulegen.

font-style legt Kursivschrift fest, z. B. „font-style: italic;“ Legen Sie die Textgröße fest, z. B. „font-size: 12px“ (oder 9pt, siehe CSS-Handbuch für verschiedene Anzeigeprobleme bei Einheiten).

line-height Legen Sie den Zeilenabstand fest, z. B. „line-height“: 150 % ;

Farbe legt die Textfarbe fest (Hinweis, nicht Schriftfarbe), z. B. Farbe: Rot;

Schriftfamilie legt die Schriftart fest, z. B. Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song-Stil, serifenlos (dies ist die übliche Schreibmethode)

2. Absatzformatierung: Verwenden Sie Rand, Abstand und Textausrichtung.

Chinesische Absätze verwenden das

-Tag (oder andere Container) auf der linken und rechten Seite (entspricht dem Einzug) und den Leerraum vor und nach dem Absatz. Zum Beispiel:

Beispielcode

p{
margin: 18px 6px 6px 18px;
/*分别是上、右、下、左，十二点开始的顺时针方向*/
}

Die Textausrichtungsmethode verwendet Textausrichtung, zum Beispiel:

Beispielcode

p{
text-align: center; /*居中对齐*/
}

Die Ausrichtungsmethoden umfassen links und richtig und rechtfertigen (beide Enden rechtfertigen)

3. Vertikaler Text: Schreibmodus verwenden.

Das Schreibmodus-Attribut hat zwei Werte: lr-tb und tb-rl. Ersteres ist die Standardeinstellung links-rechts, oben-unten und letzteres ist oben-unten, rechts-links.

Zum Beispiel:

Beispielcode

p{
writing-mode: tb-rl;
}

kann mit Richtungssatz kombiniert werden.

4. Probleme mit Aufzählungszeichen: Listenstil verwenden

In CSS umfassen Aufzählungszeichen Kreis (voller Punkt), Kreis (leerer Kreis), Quadrat (durchgezogenes Quadrat) und Dezimalzahl (arabische Ziffern). , Lower-Roman (römische Kleinbuchstaben), Upper-Roman (römische Großbuchstaben), Lower-Alpha (englische Kleinbuchstaben), Upper-Alpha (englische Großbuchstaben), none (keine). Setzen Sie beispielsweise die Aufzählungszeichen einer Liste (ul oder ol) auf Quadrate, wie zum Beispiel:

Beispielcode

li{
list-style: square;
}

Darüber hinaus hat der Listenstil auch einige Werte, zum Beispiel Sie Sie können einige kleine Bilder als Elementsymbol verwenden. Schreiben Sie einfach die URL ("Bildadresse") direkt unter den Listenstil. Mb5u.com rät jedoch dringend von diesem Ansatz ab. Es wird empfohlen, das Bild als Hintergrund für li festzulegen.

5. Drop-Cap-Effekt

Pseudoobjekt: Der Anfangsbuchstabe kann in Kombination mit Schriftgröße und Float einen Drop-Cap-Effekt erzeugen.

Zum Beispiel:

Beispielcode

p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}

6. Texteinrückung: Verwenden Sie text-indent

text-indent, um die erste Zeile im Container einzurücken bestimmte Einheit. Beispielsweise stehen in chinesischen Absätzen im Allgemeinen zwei chinesische Schriftzeichen vor jedem Absatz. Sie können es so schreiben:

Beispielcode

p{
text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/
}

Wenn die Schriftgröße 12 Pixel beträgt, wird text-indent: 2em um 24 Pixel eingerückt.

7. Abschneiden chinesischer Zeichen mit fester Breite: Textüberlauf verwenden (Auslassungspunkte anzeigen)

Verwenden Sie die Hintergrundsprache, um den Feldinhalt in der Datenbank abzuschneiden, zum Beispiel 12 chinesische Zeichen ( gefolgt von einem Auslassungszeichen). Manchmal ist es jedoch erforderlich, HTML-Tags usw. zu filtern. Bei Verwendung von CSS zur Steuerung tritt dieses Problem jedoch nicht auf. Wenden Sie beispielsweise den folgenden Stil auf die Liste an:

Beispielcode

li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

8. Zeilenumbruch für chinesische Zeichen (Wörter) mit fester Breite: Verwenden Sie Wortumbruch

Für Zum Beispiel, um viele Ortsnamen in einem Container mit fester Breite anzuzeigen (vorausgesetzt, sie sind durch Leerzeichen getrennt), um zu vermeiden, dass die Ortsnamen in der Mitte unterbrochen werden (d. h. ein Wort steht oben und ein anderes Wort oben). bis zur nächsten Zeile unterbrochen). Dann können Sie Wortumbruch verwenden. Zum Beispiel:

Beispielcode

<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
</div>

Es ist zu beachten, dass die Leerzeichen im Inneren nicht ersetzt werden können (es muss mindestens ein weiches Leerzeichen vorhanden sein).

9. Chinesische phonetische Notation: Verwenden Sie Ruby-Tags und Ruby-Align-Attribute.
Zum Beispiel size: 11px; ">zhu yin, Sie können Ruby-Align verwenden, um die Ausrichtung festzulegen. Dies ist im CSS-Handbuch zu sehen. Weitere Informationen finden Sie im Ruby-Align-Element.

Das Obige ist eine detaillierte Einführung in die häufig verwendeten textlayoutbezogenen Attribute im CSS-Layout. Wenn Sie mehr über das

CSS3-Tutorial

erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung häufig verwendeter textlayoutbezogener Eigenschaften im CSS-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!