CSS (ein Abkürzung von CAscading STyle SHeet) Gibt die Schnittstelle des HTML -Inhalts an. Das CSS ermöglicht es, die HTML -Seiten zu verschönern, indem die Farben, Schriftstile und viel mehr mit der Ästhetik der Seiten zusammenhängen. Die mit CSS definierten Eigenschaften werden auch an alle Kinderelemente geerbt. Wenn beispielsweise eine CSS -Eigenschaft in das Körper von HTML -Dokument hinzugefügt wird, werden alle Elemente innerhalb des Body -Tags diese Eigenschaft übernehmen. Um ein solches Ereignis zu vermeiden, können Sie Eigentum in bestimmten Kinderelementen angeben.

Es gibt verschiedene Möglichkeiten, CSS auf Ihr HTML -Dokument anzuwenden, und sind unten definiert:

• Im Einklang: Ermöglicht das Hinzufügen von CSS in einem bestimmten HTML -Tag
• Intern: Ein CSS -Code wird im Kopf -Tag (empfohlen, aber nicht erforderlich) einer HTML -Seite geschrieben
• Extern: Eine CSS -Datei wird extern durchgeführt, indem alle Eigenschaften definiert werden. Es wird der HTML -Seite mit dem hinzugefügt <Verknüpfung> Element

Wir haben diesen Leitfaden zusammengestellt, um alle möglichen Möglichkeiten zu demonstrieren, um CSS zu einer HTML -Seite hinzuzufügen.

So fügen Sie CSS zu einer Webseite hinzu

In diesem Abschnitt wird kurz die verfügbaren Ansätze beschrieben, um CSS zu einer HTML -Seite hinzuzufügen.

So fügen Sie Inline -CSS hinzu

Wie der Name der Technik schon sagt, können Sie einem einzelnen HTML -Element CSS hinzufügen. Der Stil Das Attribut eines Elements wird dafür ausgeübt. Üben wir das folgende Beispiel, um ein klareres Bild von Inline-CSS zu erhalten:

Beispiel

Der unten geschriebene Code fügt die Stile einem HTML -Tag hinzu

Linux -Hinweis

:

Linux -Hinweis

• Die Textfarbe ist auf grün eingestellt: dafür, die Farbe Eigentum des Stil Attribut wird verwendet
• Der Text von

  ist zentriert ausgerichtet: die Textausrichtung Eigenschaft wird verwendet

• Der Überschriftentext wird unterstrichen: Um dies zu tun, der, der Textdekoration Eigenschaft des Stilattributs ist auf unterstreichen.

Die Web-Schnittstelle der oben genannten HTML-Seite wird unten angezeigt:

Neben den oben genannten Eigenschaften zeigen nur wenige HTML-Editoren die Dropdown-Liste der verfügbaren Eigenschaften. Daher wird empfohlen, Ihren HTML -Editor mit Bedacht auszuwählen, da die bessere Auswahl den Weg zum Hinzufügen von CSS auf die HTML -Seite erleichtert.

So fügen Sie interne CSS hinzu

Das interne CSS wird mit dem hinzugefügt Tag in der Element einer HTML -Seite. Angenommen, wir möchten verschiedene Stile hinzufügen Körper, Absätze, Und Abteilungen verwendet in einer HTML -Seite.

Das unten angezeigte Bild zeigt die verschiedenen Eigenschaften, die zu mehreren Abschnitten der HTML -Seite hinzugefügt werden, und alle diese Eigenschaften werden mit dem zugewiesen <Stil> Element.

- Die Hintergrundfarbe des Körpers wird schwarz sein

- Die Absätze haben roten Text, 1EM-Schriftgröße und links ausgerichtete Text

- Die Farbe der Abteilungen ist Antiquewhite und die Breite der Abteilungen hängt von der Breite des verwendeten Textes ab:

Das Web-Schnittwesen unter Verwendung der oben genannten Eigenschaften wird unten angezeigt:

So fügen Sie externe CSS hinzu

Das CSS kann zu Webseiten hinzugefügt werden, indem eine dedizierte CSS -Datei erstellt und dann auf einer Seite aufgerufen wird. Das externe CSS ist sehr nützlich, wenn Sie das gleiche Styling auf verschiedene HTML -Seiten anwenden müssen. Dieser Abschnitt enthält einen Verfahrensbeitrag, um eine externe CSS -Datei zu erstellen und zu verwenden:

Schritt 1: Erstellen Sie a .CSS -Datei

Öffnen Sie zunächst Ihren Code -Editor und erstellen Sie eine Datei mit .CSS Erweiterung (oder der Editor kann die Option zum Speichern als CSS -Datei anbieten). Die Datei, die wir hier verwenden, heißt als als LinuxHintStylesheet und wird wie folgt erstellt:

Öffnete eine neue Datei im Editor:

Danach klicken Sie auf Speichern unter:

Benannte diese Datei mit .CSS -Erweiterung und ausgewählte CSS als Dateityp:

Schritt 2: Fügen Sie der CSS -Datei Stile hinzu

Wir haben die folgenden Styling -Eigenschaften hinzugefügt:

- Die Hintergrundfarbe des Körpers ist Himmelblau

- Der H1 wird das haben Weiss Farbe

- Die Absätze haben die Schriftfamilie auf Serife und Textdekoration enthält überlaufen (Zeile über dem Text) Eigentum:

Das folgende Bild zeigt den Code an, der oben angegebene Stile enthält:

Schritt 3: Fügen Sie die CSS -Datei in das HTML -Dokument hinzu

Nachdem Sie eine CSS -Datei erstellt und hinzugefügt haben, müssen Sie die Datei zur Seite hinzufügen, auf der Sie diese Stile anwenden möchten. Wir wollen hinzufügen LinuxHintStylesheet Zu LinuxHint HTML -Dokument:

Der Das Element von HTML wird zum Importieren verwendet CSS Datei. Außerdem die rel Und href Die Eigenschaft des Verknüpfungselements wird ausgeübt, um die CSS -Datei einzubetten. Der rel Das Attribut definiert die Beziehung zwischen dem HTML -Dokument und der CSS -Datei. Während die href Eigenschaft des Elements enthält den Link zur CSS -Datei.

Sobald die obigen Schritte korrekt ausgeführt wurden, können Sie Ihre HTML-Seite mit den oben genannten Eigenschaften laden.

Abschluss

CSS ist eine Sprache, um die Webseiten (HTML/XML) präsentabel zu machen. CSS kann zu Webseiten hinzugefügt werden, indem eine der genannten Methoden in diesem Artikel übernommen wird. Die erste Methode verwendet das Stilattribut eines Elements, um verschiedene CSS -verwandte Eigenschaften hinzuzufügen. Die interne Methode übt die CSS -Sprache aus, indem sie Element im Kopf -Tag verwendet. Und die letzte Methode importiert eine externe CSS -Datei in eine bestimmte Webseite. Alle diese Methoden werden verwendet, um einer Webseite CSS hinzuzufügen, und die Auswahl einer Methode hängt vom Entwickler ab, wie er/sie beabsichtigt, Stile hinzuzufügen.