Wie schreibe ich CSS

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!