Heim > Artikel > Web-Frontend > Ausführliche Erklärung der CSS-Stilerstellung

Ausführliche Erklärung der CSS-Stilerstellung

零下一度Original: 2017-05-15 13:12:291797Durchsuche

Wenn ein Stylesheet gelesen wird, formatiert der Browser das HTML-Dokument entsprechend.

Der Browser liest die Stildeklaration aus der Datei mystyle.css und formatiert das Dokument entsprechend.

Externe Stylesheets können in jedem Text-Editor bearbeitet werden. Die Datei darf keine HTML-Tags enthalten. Stylesheets sollten mit der Erweiterung .css gespeichert werden. Hier ist ein Beispiel für eine Stylesheet-Datei:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

Lassen Sie keine Leerzeichen zwischen dem Wert des -Attributs und der Einheit. Wenn Sie „margin-left: 20 px“ anstelle von „margin-left: 20px“ verwenden, funktioniert es nur in IE 6, nicht jedoch in Mozilla/Firefox oder Netscape.

Interne Stylesheets

Wenn ein einzelnes Dokument einen besonderen Stil erfordert, sollte ein internes Stylesheet verwendet werden. Mit dem Tag c9ccee2e6ea535a969eb3f532ad9fe89 können Sie am Kopf des Dokuments ein internes Stylesheet definieren: Durch die Kopplung von Stilen gehen viele Vorteile von Stylesheets verloren. Verwenden Sie diesen Ansatz mit Vorsicht, beispielsweise wenn der Stil nur einmal auf ein Element angewendet werden muss.

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Um Inline-Stile zu verwenden, müssen Sie das Stilattribut innerhalb des entsprechenden Tags verwenden. Die Style-Eigenschaft kann eine beliebige CSS-Eigenschaft enthalten. Dieses Beispiel zeigt, wie man die Farbe und den linken Rand eines Absatzes ändert:

Mehrere Stile

Wenn einige Eigenschaften durch denselben Selektor in verschiedenen Stylesheets definiert werden, dann der Eigenschaftswert Wird von einem spezifischeren Stylesheet

geerbt

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Zum Beispiel hat das externe Stylesheet drei Attribute für den h3-Selektor:

, während das interne Stylesheet zwei Attribute für den h3-Selektor hat:

Wenn diese Seite mit einem internen Stylesheet gleichzeitig mit einem externen Stylesheet verknüpft ist, lautet der von h3 erhaltene Stil:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Das heißt, das Farbattribut wird von geerbt externes Stylesheet, und die Textanordnung (Textausrichtung) und die Schriftgröße werden durch Regeln im internen Stylesheet ersetzt.

h3
{
text-align:right;
font-size:20pt;
}

Mehrere Stile werden in einem

color:red;
text-align:right;
font-size:20pt;

Stylesheet kaskadiert, sodass Stilinformationen auf verschiedene Arten angegeben werden können. 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

verweisen

Kaskadierende Reihenfolge

Wenn dasselbe HTML-Element durch mehr als einen Stil definiert ist, welcher Stil wird verwendet?

Generell werden alle Stile gemäß den folgenden Regeln in ein neues virtuelles Stylesheet kaskadiert, wobei Nummer 4 die höchste Priorität hat.

Browser-Standardeinstellungen

Externe Stylesheets

Interne Stylesheets (befindet sich im 93f0f5c25f18dab9d176bd4f6de5d30e-Tag)

Inline-Stile (in HTML innerhalb des Elements )

Daher haben Inline-Stile (innerhalb von HTML-Elementen) die höchste Priorität, was bedeutet, dass sie Vorrang vor Stildeklarationen in Tags, Stildeklarationen in externen Stylesheets oder in der Stildeklaration des Browsers (Standard) haben.

Tipp: Wenn Sie den Stil einer externen Datei verwenden und den Stil in 93f0f5c25f18dab9d176bd4f6de5d30e definieren, ersetzt das interne Stylesheet den Stil der externen Datei. [Verwandte Empfehlungen]

1. Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen

2 . Kostenloses CSS-Online-Video-Tutorial

3. php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der CSS-Stilerstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in CSS-ID- und KlassenselektorenNächster Artikel：Einführung in CSS-ID- und Klassenselektoren

In Verbindung stehende Artikel

Mehr sehen