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>
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.
Schreiben Sie den Stilcode in das Tag <style>...</style>
<style>
bdoy{font-size:14px;}
</style>< Die ;...</style>-Tag-Struktur kann sich an einer beliebigen Stelle im -Tag der Seite befinden und mehrmals vorkommen. Normalerweise wird die gesamte Struktur <style>...</style> in den Abschnitt ... geschrieben. Das Merkmal dieser Art der Einführung von CSS besteht darin, dass der CSS-Code jeder Seite vereinheitlicht und geplant werden kann. Er lässt sich leicht innerhalb einer Seite wiederverwenden und warten, die Wiederverwendung von CSS-Code zwischen mehreren Seiten reicht jedoch immer noch nicht aus. <!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>
<style>...</style>标签之中
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
<style>...</style>标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的
<style type="text/css">
@import url("css文件路径");
</style>因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。
3、外部样式表
在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中，之后把CSS文件引入到HTML中使用。
1）、使用link
链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>
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在