Heim > Artikel > Web-Frontend > So verwenden Sie CSS

So verwenden Sie CSS

WBOYOriginal: 2023-05-29 09:42:37660Durchsuche

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die für HTML-Dokumente (Hypertext Markup Language) verwendet wird. CSS kann das Erscheinungsbild von Webseiten schöner und klarer machen und die Lesbarkeit und Wartbarkeit von Webseiten verbessern.

CSS-Stylesheets bestehen normalerweise aus drei Teilen: Selektoren, Attributen und Werten. Der Selektor gibt das HTML-Element an, auf das der Stil angewendet werden soll, das Attribut definiert den Stil, der auf das Element angewendet werden soll, und der Wert gibt den spezifischen Wert des Attributs an.

Lassen Sie uns mehr über die Verwendung von CSS erfahren.

Erstellen Sie ein CSS-Stylesheet

Zuerst müssen wir ein CSS-Stylesheet für das HTML-Dokument erstellen. Normalerweise speichern wir das CSS-Stylesheet in einer separaten CSS-Datei und führen es über das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag innerhalb des 93f0f5c25f18dab9d176bd4f6de5d30e-Tags ein.

Zum Beispiel:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Selektor

Ein Selektor ist ein Bezeichner, der das HTML-Element angibt, für das die CSS-Regel gilt. Zu den gängigen Selektoren gehören:

Tag-Namen-Selektor: Verwenden Sie den Tag-Namen des HTML-Elements, um das Element anzugeben. Zum Beispiel: p, h1, div usw.
Klassenauswahl: Beginnen Sie mit „.“, gefolgt vom Klassennamen. Zum Beispiel: .class1, .class2.
ID-Auswahl: beginnt mit „#“, gefolgt vom ID-Namen. Zum Beispiel: #id1, #id2.
Attributauswahl: Geben Sie Elemente basierend auf den Attributen von HTML-Elementen an. Zum Beispiel: [Attribut], [Attribut=Wert] usw.
Pseudoklassenselektor: Wird zur Angabe bestimmter spezieller Elementzustände verwendet. Zum Beispiel: :hover, :focus usw.

Beispiel:

/* 标签名选择器 */
p {
  color: blue;
}

/* 类选择器 */
.red {
  color: red;
}

/* ID选择器 */
#green {
  color: green;
}

/* 属性选择器 */
[class="yellow"] {
  color: yellow;
}

/* 伪类选择器 */
a:hover {
  color: purple;
}

Attribute

Attribute sind Stile, die das HTML-Element angeben, für das CSS-Regeln gelten. Zu den allgemeinen Attributen gehören:

Farbe: Textfarbe.
Hintergrundfarbe: Hintergrundfarbe.
Schriftgröße: Schriftgröße.
Schriftfamilie: Schriftart.
Schriftstärke: Schriftstärke.
text-align: Textausrichtung.
margin: äußerer Rand.
Polsterung: Polsterung.
Grenze: Grenze.

Beispiel:

/* 文本颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

Wert

Wert ist der spezifische Wert des Attributs. Der Bereich möglicher Werte für eine Eigenschaft hängt vom Typ der Eigenschaft ab. Farben können beispielsweise vordefinierte Farbnamen (wie „Rot“, „Blau“ usw.) oder Hexadezimal- oder RGB-Werte (wie „#ff0000“, „rgb(255,0,0)“ usw. verwenden. ).

Beispiel:

/* 颜色 */
p {
  color: blue;
}

/* 背景颜色 */
body {
  background-color: #eee;
}

/* 字体大小、字体类型、字体粗细 */
h1 {
  font-size: 32px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

/* 文本对齐方式 */
div {
  text-align: center;
}

/* 外边距、内边距 */
.box {
  margin: 10px;
  padding: 20px;
}

/* 边框 */
.img {
  border: 1px solid black;
}

Vererbung

Stile in CSS können vererbt werden. Beispielsweise können wir für alle Absätze in einem HTML-Dokument ein Schriftartattribut festlegen und die Werte dieser Attribute können automatisch an den in jedem Absatz enthaltenen Text geerbt werden.

Beispiel:

/* 字体 */
body {
  font-family: Arial, sans-serif;
}

Kaskadierung

Wenn mehrere CSS-Regeln auf dasselbe HTML-Element angewendet werden, werden sie kaskadiert. Das bedeutet, dass einige Regeln eine höhere Priorität haben und Vorrang vor anderen Regeln haben. Das in CSS verwendete Kaskadenprinzip ist:

Stilspezifität: Einfach ausgedrückt ist es die Komplexität des Selektors.
Dateireihenfolge: Spätere Regeln überschreiben frühere Regeln.

Beispiel:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 优先级为1，文件顺序为1 */
    p {
      color: red;
    }
  </style>
  <style>
    /* 优先级为10，文件顺序为2 */
    .green {
      color: green;
    }
  </style>
  <style>
    /* 优先级为100，文件顺序为3 */
    #blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p class="green" id="blue">This text is blue.</p>
</body>
</html>

Externes Stylesheet

Das Verknüpfen eines CSS-Stylesheets mit einem HTML-Dokument mithilfe des 2cdf5bf648cf2f33323966d7f58a7f3f-Tags gilt allgemein als bewährte Methode. Dies hat folgende Vorteile:

Zwischenspeicherbar: Der Browser kann das CSS-Stylesheet zwischenspeichern, um es beim nächsten Mal zu laden.
Wartbarkeit: Stile können in separaten Dateien bearbeitet und verwaltet werden.
Browserübergreifend geeignet: Durch die Verwendung externer Stylesheets können Sie die Stilkonsistenz über verschiedene Browser hinweg sicherstellen.
Anwendbarkeit: Derselbe Stil kann auf mehrere Seiten angewendet werden, um Konsistenz zu gewährleisten.

Beispiel:



<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

  This text is red.
  This text is blue.
  This text is green.

/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

Internes Stylesheet

Manchmal kann das Speichern eines CSS-Stylesheets in einem HTML-Dokument die Seitenladegeschwindigkeit verbessern. Wenn das Stylesheet nur für die aktuelle Seite gilt, können Sie das Stylesheet in einem c9ccee2e6ea535a969eb3f532ad9fe89-Tag platzieren.

Beispiel:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 内部样式表 */
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>
</html>

Inline-Stile

Inline-Stile sind eine Möglichkeit, CSS-Regeln direkt auf HTML-Elemente anzuwenden. Verwenden Sie das „style“-Attribut in HTML-Tags als Ort für die Eingabe von CSS.

Beispiel:

<!DOCTYPE html>
<html>
<head>
  <title>Inline Style Example</title>
</head>
<body>
  <p style="color: red; font-size: 20px;">This text is red and 20px font size.</p>
</body>
</html>

CSS-Box-Modell

Das CSS-Box-Modell ist eine Möglichkeit, Boxen in einem HTML-Dokument zu erstellen und anzuordnen. Eine Box ist ein rechteckiger Bereich eines HTML-Elements, der andere HTML-Elemente enthalten kann.

Das CSS-Box-Modell besteht aus den folgenden Teilen:

Inhalt
Padding
Rand
Ränder

Beispiel:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      padding: 20px;
      border: 10px solid black;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="box">This is a box.</div>
</body>
</html>

Zusammenfassung

CSS ist ein wichtiger Bestandteil beim Erstellen einer Webseite , durch Verwendung von CSS können wir den Stil und das Layout von HTML-Elementen einfach steuern. Wir können CSS-Regeln mithilfe von Selektoren, Eigenschaften, Werten, Vererbung, Kaskadierung, externen Stylesheets, internen Stylesheets und Inline-Stilen definieren und Boxen mithilfe des CSS-Boxmodells erstellen und gestalten. Eine kompetente Verwendung von CSS kann nicht nur die Effizienz der Webentwicklung verbessern, sondern auch besser aussehende, leichter lesbare und einfacher zu wartende Webseiten 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!

css html 标识符继承 Attribute 选择器样式表外边距内边距 margin padding border 伪类 background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist CSS?Nächster Artikel：Was ist CSS?

In Verbindung stehende Artikel

Mehr sehen