Heim >Web-Frontend >Front-End-Fragen und Antworten >Welche drei verschiedenen Möglichkeiten gibt es, CSS einzuführen?
Welche drei verschiedenen Möglichkeiten gibt es, CSS einzuführen?
- 青灯夜游Original
- 2022-09-02 17:23:5822471Durchsuche
Drei Möglichkeiten zur Einführung von CSS: 1. Inline-Einführung: Verwenden Sie das Stilattribut, um CSS-Code in ein bestimmtes HTML-Tag einzufügen. Die Syntax lautet „
... name> ;"; 2. Eingebetteter Import, CSS-Code in das Style-Tag-Paar im Kopfteil des Dokuments einfügen, Syntax lautet „"; 3. Externer Import, CSS-Code einfügen In die externe CSS-Datei einfügen, verwenden Sie das Link-Tag oder die „@import“-Regel, um es in das HTML-Dokument einzuführen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS: Cascading Style Sheets sind eine Computersprache, mit der die Stile von Dokumenten wie HTML oder XML ausgedrückt werden. CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um verschiedene Elemente von Webseiten dynamisch zu formatieren. CSS kann das Layout von Elementpositionen in Webseiten präzise auf Pixelebene steuern und unterstützt fast alle Schriftarten Größen und Stile und verfügt über die Möglichkeit, Webobjekt- und Modellstile zu bearbeiten.
Grundlegende CSS-Syntax:
CSS-Regeln bestehen aus zwei Hauptteilen: dem Selektor und einer oder mehreren Anweisungen. Der Selektor ist normalerweise der HTML, das geändert werden muss. Jede Deklaration besteht aus einem Attribut und einem Wert.
1. Selektor (Selektor)
Der Selektor besteht aus der ID des HTML-Elements, dem Klassenattribut oder dem Elementnamen selbst und einigen speziellen Symbolen, die verwendet werden, um anzugeben, für welches HTML-Element der Stil definiert werden soll , wie zum Beispiel „Selektor p“ bedeutet, Stile für alle
-Tags auf der Seite zu definieren Wähler. Alle Deklarationen werden in einem Paar geschweifter Klammern {} direkt nach dem Selektor platziert.
Eine Anweisung muss zwei Teile enthalten: Attribute und Attributwerte, und das Ende einer Anweisung muss mit einem Semikolon markiert werden. Bei der letzten Anweisung in einem Stil kann das Semikolon weggelassen werden.
Attribut: Der Stilname, den Sie für das HTML-Element festlegen möchten. Er besteht aus einer Reihe von Schlüsselwörtern, wie z. B. Farbe, Rahmen, Schriftart usw. CSS bietet viele Attribute, die Sie auf der offiziellen W3C-Website verwenden können
Wert: Er besteht aus einem numerischen Wert und einer Einheit oder einem Schlüsselwort und wird verwendet, um den Anzeigeeffekt eines bestimmten Attributs zu steuern. Der Wert des Farbattributs kann beispielsweise Rot oder #F1F1F1 usw. sein.- Doppelpunkt: ist erforderlich, um Attribute und Werte zu trennen. Am Ende jeder Anweisung ist ein Semikolon erforderlich Selektor Es muss in geschweifte Klammern {} eingeschlossen werden.
1. Inline-Stylesheet (Inline-Einführung)Fügen Sie das Stilattribut direkt zu einem einzelnen HTML-Element-Tag hinzu, um den Ausdrucksstil des HTML-Tags zu steuern.
Diese Art der Einführung von CSS ist dezentral, flexibel und bequem, aber es mangelt ihr an Integrität und Planung, was einer späteren Änderung und Wartung nicht förderlich ist. Wenn der Stil der Website geändert werden muss, kann dieselbe Änderung mehrere Stellen betreffen. was zu hohen Wartungskosten führt. Der Stileffekt, der das STYLE-Attribut verwendet, ist der stärkste und überschreibt die gleichen Stileffekte anderer Einführungsmethoden.<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: maroon; margin-left: 40px">PHP中文网</h1>
<p style="color: blue;">https://www.php.cn/</p>
</body>
</html>
Obwohl Inline (Inline-Stil) HTML-Tags problemlos CSS-Stile verleihen kann, sind seine Mängel auch sehr offensichtlich und es wird nicht empfohlen, es zu häufig zu verwenden.
Das Definieren von Inline-Stilen erfordert die Definition des Stilattributs in jedem HTML-Tag, was sehr unpraktisch ist. 
- Das Hinzufügen zu vieler Inline-Stile führt zu einer Vergrößerung des HTML-Dokuments.
- 2. Internes Stylesheet (eingebettete Einführung)
- Schreiben Sie den Style-Code in das Seiten-
<style>
bdoy{font-size:14px;}
</style><style>...</style>标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个<style>...</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 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。
3、外部样式表（外部引入）
在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中，之后把CSS文件引入到HTML中使用。
1）、使用link
链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>链接标记链接到页面中，而且该链接语句必须放在页面的
语法：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2）、使用@import
导入式是通过@import在
语法：
<style type="text/css">
@import url("css文件路径");
</style>简单实例：
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>实现效果：
link和@import的区别：
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
（学习视频分享：web前端）
Das obige ist der detaillierte Inhalt vonWelche drei verschiedenen Möglichkeiten gibt es, CSS einzuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!