Cascading -Stilblätter alias CSS ist eine Stylingsprache, mit der HTML -Elemente auf Webseiten gestaltet werden. Mit CSS können Sie wiederverwendbare Stylesheets generieren, mit denen mehrere Webseiten gleichzeitig gestaltet werden können. Diese Stylesheets sparen viel Zeit und sind einfach zu pflegen. Aber haben Sie sich jemals gefragt, wie Sie CSS -Stylesheets mit HTML -Dokumenten verknüpfen können? Nun, wir haben die Antwort in diesem Blog für Sie zusammengefasst.

Die drei Möglichkeiten, die Sie mit HTML mithilfe von CSS verknüpfen können. Diese sind unten eingetragen.

1. Inline CSS
2. Interne CSS
3. Externes CSS

Alle diese Ansätze wurden in diesem Blog diskutiert.

So verknüpfen Sie Inline -CSS mit HTML

Wenn Sie diesen Ansatz anwenden. Fügen Sie einfach das Styling in das Start -Tag des Elements ein.

Dieser Ansatz wird nicht empfohlen, da das Styling innerhalb des Start -Tags eines bestimmten Elements durchgeführt wird, das den Code schwer zu lesen und zu warten macht. Darüber hinaus ist das Inline -CSS nicht wiederverwendbar. Daher müssen Sie jedes Element separat stylen, sodass die Stylingaufgabe umständlich ist, wodurch der Zweck hinter der Verwendung von CSS getötet wird.

Hier haben wir diesen Ansatz mit einem Beispiel demonstriert.

Html

So verknüpfen Sie CSS mit HTML

Inline CSS

Im obigen Code werden drei Elemente generiert, die sind; ,

, Und

. Alle drei werden mit dem Style -Attribut gestaltet. Der DIV -Behälter hat etwas Polsterung und Grenze, inzwischen werden die Überschrift und der Absatz eine bestimmte Textfarbe gegeben.

Ausgang

Die Elemente wurden mit Inline -CSS gestaltet.

So verknüpfen Sie CSS mit HTML intern

Dieser Ansatz weist die Benutzer an, Elemente mithilfe des Tags im Kopfabschnitt des HTML -Dokuments Elemente zu stylen. Sie können entweder die Namen der Elemente verwenden oder Klassen oder IDs verwenden, die Elementen zugewiesen sind, um sie mit internen CSS zu stylen.

Um die Arbeit dieses Ansatzes zu verstehen, konsultieren Sie das folgende Beispiel.

Html

So verknüpfen Sie CSS mit HTML

Inline CSS

Wieder drei Elemente, die sind ,

, Und

werden jedoch generiert, um sie zu stylen, wir verwenden das Tag im Kopfabschnitt des Dokuments. Beachten Sie, dass wir, da der obige Code nur aus drei Elementen besteht von ihnen anders. Der Code generiert die gleiche Ausgabe wie oben.

So verknüpfen Sie CSS mit HTML extern

Mit diesem Ansatz können Sie CSS mit HTML mit externen Stylesheets verknüpfen. In diesem Ansatz müssen Sie Ihre Stylesheets in einer separaten Datei erstellen und diese externe Datei dann mit dem Tag mit Ihrer HTML -Datei verknüpfen.

Hier haben wir Screenshots des Code -Editors beigefügt, um diesen Ansatz richtig zu demonstrieren.

Html

Dieses Screenshot oben zeigt die HTML -Datei. In diesem Dokument müssen Sie die Elemente nicht stylen. Stellen Sie einfach Ihre Elemente so auf, dass sie auf der Webseite angezeigt werden sollen. Verwenden Sie Ihr Stylesheet einfach das Attribut und geben Sie den Link der CSS -Datei zum HREF -Attribut des Tags an und geben.

CSS

Dieser Screenshot repräsentiert das CSS -Stylesheet. Verwenden Sie in dieser Datei einfach entweder die Elementnamen oder Klassen/IDs, die zum Stil zugewiesen sind. Der in den Screenshots gezeigte Code generiert auch die gleiche Ausgabe.

Dieser Ansatz wird als der beste Ansatz angesehen, da Sie es Ihnen ermöglichen, Stylesheets getrennt zu generieren, wodurch der Code sauber, lesbar und wartbar wird.

Abschluss

Um CSS mit HTML zu verknüpfen, sind drei Ansätze verfügbar Inline -CSS, internes CSS und externes CSS. Inline CSS erfordert, dass Sie das Style -Attribut eines bestimmten Elements im Start -Tag verwenden, um es zu stylen. In der Zwischenzeit können die Benutzer Elemente mithilfe des Tags im Kopfabschnitt des HTML -Dokuments Elemente stylen. Zuletzt bedeutet externes CSS, dass Sie Stylesheets in einer anderen Datei generieren und mit dem Tag mit dem HTML -Dokument verbinden müssen. Der externe CSS -Ansatz wird gegenüber dem Rest bevorzugt, da der Code lesbar und wartbar macht.