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:

8e6018ddc3e8048409e6af4149427d03Dies ist ein Absatz.0cba36f12cf561cef14ffa62bcdafa2c

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:

93f0f5c25f18dab9d176bd4f6de5d30e
c9ccee2e6ea535a969eb3f532ad9fe89

p {
  color: blue;
  font-size: 16px;
}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeDies ist ein Absatz .94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

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:

93f0f5c25f18dab9d176bd4f6de5d30e

b62e931c4aa8229ea6b9449eb05961cb
9c3bca370b5104690d9ef395f2c5f8d1

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!