Przełącznik CSS

Najpierw wyrównujemy wszystkie elementy ciała za pomocą „align tekstu” do „środka” i stosujemy tę właściwość do „ciała.”Następnie zmień„ kolor ”nagłówka na„ zielony ”, aby był atrakcyjny. Teraz musimy stylizować „przełącznik.„Używamy„ przełączania ”, a następnie używamy właściwości stylizacji tutaj. „Wyświetlacz”, którego tu używamy, to „Block Inline.„Ustawiliśmy również jego„ szerokość ”i„ wysokość ”odpowiednio na„ 100px ”i„ 52px ”. „Kolor tła” tego przełącznika jest „czerwony”, a jego „promień graniczny” to „30px”, więc jego krawędzie są zakrzywione.

Następnie ustawiamy również „granicę” wokół tego przycisku przełączania o szerokości „2px” w typu „solidnym”, a także w kolorze „szarych”. Po stylizacji tego, użyjemy selektora „po” z tym „przełącznikiem” i jak wiemy, że musimy mieć „treść”, gdy używamy tego selektora „po” w CSS. Po tej zawartości ustawiamy tutaj „pozycję” na „Absolute”, a „szerokość” i „wysokość” to „50px” każdy. Tym razem „kolor tła” jest „szary.„Ustawiliśmy również„ Top ”i„ Left ”na„ 1px ”dla każdego z nich. Stosujemy „przejście” w tym przełączniku „0.5s ”. Stylizacja dla „Toggle: After” jest tutaj zakończona, a my stylizujemy nieco akapit za pomocą dwóch właściwości wewnątrz kręconych aparatów ortodontycznych „P."

Po prostu zmieniamy jego „rodzinę czcionki” na „algierskie”, a następnie „odważny” ten akapit za pomocą właściwości „Waseight Font-Weight”. Ustawiamy „lewy” na „45px”, więc porusza się „45px” po sprawdzeniu tego przełącznika. I jego kolory zmienia się na „zielony.”Ponadto, ustaw ten„ wyświetlacz ”„ pola wyboru ”na„ Brak."

Pokazujemy również ten przełącznik w wyniku poniżej, aw pierwszym wyjściu widać, że w tym przełączniku mamy dwie możliwości. Na tym zrzucie ekranu przełącznik jest „wyłączony”, a jego kolor jest „czerwony."

Na drugim zrzucie ekranu ten przełącznik jest „włączony” i jest „zielony” w kolorze. WYŁ. Jest zapisywany po prawej stronie przełącznika, więc jeśli chcemy wyłączyć ten przełącznik, klikamy ten przełącznik, aby przesunąć go na prawą stronę, aby wyłączyć ten przełącznik.

Przykład 2

W drugim przykładzie utworzymy dwa różne przełączniki przełączające. Tworzymy dwa przełączniki, jeden przełącznik nazywa się „subskrybuj”, a drugi przełącznik nazywa się „biuletyn” tutaj. Następnie stylizujemy te przełączniki w pliku CSS.

Stylikujemy „ciało” HTML, więc ustawiamy jego „margines” i „wyściółka” na „0”, a kolor tła jest „czarny”, jak tutaj, „#151515” jest kodem dla kodu dla czarny.„Ustawiamy div, który nazywa się„ Center ”, do centrum„ absolutnego ”„ pozycji ”, więc wszystkie elementy w tej div renderują w„ środku ”strony. „Top” i „dolny” środka położenia absolutnego są ustawione jako „50px” dla każdego, a następnie używamy właściwości „Transform-Translation” do „(-50px, -50px)”.

Kiedy używamy wszystkich, wszystkie elementy są ustawione w środku w pionie i poziomie. Następnie stylizujemy „wejście [type = pole wyboru]”. „Margines”, którego używamy do tego, to „10px” i „względne” w „pozycji.„„ Szerokość ”tego pola wyboru to„ 120px ”, a także„ 40px ”w wysokości. Ustanowiliśmy również jego „Webkit-Aparance” na „Brak.„Używamy jego„ tła ”w formie„ liniowej gradientu ”. „Zarys” dla tego jest również „Brak”, a aby uzyskać krzywą krawędzi, używamy właściwości „Radiusza” i ustawiamy ją na „20px”. Stosujemy „Shadow Box-Shadow” i ustawiamy jego wartość na „0 0 0 4px”. Następnie stylizujemy pole wyboru po sprawdzeniu i ustawiamy jego „tło” na „liniowy gradient”, czyli „0deg” i „pomarańczowy.„Używamy tutaj tego samego„ pudełka ”, jak używaliśmy powyżej, i dotyczy to„ n-tym typu (1) ”. „N-tym typu” to selektor do wyboru jednego lub więcej elementów. Stylukujemy również pole wyboru „N -th-of-Type (2)” i ustawiamy jego „tło” na „gradient liniowy” „0Deg” i „Blue.„Stylukujemy również pole wyboru, gdy nie jest sprawdzane. Więc tutaj używamy selektora „przed”, a selektor „po” lub „przed” musi mieć „treść.„Pozycja”, którą tutaj ustawiamy.„Jest„ 80px ”w„ szerokości ”i„ 40px ”w„ Wysokości.„Ponownie używamy„ gradientu liniowego ”dla„ tła.„Tym razem używamy koloru„ Czarnego ”i„ szarego ”. Używamy również właściwości „transformuj” i „skalujemy” do x, y jako „0.98, 0.96 ”. Ustawiliśmy jego właściwość „przejścia” na „0.5s ”. „Lewy” jest ustawiony na „40px” przed sprawdzeniem. Używamy również selektora „po”, a także stylizujemy to.

Wewnątrz tego wyboru „po” najpierw ustawiamy „treść” i jego „pozycję” jako „absolutne.„Jego„ górne ”zestawy jako„ 50% - 2px ”, a„ Left ”to„ 70px ”. Ustawiamy również jego „szerokość” i „wysokość” na „4px” każdy. Ustawiamy jego „tło” i znów używamy „liniowego gradientu”. Stosowane jest tutaj „50%” „promieni granicznych”, więc jego krawędzie pojawiają się w kształcie krzywej. Właściwość „przejściowa” jest również ustawiona na „0.5s ”, który służy do kontrolowania prędkości animacji 0.5sec. W selektorze „po” „lewy” jest ustawiony na „110px”.

Chcemy stylizować nagłówki za pomocą „H1” i używać tutaj niektórych właściwości. „Margines” to „0”, a „wyściółka” to także „0”. Do tych nagłówków używamy „sans-serif”. Dopasuj te nagłówki do „Centrum.„Czcionka„ kolor ”tych nagłówków ma rozmiar„ biały ”i„ 16px ”. Ustawiamy również górną i dolną „wyściółkę” na „15px” i „0px” dla lewego i prawego. Używamy „wyższej liczby”, aby tekst nagłówków został przekonwertowany na wielki poziom.

Zapewniliśmy tutaj dwa zrzuty ekranu jako wyjście. Pierwsze wyjście pokazuje przed zaznaczeniem tego przełącznika, a drugi zrzut ekranu ma miejsce, gdy sprawdziliśmy oba przełączniki przełączające.

Wniosek

Przedstawiliśmy ten przewodnik, aby wyjaśnić przełącznik w CSS oraz sposób projektowania i stylizowania przełącznika w CSS. Omówiliśmy, że używamy przełącznika, gdy chcemy wybierać między/wyłączenie i tak/nie. Zbadaliśmy tutaj dwa kody i szczegółowo wyjaśniliśmy wszystkie właściwości, których używamy w naszych kodach. Po wypróbowaniu kodów w tym przewodniku łatwo dowiesz się, jak te przełączniki działają w CSS i jak zaprojektujesz przełączniki na swojej stronie internetowej lub projekty.