Detaillierte Erklärung der CSS-Stylesheets und des Formatlayouts

Stilvorlagen

CSS (Cascading Style Sheets) wird zum Verschönern von HTML-Webseiten verwendet.

Inline-Stylesheet: Beispiel: <p style="font-size:10px;">Inline-Stylesheet<p>

Inline-Stylesheet: muss im Head-Tag geschrieben werden

Beispiel: <style type="text/css">

P

{ Stil;}

</style>hei

Externes Stylesheet: Erstellen Sie eine neue CSS-Datei, um das Stylesheet zu platzieren. Klicken Sie mit der rechten Maustaste in HTML - CSS-Stil - Stylesheet anhängen

Beispiel: <style type="text/css">

*

{ margin:0px; padding:0px;} //Der Seitenrand beträgt 0 Pixel und der Schriftabstand 0 Pixel

.mian //Klassenselektor <div class="mian"></div>// Klassen-Stylesheet aufrufen

{

Höhe: 40px;

Breite: 100px;

Textausrichtung: zentriert;

Hintergrundfarbe: rot;

}

#mian//ID-Selektor <div id="mian"></div> //Anruf-ID-Selektor

{

Höhe: 40px;

Breite: 100px;

Textausrichtung: zentriert;

Hintergrundfarbe: rot;

}

</Stil>

Zusammengesetzter Selektor: (1) P (span), wird verwendet, um zwei Tags mit gleichem Stil zu trennen.

(2) Mian P durch ein Leerzeichen getrennt zeigt Nachkommen an

(3) mian.p wird durch "." getrennt, um das p-Tag im mian-Tag anzuzeigen

Im Style-Attribut bedeutet beispielsweise: margin: 20px 0px 20px 0px, dass die Breite des Rahmens oben 20 Pixel, rechts 0 Pixel, unten 20 Pixel und links 0 Pixel beträgt. Die Reihenfolge ist im Uhrzeigersinn: oben-rechts-unten-links.

Format-Layout

Position sperren (Position relativ zum Browser, d. h. die Position relativ zum Browser bleibt unverändert, egal wie der Browser scrollt) position:fixed;

Absolute und relative Positionierung (1) Wenn die äußere Ebene nicht absolut (oder relativ) ist, wird das Div relativ zum Browser positioniert

(2) Wenn die äußere Ebene absolute(relative) hat, dann wird das div relativ zum äußeren Rand mit position:absolut; (absolute Position) position:rel; (relative Position) positioniert.

Schichtung: Wenn Sie möchten, dass eine Beschriftung auf der Seite immer oben angezeigt wird, müssen Sie den Z-Wert festlegen, z. B.: z-index:2; // Wenn der Z-Wert 2 ist, wird er in der obersten Schicht angezeigt. Wenn er nicht geändert wird, ist der Standardwert 1 und sie befinden sich alle in derselben Schicht.

Die Reihenfolge gängiger Hyperlink-Stildefinitionen ist L --v--h--a

a:link Der Zustand eines Hyperlinks, bevor er angeklickt wird

a:visited Der Zustand nach dem Anklicken eines Hyperlinks

a:hover Wenn die Maus über einen Hyperlink schwebt

a:active Beim Klicken auf einen Hyperlink

Das Obige ist der gesamte Inhalt der detaillierten Erklärung der CSS-Stylesheets und des Formatlayouts, die Ihnen vom Herausgeber zur Verfügung gestellt wurden. Ich hoffe, Sie unterstützen 123WORDPRESS.COM~

Original-URL: http://www.cnblogs.com/ouyangtangfeng99/p/5377983.html