So verwenden Sie CSS

WBOY
Freigeben: 2023-05-29 09:42:37
Original
734 Leute haben es durchsucht

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.

  1. 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 -Tag innerhalb des -Tags ein.

Zum Beispiel:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
Nach dem Login kopieren
  1. 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;
}
Nach dem Login kopieren
  1. 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;
}
Nach dem Login kopieren
  1. 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;
}
Nach dem Login kopieren
  1. 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;
}
Nach dem Login kopieren
  1. 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>
Nach dem Login kopieren
  1. Externes Stylesheet

Das Verknüpfen eines CSS-Stylesheets mit einem HTML-Dokument mithilfe des -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.

Nach dem Login kopieren
/* style.css */
.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}
Nach dem Login kopieren
  1. 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