Wybierz użytkownika CSS
Przykład 1
Na początek utworzymy nowy plik w oprogramowaniu, który w tym przewodniku jest kod Visual Studio. Kiedy tworzymy nowy plik, możemy wybrać język i wybrać HTML. Następnie należy utworzyć kod HTML. Kod Visual Studio pozwala nam natychmiast nabywać podstawowe znaczniki, wprowadzając „!”, A następnie kliknięcie„ Enter ”. Korzystamy więc z tej zdolności i zbieramy wszystkie te podstawowe tagi. Wykorzystamy właściwość wyboru użytkownika w CSS i połączymy ten plik do pliku CSS, dodając znacznik „link” w znaczniku głównym HTML. Mamy prosty nagłówek i div w tym kodzie HTML. Piszemy również tekst wewnątrz znacznika nagłówka „H1”, a także w znaczniku „Div”. Po wypełnieniu tego kodu zapisz go i przejdź do pliku CSS. Teraz zastosujemy właściwość „wyboru użytkownika” do tych tekstów w pliku CSS.
Wybieramy „RGB” jako „kolor” nagłówka, a wartości, które tutaj używamy, to „RGB (16, 100, 8)”, który reprezentuje „zielony” kolor odcienia. Następnie „Algierski” jest wybierany jako „rodzina czcionki”, a także dekorujemy ten nagłówek, umieszczając tutaj „Podkreśl”. Dodajemy ten „Podkrecie”, wykorzystując właściwość „dekorację tekstu”. Wybierzemy ten tekst nagłówka, klikając go dwukrotnie, ponieważ nie używamy żadnej właściwości „rozdzielczości użytkownika” do tego nagłówka. Domyślna wartość tej właściwości to „Auto”. Po prostu ustawiamy „Brak” jako wartość tej właściwości „rozdzielczości użytkownika” dla elementu „Div”.
Zamierzamy umieścić właściwość „Webkit-User-Select”, ponieważ Chrome obsługuje tylko ten prefiks i ustawia jej wartość na „Brak”. Następnie wykorzystujemy „MS-User-Select”, który jest używany do określenia wartości słowa kluczowego, który jest „Brak”. Oznacza to, że użytkownik nie będzie mógł wybrać tekstu zapisanego w Div. Używamy również właściwości „wyboru użytkownika” i ustawiamy ją na „Brak”. Teraz, gdy ten element DIV pojawi się na ekranie, użytkownik nie wybierze elementu DIV do tekstu.
Wyjście tego kodu pokazuje, że na tym obrazie nie ma wybranego tekstu, ponieważ nie pozwala użytkownikowi wybrać tekstu div. Wynika to z wartości „brak” właściwości „rozdzielczości użytkownika”.
Przykład 2
Mamy tutaj prosty nagłówek i div. Podajemy również tekst w znaczniku nagłówka „H1”, a także znacznika „div”. Teraz zastosujemy właściwość „wyboru użytkownika” w tym tekście Div.
Wybraliśmy „RGB” jako „kolor”, a liczby, które wybraliśmy, to „RGB (87, 23, 4)”, który jest „brązowym” kolorem odcieni. Następnie wybieramy „algierskie” jako „rodzinę czcionki”, a także dodajemy „podkreślenie” również do tego nagłówka. W przypadku elementu „Div” po prostu ustawiamy właściwość „Wybór użytkownika” na „Auto”. Używamy tutaj właściwości „Webkit-User-Select”, ponieważ Chrome pozwala tylko na ten prefiks i zmienia jej wartość na „Auto”.
Następnie używamy „MS-User-Select”, aby określić wartość słowa kluczowego, która jest w tym przypadku „automatyczna”. Wskazujemy również, że użytkownik będzie mógł wybrać tekst, klikając go dwukrotnie, który jest umieszczony w Div. Ustawiamy również właściwość „Wybór użytkownika” na „Auto”. Gdy ten element DIV pojawi się na ekranie, użytkownik wybierze ten tekst, klikając dwukrotnie. Następnie ustawiamy wartość „20px” dla „rozmiaru czcionki” „Div” i „Times New Roman” jako „rodzinę czcionki”.
Kiedy wyjście tego kodu renderuje na ekranie, wygląda jak pierwszy zrzut ekranu. Możemy wybrać te teksty, klikając je dwukrotnie, ponieważ użyliśmy słowa kluczowego „Auto” jako wartości właściwości „rozdzielczości użytkownika”.
W drugim zrzucie ekranu możesz również zobaczyć wybrany tekst, gdy wybieramy tekst, klikając go dwukrotnie. Wybrany tekst jest podświetlony na tym zrzucie ekranu.
Przykład 3
Plik HTML jest taki sam jak powyżej. Po prostu zastępujemy element DIV na akapit i zmieniamy tekst zapisany w tym znaczniku akapitu.
Dostosujemy wszystkie elementy „ciała” w „środku”. Następnie użyj „RGB (96, 18, 199)”, ponieważ „kolor” nagłówka i „rodziny czcionki” jest taki sam jak powyższe przykłady. Ponieważ Chrome akceptuje jedynie prefiks „WebKit”, dlatego używamy właściwości „WebKit-User-Select” i ustawiamy jej wartość na „SMS”. Wartość „Moz-User-Select” jest ustawiona na „tekst”. Następnie używamy „MS-User-Select”, aby określić wartość słowa kluczowego, która jest „tekstem”. Właściwość „Wybór użytkownika” jest również ustawiona na „tekst”, co oznacza, że użytkownik może wybrać tekst za pomocą tej właściwości. Nie utrudnia użytkownikowi wyboru tekstu. „Rozmiar czcionki” tego „P” to „22px”, a „Calibri” jest tutaj wybierany jako „familna czcionka” i wybieraj „zielony” jako „kolor” tekstu „Kolor” tekstu.
Dane wyjściowe pokazuje, że wybieramy tekst z dowolnego miejsca, gdy ustawiamy wartość właściwości wyboru użytkownika na „tekst” w tym przykładzie.
Przykład 4
W tym kodzie po prostu zmieniamy tekst zapisany wewnątrz kontenera Div. Teraz zastosujemy również właściwość „wyboru użytkownika” w tym przykładzie, ale z inną wartością.
Wszystkie elementy „ciała” są wyrównane w „środku”. Następnie użyj „bordowego” jako „koloru” nagłówka, a „rata czcionki” jest taka sama jak w przykładach wcześniej. Słowo kluczowe ustawiamy „wszystko” dla wartości „Webkit-User-Select”, „Moz-User-Select”, „MS-User-Select”, a także dla standardowej składni, która jest „selekcją użytkownika”. Kiedy użyjemy „wszystkie” jako wartości tej właściwości „wybierania użytkownika”, wybierze tekst za pomocą jednego kliknięcia myszy, a nie dwukrotnym kliknięciem. Tak więc będziemy mogli wybrać tekst DIV za pomocą jednego kliknięcia i nie musimy kliknąć go dwukrotnie, aby wybrać ten tekst. Używamy również „23px” do „wielkości czcionki” i stylizujemy ten tekst w stylu „kursywnej” i „odważny” ten tekst z pomocą właściwości „czcionki”.
Wyjście przed wyborem tekstu jest wyświetlane na pierwszym zrzucie ekranu. Zapewniamy drugi zrzut ekranu, w którym wybieramy cały tekst za pomocą jednego kliknięcia myszy.
Na tym zrzucie ekranu tekst jest wybierany. Lub możemy powiedzieć, że tekst jest podświetlony, gdy używamy jednego myszy kliknij ten tekst. Nie musimy dwukrotnie kliknąć tekstu, aby go wybrać, ponieważ używamy słowa kluczowego „wszystkie”, a także wybiera cały tekst, jak widać na zrzucie ekranu poniżej.
Wniosek
Ten przewodnik został utworzony, aby pomóc Ci zrozumieć właściwość CSS „Select-Select”. Szczegółowo omówiliśmy ten temat i przyjrzeliśmy się wielu przykładom tego, jak użyliśmy właściwości „Wybór użytkownika” w kodzie CSS. Omówiliśmy już, jak korzystać z właściwości wyboru użytkownika do kontrolowania sposobu, w jaki użytkownik wybiera tekst lub czy użytkownik wybierze tekst, czy nie. Omówiliśmy również sposób ustawienia wartości dla tej właściwości i szczegółowo wyjaśniliśmy wszystkie wartości tej właściwości. Zebraliśmy dla Ciebie kompleksowy przewodnik, w którym uwzględniliśmy kod i szczegółowe wyjaśnienia, jak go używać, a także wyniki.