Przełącznik CSS

Przełącznik w CSS służy do umożliwienia użytkownikowi wyboru między dwoma stanami: włączanie i wyłączanie. Przesuwamy również przełącznik w lewo lub w prawo. Te przełączniki można znaleźć na naszych stronach internetowych, aplikacjach mobilnych i oprogramowaniu. Przełączniki są wykorzystywane, gdy musimy coś wyłączyć lub włączyć lub kiedy wybieramy tak lub nie. Możemy tworzyć przełączniki o różnych kształtach i rozmiarach w CSS.

Przykład 1:

Opracowujemy kilka kodów HTML, aby przełączniki i stylizacja ich za pomocą CSS. Kod Visual Studio służy do zademonstrowania przedstawionych przykładów. W rezultacie otwieramy nowy plik i wybieramy „HTML” jako język.Powoduje to produkcję pliku HTML. Następnie zaczynamy pisać kod w utworzonym pliku. Po zakończeniu zapisujemy kod za pomocą „.rozszerzenie pliku html ”. Następnie w tym kodzie projektujemy przełącznik, który wskazuje na wyłączenie lub włączanie. Umożliwia nam włączenie lub wyłączenie przełączania. Teraz przechodzimy do kodu CSS, aby podać ten przełącznik z niektórymi projektami.

Używamy właściwości „Alignaj tekstu” dla „ciała”. Tak więc całe ciało HTML jest renderowane w „środku” strony. Zmieniamy również „kolor” naszego nagłówka na „zielony”. Następnie stylizujemy „przełącz”. Robimy to za pomocą „przełączania” i właściwości stylizacji. „Pozycja” tego przełącznika jest ustawiona na „względne”. Wykorzystujemy „blok oneline” jako „wyświetlacz”. Jego „szerokość” i „wysokość” były podobnie ustawione odpowiednio na „100px” i „52px”. „Kolor tła” ten jest „czerwony”, a jego „promieniowanie graniczne” to „30px”, co wskazuje, że jego krawędzie są zakrzywione.

Następnie dodajemy „granicę” wokół tego przycisku przełączania o szerokości „2px” i koloru „szarych”. Po stylizacji tego używamy selektora „After” z tym „przełącznikiem”. Jak wszyscy wiemy, korzystając z selektora „po” w CSS, musimy mieć „treść.„Aby ustawić„ pozycję ”tej treści na„ absolut ”oraz„ szerokość ”i„ wysokość ”na„ 50px ”. Tym razem „kolor tła” jest ustawiony na „Gray”.

Dla każdego z nich dodatkowo ustawiamy „TOP” i „Left” na „1px”. Używamy „przejścia” w tym „0.Przełącznik 5s ”. Stylizacja „Toggle: After” jest już kompletna. Używamy dwóch właściwości w kręconych aparatach „P”, aby nieco dalej stylizować akapit. Po prostu aktualizujemy „Font-Font-Family” akapitu do „Arial” i używamy właściwości „Waseight Font-Weight” do „Bold”. Po sprawdzeniu tego przełączania zmieniamy właściwość „lewy” na „49px”, aby przechodziła do „49px”. Przesuwamy również jego kolor na „zielony”. Ustaw także „Brak” dla „wyświetlania” pola wyboru ”.

Przełącznik jest „wyłączony”, a kolor jest „czerwony” na tym zrzucie ekranu. Teraz mamy następujący zrzut ekranu:

Przełącznik jest „włączony” i jest kolorowy „zielony” na drugim zrzucie ekranu. Słowo „off” jest wydrukowane po lewej stronie przełącznika. Jeśli chcemy go wyłączyć, po prostu klikamy i przesuwamy na prawą stronę.

Przykład nr 2:

W tym przykładzie tworzymy dwa przełączniki. Różnią się one od poprzedniego przełącznika, który stworzyliśmy w pierwszym przykładzie. Tworzymy tutaj dwa przełączniki.

Stylukujemy ciało, wykorzystując różne właściwości. Ustawiamy „rozmiar” na „skrzynkę graniczną” i używamy właściwości „rodziny czcionki” i używamy do tego czcionki „arial”. Ustawiliśmy również rozmiar na „100%”. Używamy selektorów „*” z selektorami „po” i „przed”. „Dziedziczymy” „rozmiar”. A „wyściółka” i „margines” są ustawione na „0”. Teraz stylizujemy „środkowy”, używając właściwości „wyświetlania” jako „flex”. Używamy „centrum” zarówno dla „wyrównania”, jak i „justify-content”. Ustawiamy rozmiar czcionki „1EM” dla „topnego wyściółki”.

Następnie stylizujemy „Rocker”, który jest pierwszym przełącznikiem. „Wyświetlacz” to „Inline-Block”, a jego „pozycja” jest „względna”. „Rozmiar czcionki” dla pierwszego przełącznika to „2EM” i isse do „odważnego” w swoim „Waseight Font”. „Wyliczenie tekstu” jest SE do „Centrum”, a „transforma tekstowa” jest ustawiona na „wielkie”. „Kolor” jest ustawiony na „szary”. „Szerokość” i „wysokość” są ustawione odpowiednio na „7EM” i „4EM”. „Overplow” jest „ukryty”. „Bottom graniczny” to „0.5em ”. I ustaw „biały” kolor na typ „solidnego”.

Następnie pojawia się „Rocker-Small”, który jest drugim przyciskiem. W tym celu ustawiamy „rozmiar czcionki” na „0.75em ”i jego„ margines ”w„ 1EM ”. Używamy selektora „przed” z naszym pierwszym przełącznikiem „Rocker”. I umieść „treść”, ponieważ jest obowiązkowa podczas korzystania z selektora „przed” i „po”. Następnie ustawiamy jego „pozycję” na „absolutne”. Jego „top” jest ustawiony na „0.5em ”. „Lewy”, „prawy” i „dolny” są ustawione na „0”. Jego „tło” to „szary”, „granica” jest „biała”, szerokość to „0.5em ”i„ solidny ”w typ. „Dolna granica” to „0”.

Teraz używamy „wejścia rockera”. W tym celu ustawiamy „krycie”, „szerokość” i „wysokość” na „0”. Teraz stylizujemy „przełącznik-lew” i „przełącznik” w tych samych kręconych aparatach ortodontycznych. Ustawiliśmy jego „kursor” na „wskaźnik”, a „pozycja” jest „absolutna”. „Wyświetlacz”, który ustawiliśmy, to „Flex”. Zarówno „wyrównanie”, jak i „justify-content” są ustawione na „centrum”. „Wysokość”, którą tutaj ustawiliśmy, to „2.5em ”, a„ szerokość ”to„ 3em ”. Musimy ustawić „przejście” na to na „0.2s ”.

Teraz osobno używamy „przełącznika-lewicy” i „przełącznika”, w której używamy właściwości „transformuj”. W tym celu najpierw ustawiamy „wysokość”, „szerokość”, „lewy” i „dolny” na „2.4em ”,„ 2.75em ”,„ 0.85em ”i„ 0.4em ”odpowiednio. Dodajemy „kolor tła” do „#DDD”. I używamy właściwości „Transform” i „obracamy” ją do „15deg” i „wypaczenia” do „15Deg”. Teraz mamy „przełącznik-right” i projektujemy to, ustawiając właściwość „właściwa” na „0.5em ”i ustaw„ dolny ”na„ 0 ”. „Tło” jest ustawione na „czerwony”. Na tle „czerwonych” ustawiamy właściwość „białą” dla czcionki „kolor”. Używamy selektora „przed” z „przełączającym lewą” i „przełączającym prawem”. Tak więc do tego selektora „przed” używamy „treści”. Jego „pozycja” jest ustawiona na „absolutne”.

Następnie ustawiamy również jego „szerokość”, „wysokość” i „dół”. „Kolor tła” tutaj to „#CCC” i używamy właściwości „Transform” i „Skewy (-65DEG)”. Teraz ustawiamy właściwość „lewy” na „-0.4em ”w środku za pomocą selektora„ przed ”z„ przełącznikiem ”. Używamy również selektora „przed” z „przełączającym prawem” osobno i ustawiamy właściwość „Right” na „-0.375em ”. Jego „kolor tła” jest „przezroczysty” i używamy „transformacji” w „Skewy” na „65DEG”.

Teraz tworzymy efekt, gdy jest „sprawdzany”. „Kolor tła” jest „przezroczysty”, a jego szerokość po jego sprawdzeniu jest ustawiona na „3.0833EM ”. Następnie używamy „zaznaczonego” z „przełączającym lewą” i „przełączającym prawem”. Projektujemy lub stylizujemy to, dodając „kolor tła” i czcionkę „kolor” i ustawiając je jako „#ddd” i „#888”. Tutaj selektory „dolne” i „prawe” są ustawione na „0.4em ”i„ 0.8em ”. Następnie używamy „transformacji” i „obracania” peroperties i „wypaczenia” do „-15Deg” dla obu. Używamy właściwości „zaznaczonego” z „przełączającym lewą”, jak i „przełączającym prawym”. I użyj selektora „przed” wewnątrz kręconych aparatów ortodontycznych i ustaw „kolor tła” na „#CCCC”. Następnie ustawiamy „kolor” czcionki na „biały” po jej sprawdzeniu i „szarych” przed jej sprawdzeniem.

Wyjście renderuje dwa przełączniki: pierwszy przełącznik ma włączanie/wyłącznik, a drugi przełącznik ma tak/nie. Na pierwszym zdjęciu widać, że pierwszy przełącznik jest „włączony”, a jego kolor jest „zielony”, podczas gdy drugi przełącznik jest na „nie”, a jego kolor jest „czerwony”.

Na drugim obrazie sprawdzamy pierwszy przełącznik do „Off”, a drugi przełącznik na „Tak”. Tak więc pierwszy przełącznik pojawia się „Off” i „czerwony”. Drugi przełącznik to tym razem „tak” i wydaje się „zielony”.

Wniosek

Stworzyliśmy ten samouczek, aby pokazać, co to jest przełącznik i jak zaprojektować i stylizować przełącznik w CSS. Jak wspomniano wcześniej, przełącznik służy do wyboru między włączaniem i wyłączaniem, a także tak/nie. Do tej pory spojrzeliśmy na dwa różne przykłady i przeszliśmy przez wszystkie właściwości. Po eksperymencie z kodami w tym samouczku będziesz w stanie zrozumieć, w jaki sposób przełączniki działają w CSS i jak z łatwością konstruować przełączniki dla swojej witryny lub projektów.