CSS-Codeformatierung
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 id="三年级">三年级</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 id="三年级">三年级</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 id="三年级时">三年级时</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>123456789101112131415161718Textsatz – – 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 id="尼克-卡拉威">尼克?卡拉威</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 id="了不起的乔布斯">了不起的乔布斯</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 id="welcome-nbsp-to-nbsp-iOS">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 id="hello-nbsp-world-你好">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 id="了不起的乔布斯">了不起的乔布斯</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="/static/imghw/default1.png" data-src="http://img.com/2000200.jpg" class="lazy" alt="CSS-Codeformatierung" ></div></body></html>123456789101112131415Das obige ist der detaillierte Inhalt vonCSS-Codeformatierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
