So verwenden Sie CSS

CSS, der vollständige Name von Cascading Style Sheets, ist eine Sprache, die zum Entwerfen von Webseitenstilen verwendet wird. CSS kann den Inhalt und den Präsentationsstil in HTML-Dokumenten trennen, wodurch die Seite schöner wird und den Anforderungen des Designers besser entspricht. In diesem Artikel werden die grundlegenden Konzepte, die Syntax und die praktischen Anwendungen von CSS vorgestellt, um Anfängern den Einstieg zu erleichtern.

1. Grundkonzepte von CSS

CSS besteht aus Selektoren und Deklarationen. Mit Selektoren werden die HTML-Elemente angegeben, auf die Stile angewendet werden sollen, während Deklarationen die anzuwendenden Stile definieren. Hier sind einige wichtige Grundkonzepte:

1. Selektor

Ein Selektor ist Code, der angibt, welches HTML-Element formatiert wird. Selektoren können Tag-Selektoren, Klassen-Selektoren, ID-Selektoren usw. sein, die im Folgenden vorgestellt werden.

(1) Tag-Selektor

Der Tag-Selektor ist der am häufigsten verwendete Selektor, der dem Tag-Namen des Elements im HTML-Dokument entspricht. Der folgende Code setzt beispielsweise die Textfarbe aller

-Elemente auf Rot:

h1 {
    color: red;
}

(2) Klassenselektor

Der Klassenselektor wird mit hinzugefügt. plus den Klassennamen. Machen Sie eine Übereinstimmung. Der folgende Code zentriert beispielsweise den Text eines Elements mit der Klasse „text-center“:

.text-center {
    text-align: center;
}

(3) ID-Selektor

ID-Selektor verwendet # plus die ID Name. Jedes Element in einem HTML-Dokument kann nur eine ID haben, sodass nur ein Element mit dem ID-Selektor übereinstimmen kann. Der folgende Code setzt beispielsweise die Hintergrundfarbe des Elements mit der ID „main“ auf Weiß:

#main {
    background-color: white;
}

2 Deklaration

Die Deklaration bezieht sich auf die Stilbeschreibung auf das entsprechende HTML-Element angewendet. Eine Deklaration besteht aus Attributen und Werten. Der folgende Code setzt beispielsweise die Textfarbe aller

-Elemente auf Rot:

h1 {
    color: red;
}

Hier ist Farbe der Attributname und Rot sein Attributwert. Jede Anweisung muss in geschweifte Klammern geschrieben und mit einem Semikolon abgeschlossen werden.

2. CSS-Syntax

Die Syntax von CSS ist sehr einfach, genau wie bei Schlüssel-Wert-Paaren. Jede CSS-Regel besteht aus einem Selektor und einem Deklarationsblock in geschweiften Klammern, wie unten gezeigt:

选择器 { 属性: 值; 属性: 值; }

In dieser Regel bezieht sich der Selektor auf das HTML-Element, auf das CSS-Stile angewendet werden, sowie auf Eigenschaften und Werte sind Beschreibungen des CSS-Stils selbst. Um das Lesen zu erleichtern, verwenden mehrzeilige Regeln häufig Einrückungen und Zeilenumbrüche, um den Code zu organisieren.

Das Folgende ist ein CSS-Code zum Anwenden eines Hintergrunds mit Farbverlauf:

body {
    background: linear-gradient(to right, #00bfff, #007fff);
}

Diese Regel bedeutet, einen Hintergrund mit Farbverlauf auf das Hauptelement des Dokuments anzuwenden. Der Stil wird in einem Farbverlauf von links nach rechts angezeigt, von #00bfff (hellblau) bis #007fff (dunkelblau).

3. Anwendung von CSS

In HTML-Dokumenten können Sie Inline-Stile direkt verwenden oder externe Stylesheets verwenden, um CSS-Stile anzuwenden.

1. Inline-Stil

Inline-Stilattribute werden in Form von Inline-Stilen direkt in HTML-Tags eingebettet. Der folgende Code setzt beispielsweise die Textfarbe des -Elements auf Rot:

<span style="color: red;">Hello, CSS!</span>

Inline-Stile gelten jedoch nur für das angegebene HTML-Element und können nicht von anderen Elementen geerbt werden. Daher wird der HTML-Code zwangsläufig komplexer.

2. Externes Stylesheet

Um zu vermeiden, dass Inline-Stile zu Verwirrung im HTML-Code führen, können wir externe Stylesheets verwenden. Externe Stylesheets werden getrennt von HTML-Dokumenten in Form von CSS-Dateien gespeichert, was die Seitenpflege komfortabler macht. Das Folgende ist ein einfaches Beispiel für ein externes Stylesheet:

/* 在style.css文件中定义以下规则 */

h1 {
    color: red;
}

.text-center {
    text-align: center;
}

#main {
    background-color: white;
}

In diesem Beispiel sind drei Regeln in der CSS-Datei definiert, die

in HTML und der Klasse „text-center“ entsprechen das Element mit der ID „main“. Um diese CSS-Datei zu verwenden, müssen wir der HTML-Datei die folgenden Tags hinzufügen:

<!-- 在HTML中引用style.css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">

Auf diese Weise wendet das HTML-Dokument automatisch die in den Regeln definierten Stile an.

4. Zusammenfassung

CSS ist eine sehr wichtige Designsprache, die Webseiten schöner, leichter lesbar und leicht zu warten macht. Das Verständnis der Grundkonzepte, der Syntax und der praktischen Anwendung von CSS ist eine notwendige Grundlage für das Webdesign. Ich hoffe, dieser Artikel kann Ihnen helfen, die Verwendung von CSS besser zu beherrschen.

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!