Heim >Web-Frontend >CSS-Tutorial >Einführung in CSS-Stylesheets und mehrere Stilprioritäten
Einführung in CSS-Stylesheets und mehrere Stilprioritäten
- 王林Original
- 2020-05-25 17:41:282907Durchsuche
Es gibt drei Möglichkeiten, ein Stylesheet einzufügen, nämlich:
1. Internes Stylesheet; >
3. Inline-StileExterne Stylesheets
Mit externen Stylesheets können Sie das Erscheinungsbild der gesamten Site ändern, indem Sie eine Datei ändern. Jede Seite verlinkt mit dem 2cdf5bf648cf2f33323966d7f58a7f3f-Tag auf das Stylesheet. Das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag befindet sich im Kopf (des Dokuments):
Das Beispiel lautet wie folgt:<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>Der Browser liest die Stildeklaration aus der Datei mystyle.css und formatiert das Dokument entsprechend. Externe Stylesheets können in jedem Texteditor bearbeitet werden. Die Datei darf keine HTML-Tags enthalten. Stylesheets sollten mit der Erweiterung .css gespeichert werden. Das Folgende ist ein Beispiel für eine Stylesheet-Datei:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
Hinweis: Lassen Sie kein Leerzeichen zwischen dem Attributwert und der Einheit (z. B. „margin-left: 20 px“) Die korrekte Schreibweise lautet „margin-left: 20px“.
(Empfohlenes Video-Tutorial: CSS-Video-Tutorial
)Wenn ein einzelnes Dokument benötigt wird Besonderes Beim Styling sollten Sie ein internes Stylesheet verwenden. Sie können am Kopf des Dokuments ein internes Stylesheet mit dem Tag c9ccee2e6ea535a969eb3f532ad9fe89 definieren, zum Beispiel:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline-Stile
, wenn der Stil nur benötigt wird auf ein Element anzuwenden. Diese Methode kann einmal verwendet werden. (Bitte mit Vorsicht verwenden)
Um Inline-Stile zu verwenden, müssen Sie das Stilattribut innerhalb des entsprechenden Tags verwenden. Die Style-Eigenschaft kann eine beliebige CSS-Eigenschaft enthalten. So ändern Sie die Farbe und den linken Rand eines Absatzes:<p style="color:sienna;margin-left:20px">这是一个段落。</p>
Mehrere Stile
Wenn bestimmte Eigenschaften in verschiedenen Stylesheets angegeben sind. Mit dem Bei gleicher Selektordefinition werden die Attributwerte vom spezifischeren Stylesheet geerbt.
Zum Beispiel hat das externe Stylesheet drei Attribute für den h3-Selektor:h3{
color:red;
text-align:left;
font-size:8pt;
} und das interne Stylesheet hat zwei Attribute für den h3-Selektor: h3{
text-align:right;
font-size:20pt;
}If This Seite mit einem internen Stylesheet ist gleichzeitig mit einem externen Stylesheet verknüpft, daher ist der von h3 erhaltene Stil: color:red;text-align:right;font-size:20pt;das heißt, Farbeigenschaften werden vom externen Stylesheet geerbt, während Textausrichtung und Schriftgröße durch Regeln im internen Stylesheet ersetzt werden.
Mehrere Stilprioritäten
Stylesheets ermöglichen die Angabe von Stilinformationen auf verschiedene Arten. Stile können in einzelnen HTML-Elementen, im Header-Element einer HTML-Seite oder in einer externen CSS-Datei angegeben werden. Sie können sogar mehrere externe Stylesheets innerhalb desselben HTML-Dokuments referenzieren.
Im Allgemeinen ist die Priorität wie folgt: Inline-Stil > (Interner Stil) Internes Stylesheet > >Hinweis: Wenn der äußere Stil nach dem inneren Stil platziert wird, überschreibt der äußere Stil den inneren Stil.Empfohlenes Tutorial: Grundlegendes Tutorial für den Einstieg in CSS
Das obige ist der detaillierte Inhalt vonEinführung in CSS-Stylesheets und mehrere Stilprioritäten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!