[CSS-Hinweise 5] CSS-Formatierung und -Schriftsatz

1. Textlayout: Schriftart
Wir können CSS-Stile verwenden, um Schriftart, Schriftgröße, Farbe und andere Stilattribute für den Text auf der Webseite festzulegen. Schauen wir uns ein Beispiel an. Der folgende Code implementiert: Festlegen der Schriftart für den Text auf der Webseite auf Song Dynasty.

body{font-family:"宋体";}

Achten Sie darauf, hier keine ungewöhnlichen Schriftarten festzulegen, denn wenn die von Ihnen festgelegten Schriftarten nicht auf dem lokalen Computer des Benutzers installiert sind, werden die Standardschriftarten des Browsers angezeigt. (Denn ob der Benutzer den von Ihnen festgelegten Schriftstil sehen kann, hängt davon ab, ob die von Ihnen festgelegte Schriftart auf dem lokalen Computer des Benutzers installiert ist.)
Heutzutage stellen die meisten Webseiten gerne „Microsoft Yahei“ ein, wie im folgenden Code gezeigt :

body{font-family:"Microsoft Yahei";}

oder

body{font-family:"微软雅黑";}

Hinweis: Die erste Methode ist kompatibler als die zweite Methode.

Weil diese Schriftart schön ist und sicher auf dem Client angezeigt werden kann (sie wird normalerweise standardmäßig lokal installiert).

2. Textlayout: Schriftgröße, Farbe
Mit dem folgenden Code können Sie die Schriftgröße des Textes auf der Webseite auf 12 Pixel und die Schriftfarbe auf #666 (Grau) festlegen ):

body{font-size:12px;color:#666}

3. Textlayout: Fett
Wir können auch CSS-Stile verwenden, um den Textstil zu ändern: Fett, Kursiv, Unterstrichen, Durchgestrichen. Sie können den folgenden Code verwenden in Fettschrift dargestellt werden.

p span{font-weight:bold;}

Wenn Sie eine fette Schriftart für Text festlegen möchten, gibt es einen separaten CSS-Stil, um dies zu erreichen. Sie müssen nicht mehr h1-h6 oder starke Tags verwenden, um einen fetten Schriftartenstil zu erreichen.

4. Textformatierung: kursiv
Der folgende Code kann Text im Browser kursiv anzeigen:

p a{font-style:italic;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

5. Textformatierung: unterstrichen
In einigen Fällen möchten Sie den Text auf Unterstreichungsstil einstellen, um den Text optisch hervorzuheben. Dazu können Sie den folgenden Code verwenden:

p a{text-decoration:underline;} <p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>

6. Textlayout: Durchgestrichen
Durchgestrichen Dies kann mit dem folgenden Code erreicht werden:

.oldPrice{text-decoration:line-through;}

7. Absatzsatz: Einrückung
In chinesischen Texten ist es üblich, vor einem Absatz zwei Leerzeichen zu lassen kann wie folgt verwendet werden Code zur Implementierung:

p{text-indent:2em;} <p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。
那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>

Hinweis: 2em bedeutet die doppelte Größe des Textes.

8. Absatzsatz: Zeilenabstand (Zeilenhöhe)
Das Zeilenabstandsattribut (Zeilenhöhe) spielt eine wichtige Rolle beim Absatzsatz Linien Der Abstand beträgt das 1,5-fache.

p{line-height:1.5em;} <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，
其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

9. Absatzsatz: Chinesischer Zeichenabstand und Buchstabenabstand
Wenn Sie Textabstände oder Buchstabenabstände im Webseitenlayout festlegen möchten, können Sie dies wie gezeigt mit dem Buchstabenabstand erreichen im folgenden Code:

h1{ letter-spacing:50px; } ... <h1>了不起的盖茨比</h1>

Hinweis: Wenn dieser Stil in englischen Wörtern verwendet wird, legt er den Abstand zwischen Buchstaben fest.

Wortabstandseinstellungen:

Was ist, wenn ich den Abstand zwischen englischen Wörtern festlegen möchte? Dies kann durch Wortabstände erreicht werden. Der folgende Code:

h1{ word-spacing:50px; } ... <h1>welcome to imooc!</h1>

10. Absatzlayout: Ausrichtung
Möchten Sie einen Zentrierungsstil für Text und Bilder in Blockelementen festlegen? Sie können den Stilcode für die Textausrichtung verwenden. Mit dem folgenden Code können Sie eine zentrierte Textanzeige erzielen.

h1{ text-align:center; } <h1>了不起的盖茨比</h1>

kann auch nach links gestellt werden:

h1{ text-align:left; } <h1>了不起的盖茨比</h1>

kann auch nach rechts gestellt werden:

h1{ text-align:right; } <h1>了不起的盖茨比</h1>

Das Obige ist [CSS-Hinweise 5] CSS-Formatierungs- und Satzinhalte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!