Heim >Web-Frontend >CSS-Tutorial >Wie trennt man Inhalt und Design mit CSS?
Wie trennt man Inhalt und Design mit CSS?
- WBOYnach vorne
- 2023-09-12 13:25:02753Durchsuche
Eine gute Website besteht immer aus einem perfekt strukturierten HTML-Dokument und einem schönen Design, das die Aufmerksamkeit des Benutzers auf sich zieht. Diese Art von Website kann die allgemeine Interaktivität der Website verbessern und sie attraktiver machen.
Beim Anwenden von Stilen auf unsere Webseiten verwenden wir Cascading Style Sheets, kurz CSS. Durch die Verwendung von CSS können wir unsere Website einfacher schöner gestalten. Es unterscheidet zwischen der Struktur eines HTML-Dokuments und seiner Präsentation, die sich auf die Elemente bezieht, die Benutzer sehen und mit denen sie interagieren.
Im Gegensatz zu langweiligen Websites, die einfach mit HTML erstellt wurden, ist ein einzigartiger und kreativer Stil zu einem Muss für Websites geworden.
CSS zusammenführen
Es gibt drei verschiedene Möglichkeiten, wie wir CSS in unsere Website integrieren können –
Inline-Stile – Wenn wir Stile auf jedes einzelne HTML-Tag anwenden, spricht man von Inline-Stilen.
Eingebettete Stile – Das Head-Tag ist im Style-Tag enthalten und es sieht so aus, als ob das CSS in die HTML-Datei eingefügt wurde. Dann verwenden Sie den Begriff „Embedded Style“.
Externe Stile – Dies ist die am meisten empfohlene Technik zur Verwendung von CSS, da sie dazu dient, CSS von HTML zu trennen. Der HTML-Inhalt ist mit einer CSS-Datei verbunden, die alle Styling-Informationen enthält. Mit diesem Styling-Ansatz können wir viele CSS-Dateien anhängen.
Durch die Verwendung separater Dateien und die Gruppierung ähnlicher Formattypen in demselben Attribut können wir die Länge des verwendeten Codes erheblich reduzieren. Dies trägt zur Codepflege bei, da weniger Code die Fehlersuche erleichtert und die allgemeine Lesbarkeit des Codes erheblich verbessert.
Ein weiterer Vorteil der Verwendung separater CSS-Dateien besteht darin, dass Sie dieselbe Datei so oft wie nötig wiederverwenden können, verglichen mit der herkömmlichen Formatierung, bei der Sie die Formatierung auf jeder Seite separat wiederholen müssen. Sie können die Datei wiederverwenden, indem Sie sie importieren oder das Arbeitsblatt verknüpfen.
Dateien mit Link-Tags verknüpfen
Wie bereits besprochen, können wir den Inhalt (Struktur) der Webseite vom Design (Formatierung und Stil) der Webseite trennen, indem wir .CSS-Dateien verwenden, die mit dem HTML-Dokument verknüpft sind. Mithilfe des html-Tags können wir CSS-Dateien mit HTML-Dateien verknüpfen.
Wir verwenden das Link-Tag, um anzugeben, wie sich zwei Dokumente zueinander verhalten. Es ist ein leeres Element, das heißt, es hat weder öffnende oder schließende Tags noch ist es ein selbstschließendes Tag. Alle benötigten Informationen werden in seinen Eigenschaften gespeichert. Es gibt viele Attribute, die in Link-Tags verwendet werden können, aber die, die wir verwenden müssen, werden unten definiert.
Rel – Es handelt sich um ein unverzichtbares Attribut des Link-Tags, das angibt, in welcher Beziehung das aktuell verwendete Dokument zu dem Dokument steht, auf das wir verlinken möchten. Normalerweise neigen wir dazu, Stylesheets oder Favicons einfach als Beziehungen zu betrachten.
Href – Wird verwendet, um die URL der zu verlinkenden Datei anzugeben.
Der Link-Tag wird im Head-Tag verwendet. Innerhalb desselben Dokuments kann jedes Tag mehrere Instanzen des Link-Tags haben, die auf verschiedene Dateien verweisen. Nachfolgend finden Sie die Syntax zum Verknüpfen von CSS-Dateien in HTML mithilfe von Link-Tags -
<link rel=”the Relationship” href=”source” >
Beispiel
Sehen wir uns ein Beispiel für die Verwendung von Link-Tags an, um die Inhalts- und Designteile einer Webseite zu trennen.
HTML-Teil
<html>
<head>
<title>Separating Content and Design using the link HTML tag</title>
<style>
body {
background-color: rgb(230, 228, 228);
}
h1 {
color: rgb(125, 211, 125);
}
h3 {
color: rgb(40, 15, 57);
}
h1,
h3{
text-align: right;
font-family: fantasy;
}
.formattedContent {
text-align: justify;
font-family: sans-serif;
margin-left: 2%;
margin-right: 2%;
color: rgb(149, 84, 72);
}
</style>
</head>
<body>
<div>
<h1>Example of separating content and design using external styleheet with link tag.</h1>
<h3>External Stylesheet and link tags</h3>
<p class="FormattedContent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam earum eligendi, dignissimos nobis a nam similique animi tenetur expedita pariatur nulla recusandae repellendus sequi quisquam corporis, voluptates nisi iure perferendis?
</p>
</div>
</body>
</html>
Einfuhranmeldung verwenden
Wir können die Importanweisung in CSS auch verwenden, um Inhalte vom Design zu trennen. Wir verwenden diese Anweisung immer dann, wenn wir in separaten Dateien gespeicherte Stile importieren müssen. Wir müssen lediglich die URL oder den Quellpfad angeben, unter dem sich die CSS-Datei in Anführungszeichen befindet.
Wir können mit dieser Aussage auch Medienabfragen verwenden. Dies ist eine flexible Anweisung, die auch die Kaskadierung von Stylesheets unterstützt.
Das Einzige, was wir ändern müssen, wenn wir es zur Trennung von Design und Inhalt verwenden, ist, das Link-Tag aus dem obigen Beispielcode zu entfernen und an seiner Stelle die folgende Anweisung hinzuzufügen.
<style> @import(‘LinkedStyle.css’) </style>
Die Ausgabe des Codes ist dieselbe wie die Ausgabe des obigen Beispielcodes.
Fazit
Zusammenfassend lässt sich sagen, dass CSS ein leistungsstarkes Tool für Webdesigner ist, das es ihnen ermöglicht, Inhalt und Design zu trennen. Durch die Verwendung von CSS können Designer ein einheitliches Erscheinungsbild auf mehreren Websites und Geräten erstellen und gleichzeitig dafür sorgen, dass die Inhalte organisiert und einfach zu aktualisieren sind. Mit den richtigen HTML- und CSS-Kenntnissen kann jeder Designer diese Funktion problemlos nutzen, um atemberaubende Designs zu erstellen, ohne Kompromisse bei der Benutzerfreundlichkeit oder Zugänglichkeit einzugehen.
Das obige ist der detaillierte Inhalt vonWie trennt man Inhalt und Design mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!