CSS-Stylesheets können Entwicklern dabei helfen, den Informationsinhalt eines Dokuments von der trivialen Angelegenheit der Darstellung eines Dokuments zu trennen, d. h. den Stil vom Inhalt zu trennen: 1. Sie können denselben Inhalt mit verwenden verschiedene Stile. 2. Vermeiden Sie Duplikate. 3. Vereinfachen Sie die Wartung. 4. Reduzieren Sie die Effizienz der Webseitenübertragung.
Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS3, Thinkpad T480-Computer.
(Empfohlenes Tutorial: CSS-Video-Tutorial)
Warum CSS-Stylesheets verwenden?
CSS hilft Entwicklern, den Informationsgehalt eines Dokuments von der trivialen Frage seiner Präsentation zu trennen. Die kleinen Dinge an der Präsentation eines Dokuments werden als Stil des Dokuments bezeichnet. Die Trennung von Stilen und Inhalten hat folgende Vorteile:
Vermeidet Duplikate
Erleichtert die Wartung
Sie können denselben Inhalt mit unterschiedlichen Stilen für verschiedene Zwecke verwenden
Ihre Website Es kann Tausende ähnlicher Inhalte geben Seiten. Mithilfe von CSS können Sie Stilinformationen in einer gemeinsamen Datei speichern, die von allen Seiten gemeinsam genutzt wird. Wenn ein Benutzer eine Webseite öffnet, lädt der Browser des Benutzers nur Stile für den Seiteninhalt. Wenn ein Benutzer eine Webseite druckt, sollten Sie verschiedene Stile bereitstellen, um sicherzustellen, dass die gedruckte Seite lesbar ist.
Normalerweise verwenden Sie HTML, um den Inhalt der Seite und nicht den Stil zu beschreiben, und verwenden CSS, um den Stil der Seite und nicht den Inhalt anzugeben. Natürlich gibt es Ausnahmen, und HTML kann auch einige Methoden zum Festlegen von Stilen bereitstellen. In HTML können Sie beispielsweise das Tag verwenden, um Text fett darzustellen, und Sie können die Hintergrundfarbe der Seite im Tag angeben. Wenn Sie CSS verwenden, vermeiden Sie normalerweise die Verwendung der HTML-Stilfunktionen, sodass alle Stilinformationen an einem Ort gespeichert werden.
Der Hauptzweck der Verwendung von CSS-Stylesheets besteht darin, die Arbeitsteilung und Zusammenarbeit beim Webdesign zu erleichtern. Beispielsweise wird der HTML-Teil von einer Person oder einem Team erledigt, der JS-Programmteil wird auch von einer Gruppe von Personen erledigt , und das CSS wird auch den Profis überlassen. Auf diese Weise kann die Effizienz definitiv verbessert werden. Genau wie bei der Renovierung eines Hauses können sowohl harte als auch weiche Dekorationen auf jeden Fall schnell und gut durchgeführt werden. Im Gegenteil, wenn alle Arbeiten einem Ingenieurteam übergeben werden, können Qualität und Bauzeitplan nicht garantiert werden.
Darüber hinaus kann das CSS-Stylesheet einer Webseite intakt von einer anderen Webseite oder sogar Webseiten auf anderen Websites verwendet werden. Dies bedeutet, dass CSS wiederverwendet werden kann, was die Codemenge auf der Webseite erheblich reduzieren kann Die Effizienz der Webseitenübertragung kann auch dazu führen, dass die Website ein einheitliches Erscheinungsbild behält, und natürlich verringert sich auch die Arbeitsintensität der Webdesigner. Dies ist so, als ob der Dekorationsstil eines Hauses vollständig auf ein anderes Haus mit ähnlicher Struktur kopiert werden kann. Dies kann nicht nur die Kosten für die Hausdekoration senken, sondern auch den einheitlichen Dekorationsstil des Hauses beibehalten.
Übung: Erstellen Sie ein Stylesheet für ein HTML-Dokument
Erstellen Sie ein Stylesheet
1. Diese Datei ist Ihr Stylesheet. Nennen Sie es style1.css
2. Kopieren Sie die folgende Codezeile und speichern Sie die Datei:
strong { color: red; }Verknüpfen Sie Ihr Dokument und Ihr Stylesheet
1 Ihre Unterlagen. Benennen Sie es nach Belieben
2. Kopieren Sie den folgenden Code und kopieren Sie ihn. Bitte zitieren Sie Ihr eigenes Stylesheet in der Zeile <
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>Cascading Style Sheets
Weitere Kenntnisse zum Thema Programmierung finden Sie unter:Programmierkurse ! !
Das obige ist der detaillierte Inhalt vonWarum CSS-Stylesheets verwenden?. 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)
