Wenn ein Browser ein Stylesheet liest, formatiert er das HTML-Dokument entsprechend die Informationen im Stylesheet.
Es gibt drei Möglichkeiten, ein Stylesheet einzufügen:
Externes CSS
Internes CSS
Inline-CSS
Mit einem Mit einem externen Stylesheet können Sie durch Ändern das Aussehen einer gesamten Website ändern nur eine Datei!
Jede HTML-Seite muss einen Verweis auf die darin enthaltene externe Stylesheet-Datei enthalten das -Element im Kopfbereich.
Externe Stile werden im -Element im <head>-Abschnitt einer HTML-Seite definiert:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ein externes Stylesheet kann in jedem Texteditor geschrieben werden und muss mit der Erweiterung .css gespeichert werden.
Die externe CSS-Datei sollte keine HTML-Tags enthalten.
So sieht die Datei „mystyle.css“ aus:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Hinweis: Fügen Sie kein Leerzeichen zwischen dem Eigenschaftswert (20) und der Einheit ein (px):
Falsch (Leerzeichen):
margin-left: 20 px;
Richtig (kein Leerzeichen):
margin-left: 20px;
Ein internes Stylesheet kann verwendet werden, wenn eine einzelne HTML-Seite einen eindeutigen Stil hat.
Der interne Stil wird im <style>-Element im Kopf definiert Abschnitt.
Interne Stile werden im <style>-Element im <head>-Abschnitt einer HTML-Seite definiert:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ein Inline-Stil kann verwendet werden, um einen eindeutigen Stil für ein einzelnes Element anzuwenden.
Um Inline-Stile zu verwenden, fügen Sie das Stilattribut zum entsprechenden Element hinzu. Der Das style-Attribut kann eine beliebige CSS-Eigenschaft enthalten.
Inline-Stile werden innerhalb des „style“-Attributs des relevanten definiert Element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Tipp: Ein Inline-Stil verliert viele der Vorteile eines Stylesheets (durch Mischen). Inhalt mit Präsentation). Gehen Sie mit dieser Methode sparsam um.
Wenn einige Eigenschaften für denselben Selektor (Element) in verschiedenen Stylesheets definiert wurden, Es wird der Wert aus dem zuletzt gelesenen Stylesheet verwendet.
Nehmen Sie an, dass ein externes Stylesheet den folgenden Stil für das <h1>-Element hat:
h1
{
color: navy;
}
Nehmen wir dann an, dass ein internes Stylesheet auch den folgenden Stil für das <h1>-Element hat:
h1
{
color: orange;
}
Wenn der interne Stil nach dem Link zum externen Stylesheet definiert wird, sind es die <h1>-Elemente "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Wenn jedoch der interne Stil vor dem Link zum externen Stylesheet definiert wird, sind es die <h1>-Elemente "Marine":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
Welcher Stil wird verwendet, wenn für ein HTML-Element mehr als ein Stil angegeben ist?
Alle Stile auf einer Seite werden zu einem neuen „virtuellen“ Stil „kaskadiert“. Blatt nach den folgenden Regeln, wobei Nummer eins die höchste Priorität hat:
Inline-Stil (innerhalb eines HTML-Elements)
Externe und interne Stylesheets (im Kopfbereich)
Browser-Standardeinstellung
Ein Inline-Stil hat also die höchste Priorität und überschreibt externe und interne Stile und Browser-Standardeinstellungen.
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>