Heim  >  Artikel  >  Web-Frontend  >  Kapitel 4 CSS für farbigen Hintergrund

Kapitel 4 CSS für farbigen Hintergrund

黄舟
黄舟Original
2016-12-19 16:06:571308Durchsuche

Die Hauptfunktion dieses Kapitels

Nach der Einführung in die Deklarations- und Anwendungsmethoden und einige Funktionen in den vorherigen Kapiteln, Beginnend mit In diesem Kapitel werden wir offiziell mit der Einführung von CSS-Befehlen beginnen! In diesem Kapitel werden zwei Einführungsthemen vorgestellt. Die Hauptfunktion besteht darin, die Eigenschaften von Stileinstellungen wie der Vordergrundfarbe, der Hintergrundfarbe und den Hintergrundgrafiken des Elements festzulegen Die CSS-Eigenschaften von Farbe und Hintergrund sind Teil der Einführung für Sie und die CSS-Anweisungen, die zur Steuerung der Position platzierter Elemente verwendet werden.

Farbhintergrund CSS-Befehl

: Alle Elemente Mögliche Werte: Informationen zum Festlegen der Farbe finden Sie in den entsprechenden Anweisungen zur Farbverwendung in Kapitel 1. Standardwert: Hängt vom Browser ab. Vererbung: Es gibt ein allgemeines Beispiel: SPAN { color : BLUE } Koaxiales Beispiel: background-color Einstellen der Hintergrundfarbe Unterstützung: IE4, NC4 Anwendbar: alle Elemente Mögliche Werte: Informationen zum Festlegen der Farbe finden Sie in den entsprechenden Anweisungen zur Farbverwendung in Kapitel 1transparent. Machen Sie den Hintergrund des übergeordneten Elements (Farbe oder Muster) transparent. Standardwert: transparent. Vererbung: Keine. Allgemeines Beispiel: BODY { Hintergrundfarbe: BLAU } Koaxiales Beispiel: Hintergrundgrafiken festlegen Unterstützung: IE4, NC4 Anwendbar: alle Elemente Mögliche Werte: Bitte beachten Sie die entsprechenden Anweisungen zur URL-Darstellung in Kapitel 1. Keine. Verwenden Sie nicht das Hintergrundmuster. Standardwert: transparente Vererbung. Eigenschaften: Keine. Allgemeines Beispiel: BODY { Hintergrundbild: URL("http://IhrWeb/Pfad/Dateiname" ) } Koaxiales Beispiel: background-repeat Hintergrundwiederholung festlegen Unterstützung: IE4, NC4 Anwendbar: alle Elemente Mögliche Werte: „repeat“ Wiederholt die Hintergrundgrafik, um die Seite zu füllen. „repeat-x“ Wiederholt die Hintergrundgrafik in horizontaler Richtung. „repeat-y“ Wiederholt die Hintergrundgrafik in vertikaler Richtung. „no-repeat“ zeigt die Hintergrundgrafiken nicht wiederholt an. Standardwert: „repeat“ Vererbung: Keine Allgemein Beispiel: BODY { Background-Repeat: Repeat-x } Koaxiales Beispiel: Hintergrundanhang festlegen Unterstützung: IE4, NC4 Anwendbar: alle Elemente Mögliche Werte: Scrollen Hintergrundgrafiken scrollen mit dem Bildlauf fest Hintergrundgrafiken scrollen mit dem Bildlauf (Wasserzeichen) Standardwert: scrollen Vererbung: nein allgemeines Beispiel: BODY { Hintergrundanhang: fest } Koaxiales Beispiel: Richtet den X%Y%-Punkt auf der X%Y%-Grafik an der X%Y%-Position aus links, rechts, Hintergrundgrafiken rechts, oben, Hintergrundgrafiken oben, unten, Hintergrundgrafiken unten Standardwert: 0 % 0 % Vererbung: keine Allgemeines Beispiel: BODY {Hintergrundposition: 100 % 50 %} Koaxiales Beispiel: < BODY style="background-position:100% 50%">background Umfangreiche Einstellung der Hintergrundeigenschaften unterstützt: IE3, IE4, NC4 Anwendbar: alle Elemente Mögliche Werte: Hintergrundfarbe legt die Hintergrundfarbe Hintergrundbild fest Legt den Hintergrund der Hintergrundgrafik fest. -repeat Legt den Hintergrund fest, um den Hintergrund zu wiederholen } Koaxiales Beispiel:

Positionsplatzierungsbefehl

float Legt die Floating-Eigenschaft fest (wird hauptsächlich verwendet, wenn Text um Bilder umbrochen wird). Unterstützt: IE4, NC4. Anwendbar für: Blockelemente oder Grafiken. Mögliche Werte: linkes Element nach links, Text um sein rechtes Element herum, rechtes Element nach rechts, Text um Sein linkes None zeigt den Standardwert in der Standardmethode an: None Vererbung: None Allgemeines Beispiel: DIV { float : right } Koaxiales Beispiel:

clear Legen Sie die Clearing-Eigenschaft fest (legen Sie fest, ob dies zulässig ist). Existenz von schwebenden Elementen) Unterstützung: IE4 Anwendbar: Blockelemente oder Grafiken Mögliche Werte: beide Wenn auf beiden Seiten schwebende Elemente vorhanden sind, wird das Element unter das schwebende Element nach links verschoben. Wenn auf der linken Seite ein schwebendes Element vorhanden ist, wird das Element verschoben unter das schwebende Element verschoben werden right Wenn sich rechts ein schwebendes Element befindet, wird das Element unter das schwebende Element verschoben. none Zeigt den Standardwert in der Standardmethode an: keine Vererbung: Keine Allgemeines Beispiel: DIV { clear : right } Koaxial Beispiel:
width Breitenunterstützung einstellen: IE4, NC4 Anwendbar: Blockelemente oder Grafiken Mögliche Werte: Längeneinheit, siehe entsprechende Hinweise zu Grundeinheiten in Kapitel 1 Prozentsatz, basierend auf dem übergeordneten Element. Breite ist die Basis. Auto ändert die Größe automatisch in einem festen Verhältnis. Standardwert: auto. Vererbung: Keine. Allgemeines Beispiel: DIV { width : 300pt } Koaxiales Beispiel:
height Einstellung der Höhenunterstützung: IE4 und NC4 gelten für: Blockelemente oder Grafiken. Mögliche Werte: Längeneinheit, siehe entsprechende Beschreibung der Grundeinheiten in Kapitel 1. Prozentsatz Basierend auf der Breite des übergeordneten Elements ändert auto automatisch die voreingestellte Größe in einem festen Verhältnis. Einstellungswert: auto Vererbung: Keine Allgemeines Beispiel: DIV { height : 300pt } Koaxiales Beispiel:
Position Positionsunterstützung festlegen: IE4, NC4 Anwendbar: Blockelement Mögliche Werte: Absolut basiert auf dem übergeordneten Element und wird an einer bestimmten Position platziert. Relativ basiert auf dem angrenzenden Element und wird an einer bestimmten statischen Standardposition platziert basiert auf der Position des Elements im Quellcode. Standardwert: absolut Vererbung: Keine Allgemeines Beispiel: DIV { position : static } Koaxiales Beispiel:
top Festlegen der oberen Position Unterstützung : IE4, NC4 Anwendbar: Blockelement Mögliche Werte: Längeneinheit, siehe entsprechende Beschreibung der Grundeinheiten in Kapitel 1 left Das Setzen der linken Endposition unterstützt: IE4, NC4 Anwendbar: Blockelement Möglich Werte: Längeneinheit, siehe entsprechende Anweisungen zur Grundeinheit in Kapitel 1 clip Zuschneiden festlegen (Form und Größe eines bestimmten Bereichs festlegen, außerhalb des Bereichs transparent) Unterstützung: IE4, NC4 Anwendbar: Blockelement Mögliche Werte: rect (oben, rechts, unten, links) Legen Sie die Länge oben, rechts, unten und links des Rechtecks ​​fest, das automatisch verglichen wird. Die Länge gegenüberliegender Seiten wird im Allgemeinen als rect(0, Länge, Länge, 0). Es kann nicht als rect(0, 0, Länge, Länge) geschrieben werden. Alle vier Werte können „auto“ anstelle von „auto“ sein, um den Standardwert auf die normale Weise anzuzeigen: „auto“ Vererbung: Keine Allgemeines Beispiel: DIV { clip : rect(0,100px,50px,0) } Koaxiales Beispiel:
overflow Überlaufverarbeitung festlegen (Steuerung der Anzeigemethode, wenn Der Inhalt des Elements überschreitet die Größe des Elements) Unterstützung: IE4 Anwendbar: Blockelemente Mögliche Werte: Sichtbare Elemente werden nicht entsprechend der eingestellten Größe angezeigt, können aber alle ausgeblendeten Inhalte sehen, die die eingestellte Größe des Elements überschreiten. Teile werden ausgeblendet und nicht angezeigter Bildlauf Bei Bedarf wird ein Bildlauf angezeigt, damit der Benutzer den gesamten Inhalt automatisch sehen kann. Standardmäßig anzeigen Standardwert: auto Vererbung: Keine Allgemeines Beispiel: DIV { overflow : scroll } Gleich wie Axis-Beispiel: visibility Sichtbarkeit festlegen. Unterstützung: IE4, NC4. Anwendbar: Alle Elemente. Mögliche Werte: sichtbar. Legen Sie fest, dass das Element angezeigt werden soll die Sichtbarkeit des übergeordneten Elements: inherit Vererbung: keine Allgemeines Beispiel: DIV { Visibility : Hidden } Koaxiales Beispiel:
z-index Festlegen der Z-Achsen-Parameterunterstützung (dreidimensionaler Raum). : IE4, NC4 anwendbar: Blockelement möglicher Wert: Obige Elemente wurden zuvor geschrieben. Standardwert: auto Vererbung: Keine Allgemeines Beispiel: DIV { z-index : 3 } Koaxiales Beispiel:

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