Welche Möglichkeiten gibt es, CSS einzuführen?
So führen Sie CSS ein: 1. Verwenden Sie das Style-Attribut des HTML-Tags, um es einzuführen. 2. Schreiben Sie den Style-Code in das Tag-Paar „“. Link-Tag zum Einführen externer Inhalts-CSS-Dateien. 4. Verwenden Sie die „@import“-Regel, um externe CSS-Dateien einzuführen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. Verwenden Sie das Style-Attribut des HTML-Tags (inline).
Fügen Sie das Style-Attribut direkt zu einem einzelnen HTML-Element-Tag hinzu, um den Präsentationsstil 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.
<div style="color:red"></div>
2. Verwenden Sie das Style-Tag (eingebettet)
Schreiben Sie den Style-Code in das Tag <style>...</style><style>...</style>标签之中
<style>...</style>标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的
...部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。<style>
bdoy{font-size:14px;}
</style>3、使用link标签，引入外部CSS文件（链接式）
将css代码写在一个单独的文件中，用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护，但这样将代码高度集中，代码量可能过大，维护不当的话又容易出现混乱。
<link rel="stylesheet" type="text/css" href="style.css">
4、使用@import引入CSS文件（导入式）
使用@import引入CSS文件有两种方式，一种可以放在页面中的<style>...</style> 中，用法如下：
@import url(index2.css);
另外也可以放在CSS文件中使用，用法如下：
@import "sub.css";
使用@import引入CSS可以很方便的引入外部文件的CSS代码，方便维护和规划。但是每多引入一个CSS文件，就会对服务器增加一次连接请求，当访问量较大时，需在维护性和性能上进行权衡。（学习视频分享：css视频教程）
链接式和导入式的区别
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行内样式和内部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--行内样式-->
<p style="color: red;">我是p段落</p>
</html>3. Verwenden Sie den Link-Tag, um externe CSS-Dateien einzuführen (Link-Stil)
Schreiben Sie den CSS-Code in eine separate Datei und verwenden Sie den Link-Tag, um die Datei direkt in die Seite einzuführen. Eine Seite kann das LINK-Tag mehrmals verwenden, um mehrere externe CSS-Dateien einzuführen. Achten Sie auf die gegenseitige Beeinflussung dieser CSS-Codes. Normalerweise überschreiben die später eingeführten CSS-Dateien die gleichen Effekte wie die zuvor eingeführten CSS-Dateien. Diese Methode zur Einführung von CSS ist derzeit die beliebteste. CSS-Codes können im Rahmen jeder Website geplant werden, um die Wiederverwendung und Wartung zu erleichtern. Dadurch wird der Code jedoch stark zentralisiert, und die Codemenge ist möglicherweise zu groß Es kann zu Verwirrung kommen, wenn es nicht ordnungsgemäß gepflegt wird.
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表和外部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>我是p段落</p>
<p>我是p</p>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>4. Verwenden Sie @import, um CSS-Dateien einzuführen (Importtyp).
Es gibt zwei Möglichkeiten, @import zu verwenden, um CSS-Dateien einzuführen. Eine davon kann auf der Seite platziert werden ; , die Verwendung ist wie folgt:<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表和外部样式表的优先级</title>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p段落</p>
<p>我是p</p>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html><!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>选择器的优先级</title>
<style type="text/css">
#a{
color: green;
}
.b{
color: yellow;
}
h2{
color: red;
}
</style>
</head>
<body>
<h2>111</h2> <!--红色-->
<h2 id="a" class="b">222</h2> <!--绿色-->
<h2 class="b">333</h2><!--黄色-->
</html>)
Der Unterschied zwischen Linktyp und Importtyp
<link>1 Gehört zu CSS2. 12. Laden Sie zuerst die HTML-Struktur und dann die CSS-Datei.
Priorität in CSS
1. Stilpriorität
Inline-Stil >interner Stil>externer Stil (die letzten beiden sind Proximity-Prinzipien)
Zum Beispiel: 
rrreee
Browser-Ausführungseffekt:Fazit: Inline-Stile haben eine höhere Priorität als interne Stylesheets.
Vergleichspriorität zwischen internen Stylesheets und externen Stylesheets:
a. Interne Stylesheets stehen über externen Stylesheets
rrreee
Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, CSS einzuführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So sehen Sie das Datum der Bootstrap
Apr 07, 2025 pm 03:03 PM
ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
