Wie schreibe ich im CSS-Stil?-Front-End-Fragen und Antworten-php.cn

Wie schreibe ich im CSS-Stil?

WBOY

Freigeben： 2023-05-27 11:02:37

Original

805 Leute haben es durchsucht

CSS (Cascading Style Sheets) ist eine Sprache, die zur Beschreibung des Stils von Webseiten verwendet wird. CSS bietet eine Fülle von Stilattributen, mit denen wir den Stil von Webseiten flexibler steuern können. In diesem Artikel werde ich einige Methoden zum Schreiben von CSS-Stilen vorstellen, die Ihnen helfen sollen, die Stilkontrolle besser zu beherrschen.

1. Inline-Stil

Inline-Stil dient zum Festlegen des Stilattributs im Stilattribut des HTML-Tags, wie unten gezeigt:

<p style="color: red;">这是一段红色的文字。</p>

Nach dem Login kopieren

Diese Schreibmethode ist sehr intuitiv, es wird jedoch nicht empfohlen, sie häufig zu verwenden, da sie den HTML-Code langwierig und schwierig zu pflegen macht.

2. Eingebetteter Stil

Eingebetteter Stil verwendet Stil-Tags am Kopf der HTML-Datei und schreibt CSS-Code hinein. Wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>嵌入式样式</title>
  <style type="text/css">
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>这是一段红色的文字。</p>
</body>
</html>

Nach dem Login kopieren

Diese Schreibmethode ist besser als der Inline-Stil, da sie den gesamten Stilcode im Kopf platzieren und die Codemenge auf der Seite reduzieren kann. Wenn jedoch mehrere HTML-Dateien denselben Stil verwenden müssen, muss der Stilcode erneut kopiert werden, was zu erhöhten Wartungskosten führt.

3. Externer Stil

Der externe Stil besteht darin, den Stilcode in eine separate CSS-Datei einzufügen und ihn dann in die HTML-Datei einzuführen. Wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部样式</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <p>这是一段蓝色的文字。</p>
</body>
</html>

Nach dem Login kopieren

Der Stilcode wird in der Stildatei style.css abgelegt, wie unten gezeigt:

p {
  color: blue;
}

Nach dem Login kopieren

Diese Schreibweise ist die beste, weil sie die kombiniert Die Trennung von Stilcode und HTML-Code reduziert die Redundanz von HTML-Code und macht das gesamte Seitenlayout klarer. Wenn gleichzeitig mehrere HTML-Dateien diesen Stil verwenden müssen, müssen Sie nur die Stildatei ändern und alle Seiten, die auf diesen Stil verweisen, werden automatisch aktualisiert.

Darüber hinaus gibt es einige Schreibmethoden im CSS-Stil, die auch in der tatsächlichen Entwicklung sehr verbreitet sind:

4. Selector

Select Converter wird verwendet um das HTML-Element anzugeben, auf das der Stil angewendet werden soll. CSS unterstützt eine Vielzahl von Selektoren. Die häufigsten sind:

Elementselektor: Wählt HTML-Elemente eines bestimmten Typs aus.

p {
  color: red;
}

Nach dem Login kopieren

ID-Selektor: Wird verwendet, um HTML-Elemente mit einer bestimmten ID auszuwählen.

#myId {
  color: blue;
}

Nach dem Login kopieren

Klassenselektor: Wird zum Auswählen von HTML-Elementen mit bestimmten Klassennamen verwendet.

.myClass {
  color: green;
}

Nach dem Login kopieren

Attributauswahl: Wählen Sie HTML-Elemente mit bestimmten Attributen aus.

input[type="text"] {
  border: 1px solid red;
}

Nach dem Login kopieren

5. Stilattribute

Stilattribute werden verwendet, um den Stil von Elementen zu beschreiben. CSS unterstützt viele Stilattribute, hier sind nur einige gängige:

color: Textfarbe.

p {
  color: red;
}

Nach dem Login kopieren

font-size: Schriftgröße.

p {
  font-size: 14px;
}

Nach dem Login kopieren

font-family: Schriftart.

p {
  font-family: Arial, sans-serif;
}

Nach dem Login kopieren

background-color: Hintergrundfarbe.

p {
  background-color: yellow;
}

Nach dem Login kopieren

Grenze: Grenze.

p {
  border: 1px solid black;
}

Nach dem Login kopieren

Marge: Marge.

p {
  margin: 10px;
}

Nach dem Login kopieren

Polsterung: Polsterung.

p {
  padding: 5px;
}

Nach dem Login kopieren

6. Pseudoklassen und Pseudoelemente

Pseudoklassen und Pseudoelemente werden verwendet, um Stile zu bestimmten Zuständen oder Teilen von Elementen hinzuzufügen.

Pseudoklasse: Wird verwendet, um einen speziellen Zustand eines Elements zu beschreiben.

a:hover {
  color: red;
}

Nach dem Login kopieren

Pseudoelement: Wird zur Beschreibung eines speziellen Teils des Elements verwendet.

p::first-line {
  font-weight: bold;
}

Nach dem Login kopieren

Das Obige ist die übliche Methode zum Schreiben von CSS-Stilen. Natürlich müssen in der tatsächlichen Entwicklung in vielen Fällen unterschiedliche Stile in unterschiedlichen Stylesheets geschrieben werden (z. B. Druckstile, mobile Stile usw.), und auch die Beziehung zwischen diesen Stylesheets muss beachtet werden. Gleichzeitig müssen auch die Leistungsprobleme von CSS-Stilen berücksichtigt werden, um übermäßige Verschachtelung und übermäßig komplexe Selektoren zu vermeiden. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonWie schreibe ich im CSS-Stil?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!