Inhaltsverzeichnis lesen
CSS-Beispiele, um zu sehen, wie CSS funktioniert
Was ist CSS?
CSS steht für Cascading Style Sheets, auch bekannt als Cascading Style Sheets.
CSS beschreibt, wie HTML-Elemente auf dem Bildschirm, Papier oder anderen Medien angezeigt werden.
CSS spart viel Arbeit. Es kann das Layout mehrerer Webseiten gleichzeitig steuern.
Externe Stylesheets werden in CSS-Dateien gespeichert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wgchen</title>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
CSS-Syntax
Ein CSS-Regelsatz besteht aus Selektoren und Deklarationsblöcken:
Selektoren verweisen auf die HTML-Elemente, die Sie formatieren möchten.
Ein Deklarationsblock enthält eine oder mehrere durch Semikolon getrennte Deklarationen.
Jede Deklaration besteht aus einem CSS-Eigenschaftsnamen und einem Wert, getrennt durch Doppelpunkte.
Mehrere CSS-Deklarationen werden durch Semikolons getrennt und Deklarationsblöcke in geschweiften Klammern eingeschlossen.
p {
color: red;
text-align: center;
}
Alle <p>Elemente werden mit roter Textfarbe zentriert ausgerichtet:
Beispielerklärung
p ist ein Selektor in CSS (er zeigt auf das HTML-Element für style: <p>).
Farbe ist das Attribut und Rot ist der Attributwert.
text-align ist die Eigenschaft und center ist der Eigenschaftswert.
CSS-Selektoren
CSS-Selektoren werden verwendet, um zu formatierende HTML-Elemente zu „finden“ (oder auszuwählen).
Wir können CSS-Selektoren in fünf Kategorien einteilen:
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
CSS-Elementselektoren
Elementselektoren wählen HTML-Elemente basierend auf Elementnamen aus.
p {
text-align: center;
color: red;
}
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
Hier werden alle <p>Elemente zentriert mit einer roten Textfarbe ausgerichtet:
CSS-ID-Selektor
Der id-Selektor verwendet das id-Attribut eines HTML-Elements, um ein bestimmtes Element auszuwählen.
Die ID eines Elements ist innerhalb einer Seite eindeutig, daher wird der ID-Selektor verwendet, um ein eindeutiges Element auszuwählen!
Um ein Element mit einer bestimmten ID auszuwählen, schreiben Sie ein Nummernzeichen (#) gefolgt von der ID des Elements.
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
Diese CSS-Regel wird auf das HTML-Element mit id="para1" angewendet:
注意:id Der Name darf nicht mit einer Zahl beginnen.
CSS-Klassenselektor
Klassenselektoren wählen HTML-Elemente mit einem bestimmten Klassenattribut aus.
Um Elemente mit einer bestimmten Klasse auszuwählen, （.）schreiben gefolgt vom Klassennamen.
.center {
text-align: center;
color: red;
}
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
In diesem Beispiel werden alle HTML-Elemente mit class="center" rot und zentriert ausgerichtet:
Sie können auch angeben, dass nur bestimmte HTML-Elemente von der Klasse betroffen sind.
注意: Der Klassenname darf nicht mit einer Zahl beginnen!
CSS-Universalselektor
Allgemeiner Selektor （*）Wählt alle HTML-Elemente auf der Seite aus.
Die folgenden CSS-Regeln wirken sich auf jedes HTML-Element auf der Seite aus:
* {
text-align: center;
color: blue;
}
CSS-Gruppierungsselektoren
Gruppenselektoren wählen alle HTML-Elemente mit derselben Stildefinition aus.
Schauen Sie sich den folgenden CSS-Code an (die h1-, h2- und p-Elemente haben dieselbe Stildefinition):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Am besten gruppieren Sie Selektoren, um die Codegröße zu minimieren.
Um Selektoren zu gruppieren, trennen Sie jeden Selektor durch ein Komma.
h1, h2, p {
text-align: center;
color: red;
}
In diesem Beispiel haben wir die Selektoren im obigen Code gruppiert.