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>
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>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>
Der Stilcode wird in der Stildatei style.css abgelegt, wie unten gezeigt:
p {
color: blue;
}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:
p {
color: red;
}#myId {
color: blue;
}.myClass {
color: green;
}input[type="text"] {
border: 1px solid red;
}5. Stilattribute
Stilattribute werden verwendet, um den Stil von Elementen zu beschreiben. CSS unterstützt viele Stilattribute, hier sind nur einige gängige:
p {
color: red;
}p {
font-size: 14px;
}p {
font-family: Arial, sans-serif;
}p {
background-color: yellow;
}p {
border: 1px solid black;
}p {
margin: 10px;
}p {
padding: 5px;
}6. Pseudoklassen und Pseudoelemente
Pseudoklassen und Pseudoelemente werden verwendet, um Stile zu bestimmten Zuständen oder Teilen von Elementen hinzuzufügen.
a:hover {
color: red;
}p::first-line {
font-weight: bold;
}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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
