CSS -Auswahlfarbe
Syntax
:: Auswahl// CSS -Erklärung
Beispiel Nr. 1: Ändern der Textfarbe bei der Auswahl
Wir müssen einen HTML -Code schreiben, um die Farbe oder Hintergrundfarbe des Textes zu ändern, wenn der Text ausgewählt ist. Für die Durchführung dieser Beispiele verwenden wir Visual Studio Code. Infolgedessen öffnen wir die neue Datei in dieser Software und wählen die Sprache „HTML“ aus, was zu einer HTML -Datei führt. Dann beginnen wir in dieser Datei zu codieren. In unserer HTML -Datei erstellen wir ein „DIV“ mit dem Namen „D1“ und haben dann eine Überschrift und einen Absatz in diesem „Div“, wie unten gezeigt. Unser Fokus liegt nun auf der Änderung der Farbe des ausgewählten Textes mit dem Auswahlauswahl.
Wir verwenden hier den Selektionsauswahl aus der Auswahl, ebenso wie einige Änderungen in der Farbe des Textes. Wir werden der Syntax dieses Auswahlauswahl folgen. Hier sehen Sie, dass wir vor dem Auswahlauswahl zwei Kolons verwenden und zu Beginn „H1“ platzieren, da wir die angegebene Farbe auf die Überschrift anwenden möchten, wenn der Der Text der Überschrift wird vom Benutzer ausgewählt. Hier verwenden wir "H1" und platzieren dann zwei Kolons "::" und danach verwenden wir "Auswahl".
Jetzt verwenden wir die Eigenschaft von CSS, die die Eigenschaft „Farbe“ ist, und diese Eigenschaft ändert die Farbe des Textes, wenn er ausgewählt ist. Wir ändern also den ausgewählten Text "Farbe" für den Kopf in "Blau" in "Blau". Nach dieser Überschrift haben wir auch einen Absatz, also möchten wir auch die „Farbe“ des Absatztextes zur Auswahl ändern. Wir setzen hier „P“ ein und verwenden wieder den Selektionsauswahlkörper, um den Farbtext in eine „rote“ Farbe zu ändern, wenn er ausgewählt ist.
Überprüfen Sie, wie es funktioniert, und die Farbe des Textes ändert sich bei der Auswahl in den folgenden Ausgängen. In der ersten Ausgabe sehen Sie, dass die ausgewählte Textfarbe der Überschrift blau erscheint, wenn wir sie im CSS -Code im Auswahlauswahl angeben.
Jetzt kommt die zweite Ausgabe, und hier sehen Sie die Farbe des ausgewählten Absatztextes, der hier „rot“ erscheint. Der schwarze Text wird in Rot umgewandelt, wenn wir den Text dieses Absatzes auswählen.
Beispiel Nr. 2: Ändern der Hintergrundfarbe des Textes bei der Auswahl
In diesem Beispiel verwenden wir den gleichen HTML -Code, aber hier im CSS werden wir die Farbe des Hintergrunds des Textes ändern, wenn er ausgewählt ist. Wir werden auch in diesem Beispiel den Selektor „Auswahl“ verwenden.
Wir verwenden "H1" und platzieren dann "::" und den "Auswahl" -Sähler. Da wir hier die Hintergrundfarbe des Textes bei der Auswahl ändern müssen, verwenden wir hier die Eigenschaft „Hintergrundfarbe“ hier. Wenn wir diese Eigenschaft im Auswahlauswahl verwenden, ändert sie die Hintergrundfarbe des Textes entsprechend der Farbe, die wir hier ausgewählt haben. Im Code können Sie „Gelb“ als Hintergrundfarbe des ausgewählten Textes für die Überschrift verwenden. Dann werden wir die Textergrundfarbe des Absatzes ändern. Daher verwenden wir erneut den Selektionsauswahl von "P" mit "P" und deklarieren die Eigenschaft "Hintergrundfarbe" und wählen die "graue" Farbe für den Texthintergrund dieses Absatzes aus.
Die Hintergrundfarbe des Überschriftentextes ist hier in der folgenden Ausgabe zu sehen. Wenn wir die Überschrift auswählen, ändert sich die Hintergrundfarbe von Weiß zu Gelb. Diese Änderung liegt nur an den "Auswahl" -Segektor, den wir verwendet haben.
Die Änderung der Hintergrundfarbe des ausgewählten Textes im Absatz ist unten angezeigt, und Sie können feststellen, dass seine Hintergrundfarbe bei Auswahl dieses Textes in einer „grauen“ Farbe ändert.
Beispiel # 3
Hier haben wir in diesem Beispiel eine Überschrift, einen Absatz und einen Div.
In diesem Beispiel haben wir vor dem Doppelkolon "::" des "Auswahl" -Segetektors keinen Auswahlnamen angegeben, weil wir all diesen Texten die gleiche Textfarbe und Hintergrundfarbe geben möchten Überschrift oder Absatz. Wir setzen einfach den Selektor "::" und "Auswahl" und verwenden hier dann zwei Eigenschaften.
Die Ausgabe zeigt, dass sich beide Farben bei der Auswahl des Textes ändern. Die Hintergrundfarbe erscheint gelb und die Textfarbe erscheint rot, wenn wir den Text auswählen. Auch das gleiche bei der Überschrift.
Beispiel # 4
Im folgenden Code erstellen wir mehrere Absätze mit unterschiedlichen Namen und wenden dann verschiedene Farben des Hintergrunds oder des Textes auf jeden Absatz an, wenn wir einen Text des Absatzes auswählen. All diese Stile werden in CSS durchgeführt.
Der ".P1 ”wird hier verwendet, was den Absatznamen definiert, und dann verwenden wir den Selektor„ Auswahl “damit. Wir ändern die Schriftfarbe von „P1“ in „Blau“, also wird sie blau, wenn sie ausgewählt ist. Dann haben wir „P2“ und ändern seine „Hintergrundfarbe“ in „Gelb“, wenn der Text ausgewählt ist. Jetzt kommt „P3“ Wir verwenden wieder den "Auswahl" -Sähler und ändern seinen „Hintergrund“ in „rot.”
Danach wird „P4“ mit dem Selektionsauswahl „Auswahl“ erwähnt, und wir ändern sowohl die "Hintergrundfarbe" als auch die „Farbe“ der Schriftart in „lila“ und „weiß“. Wir ändern die "Text-Shadow" von "p5" in "1px 1px rot". Es erzeugt einen Schatten der „roten“ Farbe, wenn wir den Text von „p5“ auswählen. Anschließend verwenden wir "P6" mit diesem "Auswahl" -Sektor und verwenden den „Hintergrund“, der seinen Hintergrund ändert und schwarz darauf setzt, „schwarz“, wenn sein Text ausgewählt ist. Wir stylen auch all diese Absätze ohne Auswahl, daher verwenden wir „Körper“ und alle Eigenschaften, die wir hier verwenden, werden auf alle Absätze und Überschriften angewendet. Wir verwenden die "Schriftfamilie" und setzen sie auf "sans-serif", sodass der gesamte Text in diesem Format angezeigt wird. Wir setzen seine „Linienhöhe“ auf „1.45 ”und„ Hintergrundfarbe “zu„ Light-Pink."Wir verwenden hier auch" Polsterung ", was als" 1EM "ausgewählt wird. Die "Schriftgröße" für alle Absätze lautet "20px" und auch die "Schriftgewicht" -Spreis als "mutig" für alle.
Wir zeigen hier zwei oder drei Ausgabebestellungen, und Sie können die Änderung der Schriftfarbe und die Hintergrundfarbe bei Auswahl des Textes feststellen. Dies ist alles am Auswahl der "Auswahl".
Abschluss
In diesem Leitfaden haben wir das Konzept der Auswahl „Auswahl“ untersucht. Wie wir besprochen haben, dass dieser Auswahlauswahl zum Ändern der Farbe der Schriftart und der Hintergrundfarbe verwendet wird, wenn der Benutzer den Text auswählt, auf den der Selektor „Auswahl“ angewendet wird. Wir haben hier mehrere Beispiele ausgearbeitet, in denen wir diesen Auswahlauswahl verwendet haben. Ich hoffe, Sie werden diesen Auswahlauswahl verstehen, nachdem Sie diesen Leitfaden durchlaufen haben.