CSS ist eine Designsprache für den Webseitenstil und eine Technologie zur Steuerung des Stils von Webseitenelementen. Über CSS können Sie den Stil und das Layout verschiedener Elemente wie Text, Bilder, Hintergründe und Rahmen auf Webseiten steuern. In diesem Artikel werden die grundlegende Syntax und die allgemeinen Eigenschaften von CSS ausführlich vorgestellt, um Webdesignern dabei zu helfen, die Verwendung von CSS besser zu beherrschen.
1. Grundlegende CSS-Syntax
1. Kommentarsyntax von CSS
Kommentare in CSS beginnen mit „/“ und enden mit „/“. Nichts in der Kommentaranweisung wird vom Browser analysiert und angezeigt.
Beispiel:
/*这是注释语句*/
2. CSS-Selektorsyntax
In CSS werden Selektoren verwendet, um die Elemente anzugeben, auf die Stile angewendet werden sollen. Der Selektor kann das Attribut, den Typ, die ID, die Kategorie usw. des Elements angeben.
Selektoren können in die folgenden Typen unterteilt werden:
(1) Elementselektor
Elementselektor kann den Tag-Namen direkt im HTML-Tag angeben.
Syntaxbeispiel:
p { color: red; }(2) ID-Selektor
Der ID-Selektor wird mit dem „#“-Symbol angegeben.
Syntaxbeispiel:
#box { width: 200px; height: 200px; }(3) Kategorieselektor
Der Kategorieselektor wird mit dem Symbol „.“ angegeben.
Syntaxbeispiel:
.box { background-color: #fff; }(4) Nachkommenselektor
Der Nachkommenselektor trennt zwei Selektoren durch ein Leerzeichen, um Nachkommenelemente in einer hierarchischen Beziehung auszuwählen.
Syntaxbeispiel:
div p { color: red; }(5) Pseudoklassenselektor
Pseudoklassenselektor wird verwendet, um Elemente in einem bestimmten Zustand auszuwählen, z. B. Mauszeiger, besuchte Links usw.
Syntaxbeispiel:
a:hover { color: red; }(6) Attributselektor
Der Attributselektor kann Elemente basierend auf ihren Attributen oder Attributwerten auswählen.
Syntaxbeispiel:
input[type="text"] { border: 1px solid #ccc; }(7) Kombinationsselektor
Ein Kombinationsselektor kann mehrere Bedingungen gleichzeitig angeben, getrennt durch Kommas.
Syntaxbeispiel:
h1, h2, h3 { color: #000; }3. Häufig verwendete Eigenschaften von CSS
CSS-Eigenschaften können das Erscheinungsbild, das Layout, die Größe, die Farbe, die Schriftart usw. von Webelementen steuern.
Die folgenden Eigenschaften werden häufig von CSS verwendet:
(1) Schriftgröße: Schriftgröße
Syntaxbeispiel:
body { font-size: 14px; }(2) Farbe: Schriftfarbe
Syntaxbeispiel:
h1 { color: #ff0000; }(3) Hintergrund: Hintergrundfarbe
Grammatikbeispiel:
body { background-color: #f7f7f7; }(4) Breite: Breite
Grammatikbeispiel:
img { width: 100px; }(5) Höhe: Höhe
Grammatikbeispiel:
img { height: 100px; }(6) Rand: Rand
Grammatikbeispiel:
.box { border: 1px solid #ccc; }(7) padding: innerer Rand
Syntaxbeispiel:
.box { padding: 10px; }(8) Rand: äußerer Rand
Syntaxbeispiel:
.box { margin: 10px; }(9) text-align: Text zentriert
Syntaxbeispiel:
h1 { text-align: center; }4 . CSS-Vererbung und Priorität
CSS-Vererbung bedeutet, dass untergeordnete Elemente die Stilattribute übergeordneter Elemente erben können. Wenn Sie beispielsweise die Schriftgröße des Body-Elements auf 14 Pixel festlegen, erben alle Elemente, die sich innerhalb des Body-Elements befinden, dieses Stilattribut.
Die Prioritätsregel von CSS bezieht sich darauf, welcher Stil wirksam wird, wenn mehrere CSS-Stile gleichzeitig auf dasselbe Element angewendet werden. CSS-Prioritätsregeln werden in der folgenden Reihenfolge beurteilt:
(1) Je spezifischer der Stilattributwert, desto höher die Priorität.
Zum Beispiel haben ID-Selektoren Vorrang vor Kategorieselektoren und Kategorieselektoren haben Vorrang vor Elementselektoren. Wenn ein Element von mehreren Selektoren gleichzeitig ausgewählt wird, wird zuerst die Stilregel mit dem spezifischeren Selektor angewendet.
(2) Je später das Stilattribut erscheint, desto höher ist die Priorität.
Wenn ein Element beispielsweise mehrere gleiche Stilattribute gleichzeitig definiert, überschreiben die später angezeigten Stilregeln die vorherigen Regeln.
(3) Der durch die !important-Regel festgelegte Stil hat die höchste Priorität.
In diesem Fall wird der Wert des entsprechenden Stilattributs nicht durch andere Selektorregeln überschrieben.
2. Zusammenfassung
CSS ist eine äußerst wichtige Technologie im Webdesign. Das richtige Verständnis und Beherrschen der Syntax und der allgemeinen Eigenschaften von CSS kann das Niveau des Webdesigns erheblich verbessern. Dieser Artikel enthält eine detaillierte Erläuterung der grundlegenden Syntax und der allgemeinen Eigenschaften von CSS und soll Webdesignern dabei helfen, die CSS-Technologie besser anzuwenden.
Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
