Anwendung von Selektoreigenschaften
Bevor wir über die Eigenschaften des Selektors sprechen, ist es wichtig, die von CS geerbten Eigenschaften zu erwähnen . Die sogenannten geerbten Eigenschaften bedeuten, dass die darin eingeschlossenen Tags die Stileigenschaften der externen Tags haben. Die typischste Anwendung der Vererbungsfunktion besteht darin, den Stil der gesamten Webseite voreinzustellen. Die Teile, die als andere Stile gekennzeichnet werden müssen, können nach Bedarf in einzelnen Elementen festgelegt werden. Diese Funktion kann Webdesignern einen idealeren Spielraum bieten. Lassen Sie uns als Nächstes über die Anwendung von Selektoreigenschaften sprechen! Tatsächlich sollte dieser Teil als eine Art der Deklaration betrachtet werden, aber nachdem Sie die grundlegende Deklaration und Anwendung in Kapitel 2 gelesen haben, werden Sie eine bessere Vorstellung davon haben, wenn es hier um den Selektor geht. Beim Anwenden oder Entwerfen von CSS gibt es mehrere Möglichkeiten, bestimmte Anzeigeeigenschaften basierend auf der Beziehung oder den Eigenschaften von Elementen festzulegen. Dies ist die Anwendung von Selektoreigenschaften, die Ihnen eine flexiblere Steuerung und Anwendung ermöglicht. 1. Kontextselektor: Eine Methode zum Anzeigen spezifischer Eigenschaften basierend auf der Kontextbeziehung einer Anweisungsbezeichnung. Der Kontextselektor bedeutet, dass der Browser beim Anzeigen des im HTML-Quellcode angegebenen Inhalts den Kontext des Element-Tags berücksichtigt und die angegebene Stilanweisung anzeigt. Das heißt, solange die Reihenfolge der Tags im HTML-Quellcode konsistent ist, wird diese Anweisung wirksam! Element A (Tag A) Element B (Tag B) Element C (Tag C) ... {Stilregeln} Es ist zu beachten, dass die Deklaration des Kontextselektors der Sammeldeklaration sehr ähnlich ist, die Element-Tags des jedoch sehr ähnlich sind Die Sammeldeklaration muss durch Kommas getrennt werden. Bei der Deklaration mit Kontextselektoren können Sie Leerzeichen verwenden. Element A, Element B, Element C, Element D, Element E, ... {Stilregeln} Auf diese Weise können Sie mithilfe einer kollektiven Deklaration die Stilregeln des Array-Kontextselektors deklarieren. 2. Kategorieauswahl: Eine Methode, die es einem einzelnen oder mehreren Tags ermöglicht, denselben Satz von Stilregeln zu verwenden. Mit der Klasse können verschiedene Element-Tags denselben Satz von Stileigenschaften anwenden oder dasselbe Element-Tag, um verschiedene Sätze von Stileigenschaften anzuwenden. Als Erstes werde ich vorstellen, wie man dieselben Stileigenschaften auf verschiedene Elemente anwendet, wie im folgenden Beispiel beschrieben.
...
...
...
...
...Achten Sie auf den kleinen Punkt davor Bei der Deklaration kann der CLASS-Name beliebig gewählt werden. Wenn Sie möchten, dass dasselbe Element-Tag unterschiedliche Sätze von Stilattributen anwendet, können Sie zum Festlegen auch Kategorieattribute anwenden. ...
...
...
...
Es wird erklärt, dass der CLASS-Name beliebig sein kann. Durch die flexible Nutzung von Kategoriefunktionen können Sie Ihre Stileinstellungen flexibler gestalten! 3. ID-Selektor: Ähnlich wie beim Kategorie-Selektor liegt der Unterschied in der „Einzigartigkeit“. Die Verwendung des ID-Attributs ist der des Kategorieattributs sehr ähnlich, jedoch ist jede ID in der Datei eindeutig. Mit anderen Worten: Das Kategorieattribut kann wiederholt auf ein einzelnes oder mehrere Element-Tags angewendet werden, das ID-Attribut kann jedoch nur einmal in einem Dokument vorkommen. Schreiben Sie es einfach wie im Beispiel unten. ... P ID=" blue" >... ...Wie Sie sehen können, besteht die Deklarationsmethode darin, das Nummernzeichen 『#』 zu verwenden. Die „Einzigartigkeit“ der ID ist der Schlüssel dafür, dass JavaScript oder VBScript Elemente steuern kann. Durch die Deklaration und Verwendung der oben eingeführten Selektormerkmale können Sie Ihre Stileinstellungen flexibler und veränderbarer gestalten. Tatsächlich können Sie sich zunächst mit den grundlegenden Deklarations- und Anwendungsmethoden vertraut machen, die Ihnen im vorherigen Kapitel vorgestellt wurden, und dann die in diesem Kapitel besprochenen Selektorfunktionen anwenden, um sich Schritt für Schritt mit der Verwendung von Stylesheets vertraut zu machen.
Anwendungen mit ähnlichen Eigenschaften verbinden
Erinnern Sie sich an die grundlegende Syntax von HTML? Können Sie im BODY-Tag die Attribute link, alink und vlink verwenden, um die Schriftfarbe verlinkbarer oder verknüpfter Wörter zu steuern? Heutzutage kann CSS auch verwendet werden, um diese Eigenschaften, sogenannte Pseudoklassen, zu steuern. Sie können es als allgemeine Kategorie behandeln und seine Stilregeln deklarieren. Tatsächlich müssen diese Pseudokategorien nicht wie der oben erwähnte Kategorieselektor die spitze Kategorie (KLASSE) im HTML-Quellcode festlegen. Nachfolgend werden die Deklaration und Anwendung von Pseudokategorien vorgestellt. Allgemeine Deklarationsmethode: Pseudokategorien werden mit Doppelpunkten deklariert. Solange Sie die folgende Anweisung zur Struktur hinzufügen, wird der Linktext auf der Seite entsprechend dem von Ihnen festgelegten Stil angezeigt! A:link { Stilregel }A:active { Stilregel }A:visited { Stilregel }A:hover { Stilregel }A:link wird verwendet, um Stilregeln für nicht besuchte Links festzulegen. A:active wird verwendet, um die Stilregeln aktiver Links festzulegen. A:visited wird verwendet, um Stilregeln für besuchte Links festzulegen. A:hover wird verwendet, um die Stilregeln festzulegen, wenn die Maus über den Link bewegt wird. Unter anderem wird Hover von NC4 nicht unterstützt, die anderen drei Funktionen werden jedoch von beiden großen Browsern unterstützt. Wenn Sie einen Browser mit IE4 oder höher verwenden, können Sie die Schönheit der Hover-Funktion über den Link auf dieser Website erkennen. Mit einfachen Stileinstellungen können Sie den gleichen Effekt erzielen, den Sie früher zum Schreiben einer langen Liste von Einstellungen benötigen. Diese Link-Pseudokategorie kann auch in Verbindung mit der oben beschriebenen Kategorieauswahlfunktion verwendet werden.
Ｄ Ｉ Ｖ Vergleich mit Ｓ P Ａ ＼N
Obwohl das Stylesheet auf jedes Tag angewendet werden kann , aber die Verwendung von DIV- und SPAN-Elementen hat die Anwendungsebene von HTML erheblich erweitert. Die beiden Elemente DIV und SPAN sind in der Anwendung sehr ähnlich und müssen bei Verwendung mit einem End-Tag hinzugefügt werden, d. h.
...
SPAN> Die beiden anwendbaren Eigenschaften und die Ereignisbehandlung sind ebenfalls sehr ähnlich und können in Verbindung mit der zuvor erwähnten Selektorfunktion geschrieben werden. Keines von beiden erzwingt Anzeigefunktionen für den Seiteninhalt. Man kann sagen, dass es sich um sehr häufig verwendete Element-Tags handelt. Der Unterschied zwischen DIV und SPAN besteht darin, dass das DIV-Element als Block definiert ist und zwischen
...
ein vollständiger Absatzblock ist. Das SPAN-Element ist als Inline-Element definiert und
...< /SPAN> Beide können miteinander vermischt werden, da sie unabhängig voneinander sind. Daher können Sie diese beiden Elemente in Kombination mit anderen Eigenschaften verwenden, um den auf Ihrer Webseite angezeigten Inhalt flexibel anzupassen.
Das Obige ist der ergänzende Inhalt von Kapitel 3 CSS-Anwendung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!
