English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS-Dateien sind reine Textdateien, die mit der Erweiterung .css gespeichert werden.
In diesem Tutorial werden Sie lernen, wie einfach es ist, mit CSS Stile und Formatierungsinformationen zu Webseiten hinzuzufügen. Aber bevor Sie beginnen, stellen Sie sicher, dass Sie einige Grundkenntnisse im Umgang mit HTML haben.
Wenn Sie erst kürzlich in den Bereich der Webentwicklung eingetreten sind, bitteVon hier aus lernen »
Ohne weitere Umstände, lassen Sie uns mit den Kaskadestilübersichten (CSS) beginnen.
CSS kann als separates Dokument angehängt oder in den HTML-Dokumenttext eingebettet werden. Es gibt drei Methoden, um CSS in ein HTML-Dokument einzubetten:
inline Styles -Verwenden SiestyleAttribute im HTML-Starttag.
嵌入式样式 -Verwenden Sie<style>Elemente im Dokumentkopf.
Externe Stylesheets -Verwenden Sie<link>Elemente, die auf externe CSS-Dateien verweisen.
In diesem Tutorial werden wir alle drei Methoden zur Einfügung von CSS einzeln vorstellen.
Hinweis:inline Styles haben die höchste Priorität, während die externen Stilübersichten die niedrigste Priorität haben. Dies bedeutet, dass, wenn嵌入式Stilübersichten undExterne Stylesheetsbestimmen, welche Stile für das Element festgelegt werden sollen, wenn嵌入式Konflikte zwischen Stilen in der internen Stilübersicht überschreiben die Stile in der externen Stilübersicht.
Inline-Styles werden verwendet, um einzigartige Stilregeln auf einem Element anzuwenden, indem CSS-Regeln direkt in den Starttag eingesetzt werden. Es könnenstyleEigenschaft fügt dem Element eine Stilzuweisung hinzu.
DasstyleDie Eigenschaften umfassen eine Reihe von CSS-Eigenschaften und Wertpaaren. Jede"property: value"with semicolons (}}between.;
<h1 ）getrennt, genau wie Sie ein eingebettetes Stylesheet oder ein externes Stylesheet schreiben. Aber es muss auf einer Zeile stehen, d.h. nach dem Semikolon gibt es keinen Zeilenumbruch, wie folgt gezeigt:-size:3style="color:red; font/h1> 0px;">Dies ist eine Überschrift<-size:22<p style="color:green; font/px;">Dies ist ein Absatz.< p>-size:14<div style="color:blue; font/px;">Dies ist ein Textinhalt.<Testen Sie es heraus‹/›
div>
Hinweis:Die Verwendung von Inline-Styles wird in der Regel als schlechte Praxis angesehen. Da die Stileregeln direkt in die HTML-Markierungen eingebettet sind, werden Darstellung und Dokumentinhalt miteinander vermengt. Dies macht den Code schwer zu warten und negiert den Zweck der Verwendung von CSS.inline styles zu setzenundPseudo-ElementePseudo-KlassenExterne StylesheetsStile sind mittlerweile unmöglich geworden. Daher sollten Sie es vermeiden, Stileigenschaften im Code zu verwenden. Verwenden Sie
Eingebettete Stylesheets
Eingebettete Stylesheets betreffen nur das Dokument, in das sie eingebettet sind.<head>嵌入式样式表 in<style>Teilen des HTML-Dokuments verwenden<style>Elementdefinitionen. Sie können<head>und</In einem HTML-Dokument können Sie eine beliebige Anzahl von Elementen definieren, aber sie müssen zwischenhead>
<!DOCTYPE html><html lang="en"><head>
<title>Mein HTML-Dokument</title>
<style>
between. Lassen Sie uns ein Beispiel sehen:-body { background
color: YellowGreen; }
</p { color: #fff; }/head><body>
<h1>Dies ist ein Überschrift.</h1>
<p>Dies ist ein Absatztext.</p></body></html>Testen Sie es heraus‹/›Tipp:style><und Tags dertype5ist die Standardsprache für Stylesheets und die Standardsprache für Stylesheets, daher können Sie diese Einstellung ignorieren. Der Attribut (d.h.) definiert die Sprache des Stylesheets. Dieses Attribut ist rein informativer Natur. Da CSS eine Sprache für HTML ist<style><link>type="text/css"
Wenn Stile auf vielen Seiten der Website angewendet werden, sind externe Stylesheets die beste Wahl.
Externe Stylesheets speichern alle Stileregeln in einer separaten Datei und können von jeder HTML-Datei auf der Website verknüpft werden. Externe Stylesheets sind sehr flexibel, da Sie mit externen Stylesheets nur eine Datei ändern müssen, um das Erscheinungsbild der gesamten Website zu ändern.
Sie können externe Stylesheets auf zwei Arten hinzufügen- VerknüpfenundImportieren.
Bevor wir Links zu externen Stilen hinzufügen, müssen wir zunächst eine Stylesheet erstellen. Öffnen Sie Ihren bevorzugten Code-Editor und erstellen Sie eine neue Datei. Geben Sie nun folgenden CSS-Code in diese Datei ein und speichern Sie sie als "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;}h1 {}}
color: orange;}kann verwendet werden<link>Tag verknüpft eine externe Stilplatte mit dem HTML-Dokument. Die<link>Tag eintreten<head>Teil, Sie können es in den folgenden Beispielen sehen:
<!DOCTYPE html><html lang="en"><head> <title>Mein HTML-Dokument</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>Dies ist ein Überschrift.</h1> <p>Dies ist ein Absatztext.</p></body></html>Testen Sie es heraus‹/›
Tipp:Von diesen drei Methoden ist die Verwendung externer Stilplatten die beste Methode, um Stile zu definieren und auf HTML-Dokumente anzuwenden. Aus der externen Stilplatte lässt sich klar erkennen, dass die betroffenen HTML-Dateien die geringsten Änderungen am Markup aufweisen.
Das@importEine andere Methode zur Ladung einer externen Stilplatte ist@importAnweisung weist den Browser an, eine externe Stilplatte zu laden und deren Stile zu verwenden.
Es können zwei Möglichkeiten verwendet werden. Der einfachste Weg ist im Dokumentstitel. Beachten Sie, dass andere CSS-Regeln möglicherweise immer noch in<style>Elementen. Dies ist ein Beispiel:
<style>
@import url("css/style.css));
p {
color: blau;
font-size: 16px;
}
</style>Testen Sie es heraus‹/›Ebenso können Sie@importRegeln in einer anderen Stilplatte importieren.
@import url("css/layout.css");
@import url("css/color.css));body {
color: blau;
font-size: 14px;}Testen Sie es heraus‹/›Hinweis:Alle@importRegeln müssen am Anfang der Stilplatte auftreten. Jede von der Stilplatte definierte Stilerklärung überdeckt die streitenden Regeln in der importierten Stilplatte. Allerdings wird aus Leistungsgründen nicht empfohlen, eine Stilplatte in einer anderen Stilplatte zu importieren.