So fügen Sie CSS-Stile in HTML ein: 1. Verwenden Sie das Style-Attribut, um CSS-Code in ein bestimmtes HTML-Tag einzufügen. 2. Fügen Sie den CSS-Code in das Style-Tag-Paar im Kopfteil des Dokuments ein Wenn Sie Code in eine externe CSS-Datei einfügen möchten, verwenden Sie das Link-Tag, um ihn in das HTML-Dokument einzufügen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. Inline
Verwenden Sie das Style-Attribut, um CSS-Stile innerhalb bestimmter HTML-Tags festzulegen.
Es wird empfohlen, kein Inline-CSS zu verwenden, da jedes HTML-Tag separat gestaltet werden muss und die Verwaltung der Website sehr schwierig werden kann, wenn Sie nur Inline-CSS verwenden. In bestimmten Situationen kann es jedoch nützlich sein. Beispielsweise in Situationen, in denen Sie keinen Zugriff auf CSS-Dateien haben oder Stile nur auf ein einzelnes Element anwenden müssen. Ein Beispiel für eine HTML-Seite mit Inline-CSS ist wie folgt:
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>2. Inline
Der Inline-CSS-Stil dient dazu, den CSS-Code im
-Bereich zu platzieren. Inline-CSS muss zwischen den -Tags platziert werden.Klassen und IDs können zum Referenzieren von CSS-Code verwendet werden, sie sind jedoch nur auf dieser bestimmten Seite aktiv. Auf diese Weise eingebettete CSS-Stile werden jedes Mal heruntergeladen, wenn die Seite geladen wird, was die Ladegeschwindigkeit verbessern kann. Die Verwendung von Inline-Stylesheets ist in manchen Situationen nützlich, beispielsweise beim Versenden einer Seitenvorlage. Es ist viel einfacher, eine Vorschau anzuzeigen, da sich alles auf einer Seite befindet.
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>3. Externer Link
Beim externen Link wird das Link-Tag-Element verwendet, um auf die externe CSS-Datei (.css-Datei) in der HTML-Seite zu verweisen die Seite.
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Erläuterung jedes Attributs:
href-Attribut legt die Adresse der externen Stylesheet-Datei fest, die eine relative Adresse oder eine absolute Adresse sein kann. Das Attribut
rel definiert das zugehörige Dokument, also hier das zugehörige Stylesheet.
type-Attribut definiert den Typ der importierten Datei. Wie das Style-Element gibt text/css eine CSS-Textdatei an.
Im Allgemeinen sollten beim Definieren des -Tags drei grundlegende Attribute definiert werden, darunter href ein unbedingt festzulegendes Attribut.
Sie können auch das Titelattribut im Link-Element hinzufügen, um den Titel des optionalen Stylesheets festzulegen. Das heißt, wenn ein Webdokument mehrere Stylesheets importiert, können Sie die anzuwendende Stylesheet-Datei über den Titelattributwert auswählen .
Tipps: Im Firefox-Browser können Sie im Menü die Option „Ansicht -> Seitenstil“ auswählen. Anschließend wird der Titelattributwert im Untermenü angezeigt. Sie müssen lediglich verschiedene Titelattributwerte auswählen Erforderliche Stylesheet-Dateien können selektiv angewendet werden. Der IE-Browser unterstützt diese Funktion nicht.
Darüber hinaus steht das Titelattribut mit dem rel-Attribut in Zusammenhang, und künftige Webdokumente werden mehrere -Elemente verwenden, um verschiedene externe Dateien zu importieren, z. B. Stylesheet-Dateien, Skriptdateien und Designdateien und enthält sogar zusätzliche Zusatzdateien zur persönlichen Anpassung. Nachdem Sie so viele Dateien unterschiedlichen Typs und Namens importiert haben, können Sie das Titelattribut zur Auswahl verwenden. Zu diesem Zeitpunkt wird die Rolle des rel-Attributs deutlich. Es kann den importierten Dateityp angeben, der beim ersten Mal angewendet werden soll Derzeit kann es nur dem CSS-Stylesheet-Typ zugeordnet werden.
Externe Stile sind die beste Lösung für CSS-Anwendungen. Eine Stylesheet-Datei kann von mehreren Webseiten referenziert werden, und eine Webseitendatei kann mehrere Stylesheets importieren, indem das Link-Element wiederholt verwendet wird, um verschiedene Stylesheet-Dateien zu importieren.
Verwandte Empfehlungen: „CSS-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonSo fügen Sie einen CSS-Stil in HTML ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
