Heim > Artikel > Web-Frontend > Welche Möglichkeiten gibt es, Stile in CSS einzuführen?

Welche Möglichkeiten gibt es, Stile in CSS einzuführen?

清浅Original: 2018-11-17 16:26:396367Durchsuche

In diesem Artikel erfahren Sie, wie man CSS-Stylesheets einführt und welche Vor- und Nachteile sie haben. Er hat einen gewissen Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Stylesheets können auf drei Arten in CSS eingeführt werden:

(1) Inline-Stil

(2) Eingebetteter Stil

(3) Externe Stile

Jeder dieser CSS-Stile hat seine Vor- und Nachteile.

Inline-Stile

Funktionen: (1) Inline-Stile werden in HTML-Elementen im Code platziert.

(2) Bei Verwendung von Inline-Stilen wirken sich die Stile nur auf die von Ihnen ausgewählten Elemente aus.

(3) Inline-Stil hat keinen Selektor

Beispiel:

<div style="width:100px;height:100px;border:1px solid #ccc"><div>

Dieser CSS-Inline-Stil kann nur geändert werden Wenn Sie die Breite und Höhe dieses Divs festlegen, ändert sich dadurch nicht der Stil von Divs oder Attributen auf der Seite. Dies ist eine der Einschränkungen von Inline-Stilen. Dies ist keine bewährte Vorgehensweise, da nur Änderungen an bestimmten Elementen vorgenommen werden und Inline-Stile ebenfalls sehr spezifisch sind. Dies macht es schwierig, sie mit anderen Nicht-Inline-Stilen zu überschreiben, und tatsächlich verwenden wir Inline-Stile auf Webseiten selten.

Eingebetteter Stil

Eigenschaften: (1) Wird im Stil-Tag 687c2c06e5a4995392a66a2c50c231d2 platziert Kopfteil.

(2) Der geschriebene Stil wird nur für die Webseite verwendet, auf der Sie ihn verwenden.

(3) Eingebettete Stile werden auch „interne Stile“ genannt.

Beispiel

<！DOCTYPE html>
<html>
<head>
<meta content =“text / html; charset = utf-8”/>
<title> Document </title>
<style>
div{
width:100px;
height:100px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Eingebettete Stile sind Stile, die im Kopf des Dokuments eingebettet sind. Eingebettete Stile wirken sich nur auf das Markup auf der Seite aus, auf der sie eingebettet sind. Auch dieser Ansatz macht einen der Vorteile von CSS zunichte. Da jede Seite über Stile verfügt, müssen Sie diese Änderung auf jeder Seite vornehmen, wenn Sie eine Site-weite Änderung vornehmen möchten, z. B. die Änderung der Linkfarbe von Rot auf Grün, da jede Seite ein eingebettetes Stylesheet verwendet. Das ist besser als Inline-Stile, aber in vielen Fällen immer noch problematisch.

Externes Stylesheet

Funktionen: (1) In einem separaten Dokument geschrieben und dann an verschiedene Webdokumente angehängt

(2) Änderung Es ist möglich wirkt sich auf alle Seiten aus, die Sie aufrufen

(3) Einfach zu ändern

Beispiel

<link href=“demo.css”rel=“stylesheet”type=“text/css>
在demo文件下写css样式

Die meisten Websites verwenden heutzutage externe Stylesheets und externe Stile werden in separaten Stilen geschrieben Dokument erstellt und dann an verschiedene Webdokumente angehängt werden. Externe Stylesheets wirken sich auf alle Dateien aus, mit denen sie verbunden sind. Wenn Sie also eine 20-seitige Website haben und jede Seite dasselbe Stylesheet verwendet, können Sie das Stylesheet einfach bearbeiten, um diese Seiten langfristig zu vervollständigen Website-Management einfacher. Der Nachteil externer Stylesheets besteht darin, dass die Seite diese externen Dateien abrufen und laden muss. Nicht jede Seite verwendet jeden Stil in der CSS-Tabelle, sodass viele eine viel größere CSS-Seite laden, als tatsächlich benötigt wird.

Zusammenfassung: Das Obige ist die Einführung dieses Artikels in die Einführung von Stylesheets in CSS. Ich hoffe, dass dieser Artikel jedem helfen kann, CSS-Stile zu verstehen.

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Stile in CSS einzuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Anzeige in CSSNächster Artikel：So verwenden Sie die Anzeige in CSS

In Verbindung stehende Artikel

Mehr sehen