HTML kann nur einige Informationen darstellen und verfügt nur über sehr begrenzte Leistungsfähigkeiten. Es muss in Verbindung mit CSS verwendet werden, um die Seite schöner zu machen. Auf einer Webseite kann der gesamte Stilcode aus dem HTML-Dokument in ein separates Stylesheet verschoben werden.
CSS-Stile können als separate Dateien (Dateien vom Typ .css) in HTML-Dokumente eingeführt oder direkt in HTML-Dokumente geschrieben werden. Sie können grob in die folgenden vier Methoden unterteilt werden:
1. Eingebettetes Stylesheet
Eingebettet: Konzentrieren Sie CSS-Stile im Tag-Paar <style></style> des Tag-Paares <head></head> der Webseite.
Fügen Sie CSS-Stile zum <style>-Tag im <head>-Tag von HTML hinzu. Mithilfe von Inline-Stylesheets definierte CSS-Stile können nur innerhalb der aktuellen Webseite verwendet werden.
<!DOCTYPEhtml><html><head><title>Inline-Stil</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / head><body><h1>Style</h1></body></html>Da das eingebettete Stylesheet den CSS-Stil innerhalb des HTML-Dokuments definieren muss, erhöht sich die Größe des Dokuments. Wenn auch andere Dokumente denselben Stil im eingebetteten Stylesheet verwenden müssen, kann er nicht in andere Dokumente eingeführt werden Eine Neudefinition in anderen Dokumenten führt zu Coderedundanz und ist einer späteren Wartung nicht förderlich.
2. Inline-Stile
Inline: Auch Inline genannt. Der CSS-Stil wird im Stilattribut des Tags festgelegt. Dieser Ansatz spiegelt nicht die Vorteile von CSS wider;
Beim Inline-Stil werden die Stilinformationen direkt im Stilattribut des HTML-Tags definiert. Da der Inline-Stil innerhalb des Tags definiert ist, ist er nur für das Tag gültig, in dem er sich befindet.
<!DOCTYPEhtml><html><head><title>Inline</title></head><body><h1style=color:maroon;margin-left:40px>Inline</h1></body ></html >Obwohl der Inline-Stil HTML-Tags problemlos CSS-Stile verleihen kann, liegen auch seine Mängel auf der Hand, und es wird nicht empfohlen, ihn zu häufig zu verwenden.
(1) Das Definieren von Inline-Stilen erfordert die Definition des Stilattributs in jedem HTML-Tag, was sehr unpraktisch ist.
(2) Seien Sie besonders vorsichtig, wenn Sie in Inline-Stilen doppelte oder einfache Anführungszeichen verwenden, da Attribute von HTML-Tags normalerweise doppelte Anführungszeichen verwenden, um den Attributwert einzuschließen, z. B. <Eingabetyp = Text>.
(3) In Inline-Stilen definierte Stile können nirgendwo anders wiederverwendet werden;
(4) Inline-Stile sind bei der späteren Wartung sehr unpraktisch, da eine Website normalerweise aus vielen Seiten besteht und beim Ändern des Seitenstils die Seiten einzeln geändert werden müssen.
(5) Das Hinzufügen zu vieler Inline-Stile führt zu einer Vergrößerung des HTML-Dokuments.
3. Externe Stylesheets
Linktyp: Wie der vierte Importtyp werden beide als externer Typ oder externer Linktyp bezeichnet. Verwenden Sie den Link, um auf externe CSS-Dateien zu verweisen.
Externe Stylesheets sind die gebräuchlichste und empfohlene Methode, um auf CSS zu verweisen. Sie müssen lediglich den CSS-Stil in einer Datei im .css-Format definieren und dann das HTML-Tag <link> verwenden, um die Stildatei im .css-Format auf HTML anzuwenden das Dokument.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>Externes Stylesheet</h1></body>< / html>
Da der CSS-Stil in einer separaten Datei im CSS-Format definiert ist, kann er zwischen mehreren Seiten referenziert werden. Wenn Sie den Stil einer Webseite ändern möchten, müssen Sie nur diese CSS-Stildatei ändern, was sehr praktisch ist.
4. Stylesheet importieren
Importiert: Verwenden Sie @import, um auf externe CSS-Dateien zu verweisen.
Sie können @import auch verwenden, um auf externe Stylesheets zu verweisen, was der Verwendung des <link>-Tags ähnelt. Erstellen Sie zuerst eine allgemeine style.css und importieren Sie zuerst alle Stile in style.css.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>Externes Stylesheet</h1></body></html >
style.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1. CSS: (Die CSS von 1 bis 4 sind gleich, sie fügen alle Stile hinzu)
.top1{list-style-type:none;margin:0;padding:0;}