Heim > Artikel > Web-Frontend > CSS in HTML ist in mehrere Kategorien unterteilt

CSS in HTML ist in mehrere Kategorien unterteilt

青灯夜游Original: 2022-09-21 16:28:452949Durchsuche

css kann in drei Kategorien unterteilt werden: 1. Inline-Stil (Inline-Stil), bei dem das Stilattribut zum Einfügen von CSS-Code in das HTML-Tag verwendet wird, die Syntax „...< ;/tag name >"; 2. Eingebettetes Stylesheet, fügen Sie den CSS-Code in das Style-Tag-Paar im Kopfteil des Dokuments ein, die Syntax lautet „"; 3. Externer Stil Fügen Sie im Blatt den CSS-Code ein. Verwenden Sie in der Datei „.css“ das Link-Tag oder die Regel „@import“, um ihn in das HTML-Dokument einzuführen.

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

Um einige Effekte im HTML-Code zu erzielen, ist es oft notwendig, CSS-Änderungen hinzuzufügen. Es gibt drei Arten von CSS in HTML: Inline-Stile, eingebettete Stylesheets und externe Stylesheets.

1. Inline-Stil (Inline-Stil)

Der Inline-Stil dient dazu, die Stilinformationen direkt im Stilattribut des HTML-Tags zu definieren. Da der Inline-Stil innerhalb des Tags definiert ist, ist er nur für das Tag gültig in dem es sich befindet.

<body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
</body>

CSS in HTML ist in mehrere Kategorien unterteilt

Es wird empfohlen, kein Inline-CSS zu verwenden, da jedes HTML-Tag separat gestaltet werden muss und die Verwaltung der Website sehr schwierig werden kann, wenn Sie nur Inline-CSS verwenden. In bestimmten Situationen kann es jedoch nützlich sein. Beispielsweise in Situationen, in denen Sie keinen Zugriff auf CSS-Dateien haben oder Stile nur auf ein einzelnes Element anwenden müssen.

Nachteile:

Das Definieren von Inline-Stilen erfordert die Definition des Stilattributs in jedem HTML-Tag, was sehr unpraktisch ist.
Seien Sie besonders vorsichtig, wenn Sie doppelte oder einfache Anführungszeichen in Inline-Stilen verwenden, da die Attribute von HTML-Tags verwenden normalerweise doppelte Anführungszeichen, um den Attributwert einzuschließen, z. B. ; In Inline-Stilen definierte Stile können nirgendwo anders wiederverwendet werden Spätere Wartung, da eine Website normalerweise aus vielen Seiten besteht und Sie beim Ändern des Seitenstils die Seiten einzeln ändern müssen.
Das Hinzufügen zu vieler Inline-Stile führt zu einer Vergrößerung der HTML-Dokumente.
2. Eingebettetes Stylesheet
Schreiben Sie den Stilcode in das Tag <style>...</style>
```
<style>
 bdoy{font-size:14px;}
</style>
```

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				background-color: linen;
			}

			h1 {
				color: maroon;
				margin-left: 40px;
			}
		</style>
	</head>
	<body>
		<h1>PHP中文网</h1>
		<p>https://www.php.cn/</p>
	</body>
</html>

CSS in HTML ist in mehrere Kategorien unterteilt Da das eingebettete Stylesheet den CSS-Stil innerhalb des HTML-Dokuments definieren muss, erhöht sich die Größe des Dokuments. Wenn auch andere Dokumente denselben Stil im eingebetteten Stylesheet verwenden müssen, kann er nicht in andere Dokumente eingeführt werden Eine Neudefinition in anderen Dokumenten führt zu Coderedundanz und ist einer späteren Wartung nicht förderlich.

<style>...</style>标签之中

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

<style>...</style>标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的

...部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。

<style type="text/css">
  @import url("css文件路径");
</style>

CSS in HTML ist in mehrere Kategorien unterteilt

因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。

3、外部样式表

在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中，之后把CSS文件引入到HTML中使用。

1）、使用link

链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>

3. Externe Stylesheets

werden in der tatsächlichen Entwicklung verwendet. Geeignet für Situationen mit vielen Stilen. Die Stile werden separat in CSS-Dateien geschrieben, und dann werden die CSS-Dateien zur Verwendung in HTML eingeführt.

1) Linkstil verwenden bedeutet, ein CSS-Stylesheet extern zu definieren und eine Datei mit der Erweiterung .CSS zu erstellen und dann <link> zu übergeben > Link-Tag ist mit der Seite verknüpft und die Link-Anweisung muss im -Tag-Bereich der Seite platziert werden.

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

Erklärung jedes Attributs:

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

rel definiert das zugehörige Dokument, also hier das zugehörige Stylesheet.

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 <link>-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. 🎜

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

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

2）、使用@import

导入式是通过@import在

语法：

<style type="text/css">
  @import url("css文件路径");
</style>

在 @import 关键字后面，利用 url() 函数包含具体的外部样式表文件的地址。

简单实例：

css外部样式表 style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

HTML文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link标签或@import的应用</h1>
		<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
	</body>
</html>

实现效果：

CSS in HTML ist in mehrere Kategorien unterteilt

两种导入样式表的方法比较：

1、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、权重区别

link 方式的样式的权重高于 @import 权重。

4、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

5、DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

说明：

一般推荐使用 link 导入样式表的方法，@import 可以作为补充方法使用。

（学习视频分享：web前端）

Das obige ist der detaillierte Inhalt vonCSS in HTML ist in mehrere Kategorien unterteilt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 firefox css css3 html JS dom href 样式表 input

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：Werden HTML und CSS als Programmiersprachen betrachtet?Nächster Artikel：Werden HTML und CSS als Programmiersprachen betrachtet?

In Verbindung stehende Artikel

Mehr sehen