Es gibt 3 Möglichkeiten, dem HTML-Dokument CSS-Stile hinzuzufügen.
- Inline-Stil - Hinzufügen von Style-Attributen zu HTML-Elementen
- Interner Stil - Verwendung des Elements <style> im Tag <head>
- Externer Stil - Erstellen einer externen CSS-Datei
Inline-Stil
Sie können das Attribut style eines beliebigen HTML-Elements verwenden, um Style-Regeln zu definieren. Diese Regeln werden nur auf dieses Element angewendet. Das Style-Attribut kann eine beliebige CSS-Eigenschaft enthalten.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h2 style="color:#1c87c9">Irgendeine Überschrifte</h2>
<p style="color:#8ebf42; font-size:15px">Irgendein Absatz</p>
</body>
</html>Nun lassen Sie uns das oben genannte Beispiel erklären, wo wir den Inline-Stil verwendet haben. Im Tag <h2> haben wir style="color: #1c87c9" geschrieben, was bedeutet, dass unser Titel (Überschrift) #1c87c9 sein soll.
Das Gleiche haben wir mit dem Tag <p> gemacht. Wir haben color: #8ebf42; font-size: 15px innerhalb unseres Tags geschrieben, was bedeutet, dass die Information zwischen dem Starttag <p> und Endtag </p> #8ebf42 ist und die Textgröße 15px sein wird.
Interner Stil
Mit dieser Methode enthält jede HTML-Datei den CSS-Code, der für die Gestaltung der Seite benötigt wird. Sie fügen einfach den CSS-Code dem Tag <head> </head> jeder HTML-Datei ein, die Sie gestalten möchten. Betrachten wir das folgende Beispiel.
Die Änderungen, die Sie vornehmen, betreffen nur eine Seite. Wenn Sie mehr Seiten gestalten müssen, sollten Sie diese nacheinander ändern.
Das folgende Beispiel zeigt, dass der Absatz weiß und die Seite #1c87c9 ist.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Einige Informationen</p>
</body>
</html>Externer Stil
Externer Stil ist weit verbreitet, um allgemeine Stile auf die gesamte Website anzuwenden. Es bezieht sich auf die Erstellung einer externen CSS-Datei, die alle Style-Informationen enthält. Sie können diese Art von Datei mit jedem Text- oder HTML-Editor wie "Notepad" oder "Sublime text” erstellen.
Eine CSS-Datei enthält nur CSS, und Sie speichern sie einfach mit der Dateierweiterung .css. Um ein externes Stylesheet mit einer Webseite zu verbinden, sollen Sie das Tag <link> im Abschnitt <head> des HTML-Dokuments verwenden. Jede Webseite soll mit dem Stylesheet verbindet sein.
Bei der Verwendung eines externen Stylesheets werden alle HTML-Dateien mit einer CSS-Datei verknüpft, was zu einem einheitlichen Look und Feel führt. Wenn Sie den Stil der Webseiten ändern möchten, müssen Sie nur entsprechende Änderungen in einer .css-Datei vornehmen.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Übe dein Wissen
