So legen Sie den CSS-Stil fest

CSS-Stile sind eine Sprache zum Formatieren von Webinhalten. CSS-Stile werden verwendet, um Text, Farbe, Hintergrundfarbe, Ausrichtung, Abstände, Rahmen und andere Webdesign-bezogene Stile festzulegen. In vielen Fällen kann die Gestaltung von CSS eine Website moderner, schöner und benutzerfreundlicher machen. Hier finden Sie einige grundlegende Informationen zum Stylen von CSS.

1. Inline-Stil

Inline-Stil ist eine Möglichkeit, CSS-Stile direkt auf HTML-Elemente zu schreiben. Dieser Ansatz ist für einzelne Elemente nützlich und kann durch die Verwendung des „style“-Attributs im Tag erreicht werden. Der folgende Code legt beispielsweise die Textfarbe und Schriftgröße eines Absatzes mithilfe von Inline-CSS-Stilen fest:

Dies ist ein Absatz.

In diesem Code legt das „style“-Attribut den folgenden Stil fest:

“color: red;”设置颜色为红色
“font-size: 18px;”设置字体大小为 18 像素。

2. Eingebettete Stile

Eingebettete Stile sind eine Möglichkeit, CSS-Stile in das „head“-Tag einer HTML-Datei zu schreiben. Mit dieser Methode kann im gesamten Dokument derselbe Stil verwendet werden, was für größere Websites nützlich ist. Hier ist ein Beispiel für einen Inline-CSS-Stil:

Dies ist ein Absatz .

In diesem Code wendet der „p“-Selektor den Stil auf alle „p“-Elemente an, einschließlich des obigen Absatzes. Diese beiden CSS-Stile legen die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel fest.

3. Externes Stylesheet

Externes Stylesheet ist eine Möglichkeit, CSS-Stile in einer separaten CSS-Datei zu speichern. Dieser Ansatz ist nützlich, wenn mehrere Webseiten denselben Stil verwenden, und erleichtert das Lesen und Verwalten der HTML-Datei. Hier ist ein Beispiel für ein externes CSS-Stylesheet:

In einer separaten „style.css“-Datei können Sie mehrere Stile wie folgt festlegen:

p {
Farbe: grün;
Schriftgröße: 14px;

h1 {

Farbe: Blau;
Schriftgröße: 32px;
}

In der HTML-Datei würden Sie dieses Stylesheet verlinken:

Jetzt erhalten alle „p“-Elemente den angegebenen Stil (Textfarbe Grün, Schriftgröße 14 Pixel) und alle „h1“-Elemente erhalten einen anderen Stil ( Textfarbe blau, Schriftgröße 32 Pixel).

4. Selektor

Der CSS-Stilselektor bestimmt, welche HTML-Elemente welche Stile anwenden. Selektoren können Elemente basierend auf Elementtyp, Klasse, ID, Attributen usw. auswählen. Hier sind einige gängige Selektorformate:

元素类型选择器：直接选择元素的名称。例如，“p”选择器将选择所有段落。
类选择器：“.”加上一个类名称。例如，“.my-class”选择器将选择具有名称“my-class”的所有元素。
ID 选择器：“#”加上一个 ID 名称。例如，“#my-id”选择器将选择具有 ID 名称“my-id”的所有元素。
属性选择器：“[]”加上一个属性名称和一个可选的属性值。例如，“[href]”选择器将选择具有任何 href 属性的元素，而“[href='https://example.com']”选择器将选择具有 href 设置为“https://example.com” 的元素。

Selektoren werden mit CSS-Stilen verwendet und in geschweifte Klammern gesetzt. Hier ist ein Beispiel, bei dem der Selektor den Stil auf alle „p“-Elemente anwendet:

p {

Farbe: Rot;
Schriftgröße: 16px;
}

Das sind die Grundlagen des CSS-Stils. Sobald Sie diese Konzepte verstanden haben, können Sie mit der Erkundung fortgeschrittenerer CSS-Anwendungen wie Responsive Design, Animation und mehr beginnen. Unabhängig davon, welche Art von Website Sie erstellen, ist es hilfreich zu wissen, wie man CSS formatiert.

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