Heim > Artikel > Web-Frontend > CSS-Codeformatierung
CSS-Codeformatierung
- 巴扎黑Original
- 2017-08-09 15:48:371624Durchsuche
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 auf Song Dynasty für den Text auf der Webseite.
body{font-family:"宋体";}1Achten 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";}1oder
body{font-family:"微软雅黑";}1Hinweis: 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).
Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋体";}</style></head><body> <h1>三年级</h1> <p>三年级<span id="stress">三年级</span>三年级</p> <p>三年级</p></body></html>1234567891011121314151617181920Textlayout - - Schriftgröße, Farbe
Sie können den folgenden Code zum Festlegen verwenden den Text auf der Webseite. Stellen Sie die Schriftgröße auf 12 Pixel und die Schriftfarbe auf #666 (Grau) ein:
body{font-size:12px;color:#666}1Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字号、颜色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1>三年级</h1> <p>三年级<span class="stress">三年级</span>三年级</p> <p>三年级<span>三年级</span>三年级</p></body></html>12345678910111213141516Textlayout – – Fettschrift
Wir können auch CSS-Stile verwenden, um den Textstil zu ändern: Fett, Kursiv, Unterstrichen, Durchgestrichen. Sie können den folgenden Code verwenden, um den Text festzulegen fett dargestellt.
p span{font-weight:bold;}1Hier können Sie sehen, dass es einen separaten CSS-Stil gibt, um dies zu erreichen. Sie müssen nicht mehr h1-h6 oder starke Tags verwenden, um einen fetten Stil zu erreichen .
Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗体签</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1>三年级时</h1> <p>三年级时<span class="stress">三年级时</span>三年级时<a href="http://www.imooc.com">三年级时</a>三年级时</p> <p>三年级时</p></body></html>12345678910111213141516Textlayout – – kursiv
Der folgende Code kann Text in Kursivschrift in implementieren Browser Angezeigt in:
p a{font-style:italic;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜体样式</title><style type="text/css">p{ font-style:italic;
}a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年级<a>三年级</a>三年级</p> </body></html>1234567891011121314151617181920Textlayout – – Unterstrichen
In einigen Fällen Sie möchten, dass der Text auf den Unterstreichungsstil eingestellt ist, der den Text visuell hervorheben kann. Sie können den folgenden Code verwenden, um dies zu erreichen:
p a{text-decoration:underline;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下划线样式</title><style type="text/css">a { text-decoration:underline;
}span { text-decoration:underline;}</style></head><body><p><span>三年级</span><a> 四年级 </a> 五年级 </p></body></html>123456789101112131415161718 Textsatz – – Durchgestrichen
Was ist, wenn Sie eine Durchgestrichenheit auf der Webseite festlegen möchten? Dieser Stil wird häufig auf E-Commerce-Websites verwendet: 
Oben abgebildet. Das Durchstreichen des Originalpreises kann mit dem folgenden Code erreicht werden:
.oldPrice{text-decoration:line-through;}1Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body></html>12345678910111213Absatzlayout – – Einrückung
In chinesischen Texten ist es üblich, vor einem Absatz zwei Leerzeichen zu lassen. Dieser spezielle Stil kann mit dem folgenden Code implementiert werden:
p{text-indent:2em;}<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>12Hinweis: 2em bedeutet 2-fache Größe des Textes.
Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>缩进样式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1>尼克?卡拉威</h1> <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>123456789101112131415Absatzlayout – – Zeilenabstand (Zeilenhöhe)
Lass uns in diesem Abschnitt lernen. Lass uns Schauen Sie sich ein anderes Zeilenabstandsattribut (Zeilenhöhe) an, das beim Absatzlayout eine wichtige Rolle spielt. Der folgende Code legt den Zeilenabstand des Absatzes auf das 1,5-fache fest.
p{line-height:1.5em;}<p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p>12Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行间距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p></body></html>12345678910111213Absatzlayout – – Chinesische Wortabstände, Buchstabenabstände
Chinesischer Zeichenabstand , Buchstabenabstandseinstellung :
Wenn Sie Textabstand oder Buchstabenabstand im Webseitenlayout festlegen möchten, Sie können es verwenden. Der Buchstabenabstand ist implementiert, wie im folgenden Code gezeigt:
h1{
letter-spacing:50px;
}...<h1>了不起的乔布斯</h1>12345Hinweis: 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 iOS!</h1>12345Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字间距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1>hello world!你好！</h1></body></html>123456789101112131415Hinweis
Wenn das Einstellungselement Englisch ist, der Buchstabenabstand Die Einstellung ist nicht die Leerzeichen zwischen englischen Wörtern, sondern die Leerzeichen zwischen Buchstaben.
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/left/right;
}<h1>了不起的乔布斯</h1>1234Beispiel
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对齐</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="http://img.com/2000200.jpg" alt="CSS-Codeformatierung" ></div></body></html>123456789101112131415
Das obige ist der detaillierte Inhalt vonCSS-Codeformatierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Wie erstelle ich einen halbtransparenten Rahmen in CSS, ohne Bilder zu verwenden?
- Wie kann ich das n-te untergeordnete Element auswählen, ohne das übergeordnete Element zu kennen?
- Wie verhindert man die Vererbung untergeordneter Elemente in CSS?
- Wie kann man dafür sorgen, dass der n-te untergeordnete Selektor versteckte Elemente in einem Rasterlayout ignoriert?
- Wie kann man in CSS eine Gleitanimation erstellen, wenn das animierte Element „display: none;“ hat?