Web-Frontend
HTML-Tutorial
Wie führt man den CSS-Stil in HTML ein? Und der Unterschied zwischen Link und @import (Codebeispiel)
Wie führt man den CSS-Stil in HTML ein? Und der Unterschied zwischen Link und @import (Codebeispiel)
Im Entwicklungsprozess von Front-End-Websites müssen wir alle CSS-Stile verwenden. Mit CSS-Stilen können Sie das Layout, die Schriftarten, die Farben, den Hintergrund und andere Effekte der Seite effektiver steuern. Wie werden diese Dateien oder Codes im CSS-Stil in HTML importiert? In diesem Kapitel erfahren Sie, wie Sie CSS-Stildateien in HTML einführen. Lassen Sie neben dem Unterschied zwischen Link und @import (Codebeispiel) auch alle verstehen, wie CSS-Stile importiert werden, wobei der Schwerpunkt auf dem Import von CSS-Stildateien liegt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. So importieren Sie CSS-Stile in HTML
HTML ist hauptsächlich für die Inhaltsanzeige der Webseite verantwortlich, während die CSS-Datei ist für den Stil des Webseiteninhalts verantwortlich. Die Verwendungsmöglichkeiten von CSS-Stilen in HTML sind: inline, eingebettet, extern,
und externer Stil ist unterteilt in: Link (Link) und importieren (@import) ). [Empfohlenes Lernen: CSS-Video-Tutorial]
Dann möchte ich es Ihnen unten vorstellen:
1. - -Codebeispiel mit CSS
in HTML-Tags:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行内式</title> </head> <body> <p style="color: red;font-size: 20px;">行内式行内式行内式行内式行内式行内式行内式行内式行内式<p> </body> </html>
Rendering:
Inline referenziert durch CSS Der Stil kann auch als Inline-Stil oder Zeilenstil bezeichnet werden. Der offensichtliche Vorteil besteht darin, dass er sehr praktisch und effizient ist Wenn die Anzahl der Codezeilen eine bestimmte Länge erreicht, ist dies nicht möglich. Inline-CSS wird oft als Test verwendet, um Fehler im Code zu finden.
Vorteile:
Es gibt keine Stylesheet-Datei, was manchmal die Effizienz verbessern kann;
Verwenden Sie das Stilattribut, das den stärksten Stileffekt hat und den gleichen Stileffekt anderer Einführungsmethoden überschreibt.
Nachteile:
Es ist für mehrere Elemente schwierig, Stile gemeinsam zu nutzen, was der Wiederverwendung von Code nicht förderlich ist;
HTML- und CSS-Codes sind gemischt, was die Lesbarkeit für Programmierer und Suchmaschinen erschwert.
2. Eingebettet --- Schreiben Sie CSS-Inhalte über das Style-Tag in das Head-Tag
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式</title>
<style>
p{
background-color: #21B4BB;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式内嵌式<p>
</body>
</html>Rendering:
Der von CSS referenzierte Inline-Stil kann auch als interner Stil oder Stil auf Seitenebene bezeichnet werden, und das Ganze wird im Kopf platziert Tag Definieren Sie im Inneren den Stil im Style-Tag. Der Umfang ist auf die Elemente dieser Seite beschränkt. Wenn der von Ihnen geschriebene Code mehrere hundert Zeilen überschreitet, denken Sie darüber nach, wie nervig es ist, die Codeseite jedes Mal nach oben zu ziehen , also ist es sexuell minderwertig.
Vorteile: Wie bei Inline-Stylesheets werden keine zusätzlichen Anforderungen generiert und es wird zunächst die Trennung von Struktur und Stil erreicht, wodurch es besser für einseitige Website-Anwendungen geeignet ist.
Nachteile: Da das interne Stylesheet in der HTML-Datei geschrieben ist, ist die Seite unrein, die Dateigröße ist groß, es ist für Webcrawler nicht förderlich, Informationen zu erhalten, es ist nicht förderlich für die Wartung usw Stile können nicht zwischen Seiten geteilt werden
3. Externer Stil---Einführung externer Stylesheets (CSS-Stildateien) über den Link-Tag
1) Link Stil (Link)
Syntax:
<link rel="stylesheet" type="text/css" href="css的路径" >
Codebeispiel:
HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链接式</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p> </body> </html>
CSS-Stildatei – Stil .css-Code:
p{
font-size: 20px;
color: #fff;
background-color: #70DBDB;
}Rendering:
Der Linktyp lädt die CSS-Datei, bevor der Hauptteil der Webseitendatei geladen wird. Die angezeigte Webseite hat also von Anfang an einen Stileffekt. Es wird nicht zuerst die nicht gestaltete Webseite und dann die gestaltete Webseite angezeigt. Dies ist der Vorteil des Linktyps.
2) Import (@import)
Syntax:
<style type="text/css" media="screen">
@import url("CSS文件");
</style>Codebeispiel:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>Rendering:
Der Import lädt die CSS-Datei, nachdem die gesamte Webseite geladen wurde, sodass dies zu einem Problem führt Wenn die Webseite relativ groß ist, wird die Seite ohne Stil für eine Weile angezeigt und dann nach einem kurzen Moment der Stil der Webseite angezeigt. Dies ist ein inhärenter Importfehler.
3) Vor- und Nachteile der externen Verbindung
Vorteile:
Code, der Struktur und Leistung vollständig implementiert Trennung
Einfach wiederzuverwenden und zu warten
Da es in separate Dateien aufgeteilt ist, wird die Größe der HTML-Datei erheblich reduziert, was die Die Seitenstruktur ist für Programmierer und Webcrawler leichter zu lesen
-
Sie ist suchmaschinenfreundlich und ermöglicht es Suchmaschinen, die Seite höher zu bewerten, was sich positiv auf das Suchmaschinenranking der Seite auswirkt
Das externe Stylesheet wird nach dem ersten Besuch des Benutzers auf dem Computer zwischengespeichert und muss beim nächsten Besuch nicht geladen werden
Nachteile:
Wenn es viele Stile gibt, wird die CSS-Datei sehr groß und schwer zu finden. Darüber hinaus bedeutet eine weitere CSS-Datei eine weitere HTTP-Anfrage, was bei einer stark besuchten Website den Druck auf den Server erhöht
2. Verknüpfen und importieren Sie die Unterschied zwischen der Formel (@import)
Link ist ein XHTML-Tag. Zusätzlich zum Laden von CSS kann es auch andere Transaktionen wie RSS definieren, während @. import gehört zur CSS-Kategorie; wenn
Link auf CSS verweist, wird es gleichzeitig geladen, wenn die Seite geladen wird; vollständig geladen werden.
link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf, während @import in CSS2.1 vorgeschlagen wurde und von Browsern niedrigerer Versionen nicht unterstützt wird.
ink unterstützt die Verwendung von Javascript zur Steuerung des DOM zum Ändern des Stils; @import unterstützt dies nicht.
@import kann andere Stylesheets in die CSS-Datei einführen; der Link unterstützt dies nicht.
(Lernvideo-Sharing: Erste Schritte mit dem Web-Frontend)
Das obige ist der detaillierte Inhalt vonWie führt man den CSS-Stil in HTML ein? Und der Unterschied zwischen Link und @import (Codebeispiel). 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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
1393
52
1209
24
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.
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 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.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
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 ä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 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
