Kolor wyboru CSS
Składnia
:: Wybór// Deklaracja CSS
Przykład nr 1: Zmiana koloru tekstu przy wyborze
Musimy napisać jakiś kod HTML, aby zmodyfikować kolor lub kolor tła tekstu po wybraniu tekstu. Tutaj, aby wykonać te przykłady, używamy kodu Visual Studio. W rezultacie otwieramy nowy plik w tym oprogramowaniu i wybieramy język „HTML”, co daje plik HTML. Następnie zaczynamy kodować w tym pliku. W naszym pliku HTML tworzymy „div” o nazwie „D1”, a następnie mamy nagłówek i akapit w tym „Div”, jak pokazano poniżej. Teraz koncentrujemy się na zmianie koloru wybranego tekstu za pomocą selektora „Wybór”, więc w tym celu przejdziemy do kodu CSS, w którym używamy tego selektora „Wybór” i sprawdzamy jego działanie w wyjściu.
Korzystamy tutaj z selektora „Wybór”, a więc są pewne zmiany w kolorze tekstu. Zamierzamy postępować zgodnie z składnią tego selektora „Wybór”, a tutaj możesz zobaczyć, że używamy dwóch okrężnicy przed selektorem selekcji i umieścić „H1” na początku, ponieważ chcemy zastosować podany kolor na nagłówku podczas nagłówka Tekst nagłówka jest wybierany przez użytkownika. Tutaj używamy „H1”, a następnie umieszczamy dwa otwory „::”, a po tym używamy „Wybór”.
Teraz, wewnątrz tego, używamy właściwości CSS, która jest właściwością „kolor”, a ta właściwość zmieni kolor tekstu po wybraniu. Zmieniamy więc wybrany tekst „kolor” na „niebieski” na kierunek 1. Po tym nagłówku mamy również akapit, więc chcemy również zmienić „kolor” tekstu akapitu przy wyborze. Umieszczamy tutaj „P” i ponownie używamy selektora „Wybór” do zmiany tekstu kolorów na kolor „czerwony”, gdy zostanie wybrany.
Sprawdźmy, jak to działa, a kolor tekstu zmienia się po wyborze w poniższych wyjściach. W pierwszym wyjściu widać, że wybrany kolor nagłówka pojawia się niebieski, gdy ustawiamy go w selektorze wyboru powyżej w kodzie CSS.
Teraz jest drugie wyjście, a tutaj możesz zobaczyć kolor wybranego tekstu akapitu, który pojawia się tutaj „czerwony”. Czarny tekst jest konwertowany na czerwony, gdy wybieramy tekst tego akapitu.
Przykład nr 2: Zmiana koloru tła tekstu przy wyborze
W tym przykładzie używamy tego samego kodu HTML, ale tutaj, w CSS, zamierzamy zmienić kolor tła tekstu. W tym przykładzie użyjemy również selektora „Wybór”.
Używamy „H1”, a następnie umieszczamy selektor „::” i „selekcji”. Ponieważ tutaj musimy zmienić kolor tła tekstu po wyborze, więc używamy właściwości „koloru tła” tutaj. Kiedy użyjemy tej właściwości wewnątrz selektora wyboru, zmieni kolor tła tekstu według koloru, który tutaj wybraliśmy. W kodzie widać, że używamy „żółtego” jako koloru tła wybranego tekstu do nagłówka. Następnie zmienimy kolor tła tekstu akapitu. Tak więc ponownie używamy selektora „Wybór” z „P” i deklarujemy właściwość „koloru tła” i wybieramy kolor „szary” dla tła tekstowego tego akapitu.
Kolor tła tekstu nagłówka jest widoczny tutaj w poniższym wyjściu. Kiedy wybieramy nagłówek, kolor tła zmienia się z białego na żółty. Ta zmiana wynika tylko z selektora „Wybór”, którego użyliśmy.
Zmiana koloru tła wybranego tekstu w akapicie pokazano poniżej i można zauważyć, że jego kolor tła zmienia się w „szary” kolor po wybraniu tego tekstu.
Przykład nr 3
W tym przykładzie zrobiliśmy nagłówek, akapit i div i zamierzamy zastosować ten sam kolor tła i kolor tekstu, gdy wybieramy dowolny tekst z tych wszystkich.
W tym przykładzie nie podaliśmy żadnej nazwy selektora przed podwójną okrężnicą „::” selektora „Wybór”, ponieważ chcemy nadać tym samym kolorze tekstu i kolorze tła wszystkim tym tekstom, niezależnie od tego, czy jest to A nagłówek lub akapit. Po prostu po prostu umieściliśmy selektor „::” i „selekcji”, a następnie używamy dwóch właściwości tutaj.
Wyjście pokazuje, że oba kolory zmieniają się na wyborze tekstu. Kolor tła pojawia się żółty, a kolor tekstu pojawia się czerwony, gdy wybieramy tekst. To samo w przypadku nagłówka.
Przykład nr 4
W poniższym kodzie tworzymy wiele akapitów przy użyciu różnych nazw, a następnie stosujemy różne kolory tła lub tekstu do każdego akapitu, gdy wybieramy dowolny tekst akapitu. Wszystkie te styl zostaną wykonane w CSS.
„„.P1 ”jest tutaj używany, który definiuje nazwę akapitu, a następnie używamy z tym selektora„ Wybór ”. Zmieniamy kolor czcionki „p1” na „niebieski”, więc staje się niebieski po wybraniu. Następnie mamy „P2” i zmieniamy jego „kolor tła” na „żółty” po wybraniu tekstu. Teraz pojawia się „P3” ponownie używamy selektora „Wybór” i zmieniamy jego „tło” na „czerwony."
Po tym „P4” jest wspomniane z selektorem „Wybór”, a my zmienimy „kolor tła”, a także „kolor” czcionki odpowiednio na „fioletowy” i „biały”. Zmieniamy „shadow tekstowy” „p5” na „1px 1px czerwony”. Utworzy cień „czerwonego”, kiedy wybieramy tekst „p5”. Następnie używamy „P6” z tym selektorem „Wybór” i używamy „tła”, które zmienia jego tło i ustawia na niego czarny, będzie wyglądał „czarny” po wybraniu tekstu. Stylukujemy również wszystkie akapity bez wyboru, więc używamy „ciała”, a wszystkie właściwości, których tu używamy, zostaną zastosowane do wszystkich akapitów i nagłówków. Używamy „rodziny czcionki” i ustawiamy ją na „bez-serif”, więc cały tekst pojawia się w tym formacie. Ustawiliśmy jego „wysokość linii” na „1.45 ”i„ kolor tła ”do„ światła-różowego.„Używamy również„ wyściółki ”tutaj, który jest wybierany jako„ 1EM ”. „Rozmiar czcionki” dla wszystkich akapitów to „20px”, a także „font-wadze” jako „odważne” dla wszystkich.
Pokazujemy tutaj dwa lub trzy wyjściowe zrzuty ekranu i możesz zauważyć zmianę koloru czcionki i kolor tła po wybraniu tekstu. To wszystko z powodu selektora „Wybór”.
Wniosek
W tym przewodniku zbadaliśmy koncepcję selektora „Wybór”. Jak omówiliśmy, że ten selektor „wyboru” służy do zmiany koloru czcionki, a także koloru tła, gdy użytkownik wybiera tekst, na którym zastosowano selektor „Wybór”. Opracowaliśmy tutaj wiele przykładów, w których zastosowaliśmy ten selektor „selekcji”. Mam nadzieję, że po przejrzeniu tego przewodnika zrozumiesz ten „wybór”, a to bardzo pomoże w twoich projektach lub stronach internetowych.