HTML (Hypertext Markup Language) ist die Standardsprache für die Strukturierung von Webseiten. Während das Cascading Style Sheet verwendet wird, um den HTML -Elementen mehrere Styling -Eigenschaften bereitzustellen. Genauer.

Drei Methoden zum Hinzufügen eines CSS -Stilblatts zu einer HTML -Datei sind interne CSS, Inline -CSS und externe CSS. In diesem Artikel wird jedoch geführt, wie Sie ein externes Stylesheet in HTML hinzufügen können.

Was ist ein externes CSS -Stilblatt?

Das externe Stilblatt ist auf eine Weise hilfreich, die das Aussehen unserer Website ändern kann, indem wir nur eine Datei ändern. Die HTML -Datei muss einen Link zum Stylesheet in der “haben“Element, das in der Kopfkomponente der HTML -Seite erwähnt wird.

Das folgende Beispiel zeigt mehrere HTML.

Beispiel: Erstellen und Verknüpfung externer Stylesheet mit HTML -Datei?

Fügen Sie in der HTML -Datei zunächst ein Div -Element mit einem Klassennamen hinzu “hauptsächlich”. In diesem Bereich fügen Sie hinzu

Element mit Klassennamen als “ÜberschriftUm eine Überschrift zu gewährleisten. Der

Element mit ID als “paraWird dann hinzugefügt, um Textinhalte bereitzustellen.

Schritt 1: HTML -Datei erstellen

Unten finden Sie den HTML -Code für das besprochene Szenario:

Dies ist das Überschriftenelement

Dies ist die Hauptdiv

Da wir keine der HTML -Elemente mit Styling -Eigenschaften zur Verfügung gestellt haben, sieht der Ausgangsbildschirm so aus:

Im nächsten Abschnitt erstellen wir ein Stilblatt, das die Styling -Eigenschaften der Elemente enthält, die wir in der HTML -Datei erstellt haben.

Schritt 2: Erstellen Sie externes Stilblatt

Erstellen Sie eine neue Datei und nennen Sie sie mit einer Erweiterung.CSS”. Öffnen Sie es und schreiben Sie Code wie im folgenden Codeblock angegeben.

Style Main Div

.hauptsächlich
Breite: 500px;
Höhe: 200px;
Hintergrundfarbe:#001253;
Text-Align: Mitte;
Padding-Top: 20px;
Rand: 0px Auto;
Grenze: 5px Solid RGB (194, 194, 189);
Schriftfamilie: Kursiv;

Die auf die HTML -Elemente im externen Stilblatt angewendeten Eigenschaften werden nachstehend beschrieben:

• “.hauptsächlichWird verwendet, um auf die Klasse des Div -Elements zuzugreifen, wo die “.”, Gefolgt vom Klassennamen, ist als Klassenauswahl bekannt.
• “BreiteEigenschaft wird für die Einstellung der Breite des Elements verwendet.
• “HöheEigenschaft wird für die Einstellung der Höhe des Elements verwendet.
• “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe festzulegen.
• “TextausrichtungIst die Eigenschaft, die für die Ausrichtung des Textes verwendet wird.
• “PolsterungIst die Eigenschaft, die verwendet wird, um Platz über dem Inhalt des Divs hinzuzufügen.
• “Rand”Mit Wert 0px ist automatisch Speicherplatz 0px von oben und unten und gleicher Platz links und rechts neben dem Element.
• “GrenzeDas Eigentum wird mit dem Wert 5PX Solid RGB (194, 194, 189) festgelegt, wobei sich 5px auf die Breite des Grenze bezieht, fest ist der Linientyp, und RGB (194, 194, 189) ist der Grenzfarbcode.
• “Schriftfamilie”Mit dem Value Cursive lässt der Schriftstil so aussehen, als wären sie handgeschrieben.

Style id para

#para
Schriftgröße: 25px;
Schriftdicke: fett;
Farbe: #ffb9b9;

Das ID -Element mit Namensabschnitt der

Element -ID mit den unten erklärten Eigenschaften gestaltet:

• “#PARA”Wird verwendet, um auf das ID -Element von HTML zuzugreifen. Der "#”Zeichen ist als ID -Selektor bekannt.
• “SchriftgrößeDie Eigenschaft wird für die Einstellung der Schriftgröße verwendet.
• “Schriftgewicht”Mit dem als fett festgelegten Wert macht die Schriftart fett.
• “FarbeDie Eigenschaft wird für die Einstellung der Schriftfarbe verwendet.

Stilüberschrift

.Überschrift
Farbe: Whitesmoke;

Die Schriftfarbe der Kämpfe ist als "eingestellt"weißer Rauch"Durch die Verwendung der Immobilie"Farbe”.

Schritt 3: Verknüpfen Sie das externe Stilblatt mit HTML

Im Kopfabschnitt der HTML -Datei werden wir nun den Link zum externen Stilblatt angeben:

Mehrere Attribute können im HTML -Link -Tag verwendet werden. Die im Link -Element angegebenen Attribute werden nachstehend beschrieben:

• “relDas Attribut wird verwendet, um den Browser über die importierte Datei wie das Stylesheet zu informieren.
• “hrefAttribut gibt den Dateipfad an.
• “TypDas Attribut wird verwendet, um den Inhalt der importierten Datei anzugeben.

Wie im folgenden Bild gezeigt, werden die Styling -Eigenschaften, die im externen Stilblatt bereitgestellt werden, erfolgreich angewendet:

Wir haben erfolgreich gelernt, die CSS -Datei mit der HTML -Datei zu verknüpfen.

Abschluss

CSS ist das Kaskadierungsstilblatt, das die HTML -Elemente unterschiedliche Styling -Eigenschaften bietet. Es gibt drei Möglichkeiten, das CSS mit dem HTML zu verbinden: Inline -CSS, externes CSS und interner CSS. In HTML im Kopfabschnitt wird die Verbindung zum externen Stilblatt unter Verwendung des Elements angegeben. Dieser Artikel hat das Verfahren zum Erstellen und Verknüpfen externer Stilblätter mit HTML gezeigt.