Wenn ein Browser ein Stylesheet liest, wird es das HTML-Dokument formatiert werden nach den Angaben im Stylesheet.
Drei Möglichkeiten, CSS einfügen
Es gibt drei Möglichkeiten, ein Stylesheet einfügen:
Stylesheet
Mit einem externen Stylesheet können Sie das Erscheinungsbild der gesamten Website mit nur einer Datei zu ändern ändern!
Jede Seite muss einen Verweis auf die externen Stylesheet - Datei im umfassen <link> Element. Die <link> Element geht in den <head> Sektion:
Beispiel
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head> Versuch es selber " Ein externes Stylesheet kann in einem beliebigen Texteditor geschrieben werden. Die Datei sollte keine HTML-Tags enthalten. Die Stylesheet - Datei muss mit einem gespeichert werden .css - Erweiterung.
Hier ist , wie die "myStyle.css" aussieht:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | (Wie Sie kein Leerzeichen zwischen dem Eigenschaftswert und dem Gerät hinzufügen margin-left:20 px; ). Der richtige Weg ist: margin-left:20px; |
|---|
Interne Style Sheet
Eine interne Stylesheet kann verwendet werden, wenn eine einzelne Seite einen einzigartigen Stil hat.
Interne Stile definiert werden innerhalb des <style> Element innerhalb des <head> Abschnitt einer HTML - Seite:
Beispiel
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Versuch es selber " Inline-Styles
Ein Inline-Stil kann einen einzigartigen Stil für ein einzelnes Element anzuwenden verwendet werden.
Um Inline-Stile zu verwenden, fügen Sie den Stil-Attribut auf das entsprechende Element. Der Stil-Attribut kann jede CSS-Eigenschaft enthalten.
Das folgende Beispiel zeigt , wie die Farbe zu ändern und den linken Rand eines <h1> Element:
| Ein Inline-Stil verliert viele der Vorteile eines Stylesheets (nach Inhalt mit Darstellung Mischen). Verwenden Sie diese Methode sparsam! |
|---|
Mehrere Style Sheets
Wenn einige Eigenschaften haben für den gleichen Wähler (Element) in verschiedenen Stylesheets definiert wurde, wird der Wert aus dem letzten Lesestylesheet verwendet werden.
Beispiel
Angenommen, ein externes Stylesheet hat den folgenden Stil für das <h1> Element:
h1
{
color: navy;
}dann davon ausgehen, dass eine interne Stylesheet auch den folgenden Stil für das hat <h1> Element:
h1
{
color: orange;
}Wenn der interne Stil nach dem Link zu den externen Stylesheet definiert ist, die <h1> wird Elemente sein "orange" :
Beispiel
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Versuch es selber " Wenn jedoch der interne Stil vor der Verbindung mit dem externen Stylesheet definiert ist, die <h1> wird Elemente sein "navy" :
Beispiel
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Versuch es selber " Cascading Bestellen
Welche Stil wird verwendet, wenn es mehr als einen Stil für ein HTML-Element angegeben?
Generell können wir sagen, dass alle Stile werden "Kaskade" in eine neue "virtuelle" Stylesheet durch die folgenden Regeln, wo die Nummer eins die höchste Priorität hat:
- Inline-Stil (in einem HTML-Element)
- Externe und interne Stylesheets (im Kopfteil)
- Browser Standard
Also, ein Inline - Stil (innerhalb einer bestimmten HTML - Element) hat die höchste Priorität, was bedeutet , dass es einen Stil innerhalb des definierten überschreiben <head> -Tag oder in einem externen Stylesheet oder ein Browser - Standardwert.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»