So verwenden Sie CSS

CSS ist eine sehr wichtige Technologie im Webdesign. Dadurch können wir den Stil und das Layout von Webseiten ändern, um sie schöner und leichter lesbar zu machen. In diesem Artikel stellen wir die grundlegende Syntax von CSS und einige häufig verwendete Stileigenschaften vor, um Anfängern den Umgang mit CSS zu erleichtern.

1. Grundlegende Grammatik von CSS

Bevor wir CSS verwenden, müssen wir einige grundlegende Grammatikregeln verstehen. Die Syntaxstruktur von CSS besteht aus drei Teilen: Selektor, Attribut und Wert, wie unten gezeigt:

选择器 {
    属性1: 值1;
    属性2: 值2;
    属性3: 值3;
}

Darunter wird der Selektor verwendet, um das zu formatierende HTML-Element anzugeben, und das Attribut wird verwendet, um die zu ändernden Eigenschaften zu beschreiben , und der Wert soll Attributwert geändert werden. Jedes Attribut und jeder Wert werden durch einen Doppelpunkt (:) getrennt, und Attribute werden durch ein Semikolon (;) getrennt. Am Ende des letzten Attributs muss kein Semikolon hinzugefügt werden.

Um beispielsweise die Textfarbe aller Absätze (p) in HTML in Rot zu ändern, können Sie den folgenden CSS-Stil verwenden:

p {
    color: red;
}

2. Stileigenschaften von CSS

In CSS gibt es viele, die verwendet werden können um den visuellen Stil der Eigenschaften einer Webseite zu ändern. Im Folgenden sind einige häufig verwendete Stileigenschaften aufgeführt.

1. Font-Attribute

• font-size: Schriftgröße, die Einheit kann Pixel (px), Prozentsatz (%) oder em usw. sein.
• Schriftfamilie: Schriftartname, der eine gängige englische Schriftart oder eine chinesische Schriftart sein kann.

Zum Beispiel:

p {
    font-size: 16px;
    font-family: "Microsoft Yahei", Arial, sans-serif;
}

2. Textattribut

• Farbe: Schriftfarbe.
• text-align: Textausrichtung, die links, rechts, zentriert oder im Blocksatz usw. erfolgen kann.

Zum Beispiel:

p {
    color: #333;
    text-align: center;
}

3. Hintergrundattribut

• Hintergrundfarbe: Hintergrundfarbe.
• Hintergrundbild: Hintergrundbild.
• Hintergrundwiederholung: Ob das Hintergrundbild wiederholt wird, es kann Wiederholung, Wiederholung-x, Wiederholung-y oder keine Wiederholung usw. sein.
• Hintergrundposition: Position des Hintergrundbilds, die links oben, in der Mitte, rechts unten usw. sein kann.

Zum Beispiel:

body {
    background-color: #fff;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

4. Border-Attribut

• border-width: Rahmenbreite.
• Rahmenstil: Rahmenstil, der durchgehend, gestrichelt, gepunktet oder doppelt usw. sein kann.
• Rahmenfarbe: Rahmenfarbe.

Zum Beispiel:

div {
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

5. Box-Modellattribut

• width: Elementbreite.
• height: Elementhöhe.
• Polsterung: Polsterung.
• margin: äußerer Rand.

Zum Beispiel:

div {
    width: 200px;
    height: 150px;
    padding: 10px;
    margin: 20px;
}

3. CSS-Selektor

CSS-Selektor ist ein Muster, das zum Zuordnen von HTML-Elementen verwendet wird und zum Festlegen von Stilen für bestimmte Elemente verwendet werden kann. Nachfolgend finden Sie einige häufig verwendete Selektoren.

1. Elementselektor

Der Elementselektor kann mit jedem Element in HTML übereinstimmen, z. B. p, div, h1 usw.

Zum Beispiel:

p {
    color: #333;
}

2. Klassenselektor

Ein Klassenselektor beginnt mit einem Punkt (.) und kann den gleichen Stil für mehrere Elemente in HTML angeben.

Zum Beispiel:

.highlight {
    background-color: yellow;
}

3. ID-Selektor

Der ID-Selektor beginnt mit einem Nummernzeichen (#) und wird verwendet, um eindeutige HTML-Elemente abzugleichen.

Zum Beispiel:

#logo {
    width: 100px;
    height: 80px;
}

4. Absteigende Selektoren

Absteigende Selektoren können mit Elementen übereinstimmen, die in anderen HTML-Elementen verschachtelt sind, und verwenden Leerzeichen ( ), um verschiedene Selektoren zu trennen.

Zum Beispiel:

#nav li {
    display: inline-block;
}

5. Angrenzender Geschwisterselektor

Angrenzender Geschwisterselektor kann mit dem Geschwisterelement übereinstimmen, das unmittelbar auf das zuvor angegebene Element folgt, dargestellt durch das Pluszeichen (+).

Zum Beispiel:

h1 + p {
    font-size: 14px;
}

4. Vererbung von CSS-Stilen

CSS-Stile können durch Vererbung an die untergeordneten Elemente weitergegeben werden. Wenn ein übergeordnetes Element einen bestimmten Stil festlegt, erben seine untergeordneten Elemente diesen Stil automatisch, es sei denn, das untergeordnete Element legt seinen eigenen Stil fest.

Beispiel:

body {
    font-size: 16px;
    color: #333;
}

In diesem Beispiel erben alle HTML-Elemente automatisch die Schriftgröße und -farbe.

Fazit

Durch die Einleitung dieses Artikels können Anfänger CSS verwenden, um den Stil und das Layout von Webseiten zu ändern. Obwohl viele CSS-Eigenschaften und -Selektoren verfügbar sind, ist das Verständnis der grundlegenden Syntax und der allgemeinen Stileigenschaften von grundlegender Bedeutung. Durch kontinuierliches Lernen und Üben werden Sie besser mit CSS vertraut und können komplexere Webdesigns erstellen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!