" 2. Verwenden Sie zum Einführen in das Style-Tag die Regel „@import". Die Syntax lautet „@import url( „CSS-Dateipfad“);“."/> " 2. Verwenden Sie zum Einführen in das Style-Tag die Regel „@import". Die Syntax lautet „@import url( „CSS-Dateipfad“);“.">

Heim  >  Artikel  >  Web-Frontend  >  So führen Sie ein externes Stylesheet in CSS ein

So führen Sie ein externes Stylesheet in CSS ein

青灯夜游
青灯夜游Original
2021-11-10 15:08:3116692Durchsuche

Einführungsmethode: 1. Verwenden Sie zum Einführen das Link-Tag. Die Syntax lautet „4876c3289ec49ab24ddcc130b01021a7". 2. Verwenden Sie zum Einführen die Regel „@import". Für das Style-Tag lautet die Syntax „@import url(“css file path“);“.

So führen Sie ein externes Stylesheet in CSS ein

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Externe Stylesheets müssen in Webdokumente importiert werden, bevor sie vom Browser erkannt und analysiert werden können. Externe Stylesheet-Dateien können auf zwei Arten in HTML-Dokumente importiert werden.

1. Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag, um die externe Stylesheet-Datei zu importieren:

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
Erläuterung jedes Attributs:

href Das Attribut legt die Adresse der externen Stylesheet-Datei fest, die eine relative Adresse oder eine absolute Adresse sein kann.

  • rel-Attribut definiert das zugehörige Dokument, hier bedeutet es, dass das zugehörige Dokument das Stylesheet ist. href 属性设置外部样式表文件的地址,可以是相对地址,也可以是绝对地址。

  • rel 属性定义关联的文档,这里表示关联的是样式表。

  • type 属性定义导入文件的类型,同 style 元素一样,text/css表明为 CSS 文本文件。

一般在定义 2cdf5bf648cf2f33323966d7f58a7f3f 标签时,应定义 3 个基本属性,其中 href 是必须设置属性。

也可以在 link 元素中添加 title 属性,设置可选样式表的标题,即当一个网页文档导入了多个样式表后,可以通过 title 属性值选择所要应用的样式表文件。

提示:在 Firefox 浏览器中可以在菜单中选择“查看 --> 页面样式”选项,然后在子菜单中会显示 title 属性值,只需选择不同的 title 属性值,可以有选择地应用需要的样式表文件。IE 浏览器不支持该功能。

另外,title 属性与 rel 属性存在联系,按 W3C 组织的计划,未来的网页文档会使用多个 2cdf5bf648cf2f33323966d7f58a7f3f 元素导入不同的外部文件,如样式表文件、脚本文件、主题文件,甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后,可以使用 title 属性进行选择,这时 rel 属性的作用就显现出来了,它可以指定网页文件初始显示时应用的导入文件类型,目前只能关联 CSS 样式表类型。

外部样式是 CSS 应用的最佳方案,一个样式表文件可以被多个网页文件引用,同时一个网页文件可以导入多个样式表,方法是重复使用 link 元素导入不同的样式表文件。

2、使用 @import 关键字导入

在 c9ccee2e6ea535a969eb3f532ad9fe89 标签内使用@import关键字导入外部样式表文件:

<style type="text/css">
@import url("外部样式表文件路径");
</style>

@import

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 2cdf5bf648cf2f33323966d7f58a7f3f-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 52a25b17b52424c09a9e188108722f11-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.

  • 2. Verwenden Sie das Schlüsselwort @import zum Importieren.

  • Verwenden Sie das Schlüsselwort @import im Tag c9ccee2e6ea535a969eb3f532ad9fe89, um externe Stylesheet-Dateien zu importieren:

    rrreee

    In @import Verwenden Sie nach dem Schlüsselwort die Funktion url(), um die Adresse der spezifischen externen Stylesheet-Datei einzufügen.
Vergleich

Vergleich zweier Methoden zum Importieren von Stylesheets:

🎜🎜🎜🎜Link gehört zum HTML-Tag, während @import von CSS bereitgestellt wird. 🎜🎜🎜🎜Wenn die Seite geladen wird, wird gleichzeitig der Link geladen, und das von @import referenzierte CSS wartet, bis die Seite geladen ist, bevor es geladen wird. 🎜🎜🎜🎜@import kann nur in IE 5 oder höher erkannt werden und der Link ist ein HTML-Tag, sodass kein Kompatibilitätsproblem besteht. 🎜🎜🎜🎜Link-Stilstile haben eine höhere Gewichtung als @import-Gewichte. 🎜🎜🎜🎜Es wird allgemein empfohlen, einen Link zum Importieren von Stylesheets zu verwenden, und @import kann als ergänzende Methode verwendet werden. 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonSo führen Sie ein externes Stylesheet in CSS ein. 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