CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die für HTML-Dokumente (Hypertext Markup Language) verwendet wird. CSS kann das Erscheinungsbild von Webseiten schöner und klarer machen und die Lesbarkeit und Wartbarkeit von Webseiten verbessern.
CSS-Stylesheets bestehen normalerweise aus drei Teilen: Selektoren, Attributen und Werten. Der Selektor gibt das HTML-Element an, auf das der Stil angewendet werden soll, das Attribut definiert den Stil, der auf das Element angewendet werden soll, und der Wert gibt den spezifischen Wert des Attributs an.
Lassen Sie uns mehr über die Verwendung von CSS erfahren.
Zuerst müssen wir ein CSS-Stylesheet für das HTML-Dokument erstellen. Normalerweise speichern wir das CSS-Stylesheet in einer separaten CSS-Datei und führen es über das -Tag innerhalb des
-Tags ein.Zum Beispiel:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
Ein Selektor ist ein Bezeichner, der das HTML-Element angibt, für das die CSS-Regel gilt. Zu den gängigen Selektoren gehören:
Beispiel:
/* 标签名选择器 */
p {
color: blue;
}
/* 类选择器 */
.red {
color: red;
}
/* ID选择器 */
#green {
color: green;
}
/* 属性选择器 */
[class="yellow"] {
color: yellow;
}
/* 伪类选择器 */
a:hover {
color: purple;
}Attribute sind Stile, die das HTML-Element angeben, für das CSS-Regeln gelten. Zu den allgemeinen Attributen gehören:
Beispiel:
/* 文本颜色 */
p {
color: blue;
}
/* 背景颜色 */
body {
background-color: #eee;
}
/* 字体大小、字体类型、字体粗细 */
h1 {
font-size: 32px;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* 文本对齐方式 */
div {
text-align: center;
}
/* 外边距、内边距 */
.box {
margin: 10px;
padding: 20px;
}
/* 边框 */
.img {
border: 1px solid black;
}Wert ist der spezifische Wert des Attributs. Der Bereich möglicher Werte für eine Eigenschaft hängt vom Typ der Eigenschaft ab. Farben können beispielsweise vordefinierte Farbnamen (wie „Rot“, „Blau“ usw.) oder Hexadezimal- oder RGB-Werte (wie „#ff0000“, „rgb(255,0,0)“ usw. verwenden. ).
Beispiel:
/* 颜色 */
p {
color: blue;
}
/* 背景颜色 */
body {
background-color: #eee;
}
/* 字体大小、字体类型、字体粗细 */
h1 {
font-size: 32px;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* 文本对齐方式 */
div {
text-align: center;
}
/* 外边距、内边距 */
.box {
margin: 10px;
padding: 20px;
}
/* 边框 */
.img {
border: 1px solid black;
}Stile in CSS können vererbt werden. Beispielsweise können wir für alle Absätze in einem HTML-Dokument ein Schriftartattribut festlegen und die Werte dieser Attribute können automatisch an den in jedem Absatz enthaltenen Text geerbt werden.
Beispiel:
/* 字体 */
body {
font-family: Arial, sans-serif;
}Wenn mehrere CSS-Regeln auf dasselbe HTML-Element angewendet werden, werden sie kaskadiert. Das bedeutet, dass einige Regeln eine höhere Priorität haben und Vorrang vor anderen Regeln haben. Das in CSS verwendete Kaskadenprinzip ist:
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
/* 优先级为1，文件顺序为1 */
p {
color: red;
}
</style>
<style>
/* 优先级为10，文件顺序为2 */
.green {
color: green;
}
</style>
<style>
/* 优先级为100，文件顺序为3 */
#blue {
color: blue;
}
</style>
</head>
<body>
<p class="green" id="blue">This text is blue.</p>
</body>
</html>Das Verknüpfen eines CSS-Stylesheets mit einem HTML-Dokument mithilfe des -Tags gilt allgemein als bewährte Methode. Dies hat folgende Vorteile:
Beispiel:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>This text is red.
This text is blue.
This text is green.
/* style.css */
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}Manchmal kann das Speichern eines CSS-Stylesheets in einem HTML-Dokument die Seitenladegeschwindigkeit verbessern. Wenn das Stylesheet nur für die aktuelle Seite gilt, können Sie das Stylesheet in einem