CSS Unset

„Unset oznacza anulowanie lub cofnij coś. Kiedy używamy jakiejś właściwości, a następnie chcemy to anulować, więc używamy tam „Unset”. CSS daje nam tę okazję do „rozliczenia” właściwości stylizacji później, które zastosowaliśmy do dowolnego elementu. Możemy „rozejść” właściwość samodzielnie, umieszczając nazwę właściwości, a następnie umieścić „niezajemne” jako wartość tej właściwości, lub możemy rozwinąć wszystkie właściwości elementu, umieszczając „All: Unset” do elementu. Kiedy stosujemy pewne właściwości na dowolnych elementach, ale później nie chcemy używać tych właściwości, więc po prostu stawiamy niezadowolenie dla tej właściwości i wszystkich nieruchomości, umieszczamy „Wszystkie: unset."

W tym samouczku użyjemy tej wartości Unset w naszym kodzie CSS i przedstawimy, jak to działa. Zbadamy przykłady, w których stosujemy niektóre właściwości, a następnie użyjemy „Unset” do Anuluj lub cofania się."

Przykład 1

Zaczniemy pisać HTML, tworząc nowy plik w kodzie Visual Studio i wybierając HTML jako język. Plik został wygenerowany, a teraz wszystko, co musimy zrobić, to dołączyć „!„Znak, aby uzyskać podstawowe tagi. W rezultacie naciśnięcie „Enter” powoduje, że plik pokazuje wszystkie podstawowe tagi HTML. Ciało to sekcja, z której zaczynamy kodować. Po prostu umieściliśmy jeden nagłówek „H1” i jeden akapit „P” w ciele. Podajemy również link do pliku CSS w „głowie” w tym szablonie HTML. Spójrz, jak działa ta nieskażona wartość w CSS.

Będziemy stylizować zarówno nagłówek, jak i akapit. Najpierw ustawiamy nagłówek „font family” i wybieramy do tego „Calibri”. Zmieniamy również jego „kolor” i ustawiamy na to „czerwony”. Teraz mamy również akapit i tutaj po prostu zmieniamy „kolor” akapitu. Teraz chcemy cofnąć kolor akapitu. W tym celu wykorzystujemy wartość „unset” dla „koloru” akapitu, więc ten „zielony” kolor nie jest stosowany do tekstu akapitu.

Wyjście pokazuje, że kolor nagłówka i rodzina czcionek są zmieniane, ale kolor akapitu pozostaje niezmieniony. Tutaj widać, że zielony kolor nie jest tutaj zastosowany do tekstu akapitu, ponieważ nie zawieramy koloru właściwości akapitu.

Przykład 2

Korzystamy z tego samego kodu HTML, który stworzyliśmy w naszym poprzednim przykładzie. Stylukujemy nagłówek, wykorzystując dwie właściwości. Jednym z nich jest właściwość „rodziny czcionki” i ustawiamy tę właściwość jako „algierski.„Drugą właściwością, której tu używamy do nagłówka, jest właściwość„ kolor ”i używamy tutaj„ niebieskiego ”. Stosujemy również wiele właściwości do akapitu. „Kolor” tego akapitu jest „zielony”, a wielkość czcionki akapitu to „24px”. Używamy również „Times New Roman” jako „rodziny czcionki.„Używamy właściwości„ dekoracja tekstu ”do generowania podkreślenia nagłówka. Ustawiamy wartość „dekoracja tekstu” jako „podkreśla."

Teraz używamy słowa kluczowego „Bold” do „Was-Wight” i wyrównujemy ten akapit w „Centrum”, wykorzystując właściwość „Alignaj tekstu”. Ale teraz nie chcemy stosować wszystkich tych właściwości do naszego akapitu, więc zamiast pisać wszystkie właściwości osobno, a następnie używać wartości „Unset” na każdej właściwości, po prostu umieszczamy „Wszystkie” i ustawiamy jej wartość na „Unset” do akapitu. Nasz akapit pozostanie niezmieniony, a do akapitu nie zostanie zastosowana nieruchomość ani stylizacja.

Rodzina koloru i czcionki nagłówka została zmieniona, a akapit pozostał niezmieniony. Ponieważ wszystkie właściwości, które zastosowaliśmy do akapitu, zostały niepotrzebne, wykorzystując „All: Unset” w CSS.

Przykład 3

W tym danym kodzie HTML zamierzamy umieścić jeden nagłówek i div tutaj i przejdziemy do CSS w celu zastosowania na nich stylu i anulowania lub niepokoju niektórych stylów za pomocą „Unset."

Po prostu stosujemy niektóre właściwości na Div. Tutaj ustawiamy jego „wielkości czcionki” i stawiamy wartość „wielkości czcionki” jako „24px”. Używamy również „Bold” do „Waseight czcionki.„Kolor”, który wybieramy tutaj dla tego div, to „czerwony”, a „rodzina czcionki”, którą tutaj wybieramy, to „arial.„Teraz nie musimy zmieniać„ koloru ”i„ masy czcionki ”tej div, więc po prostu umieszczamy te dwie właściwości do div Curly Sheds i umieszczamy„ niepokajne ”dla obu. Pozostałe właściwości będą miały zastosowanie do elementu DIV, ale właściwości kolorów i masy czcionek nie będą miały zastosowania do Div, ponieważ nie zawieramy tych właściwości tutaj.

Wyjście renderuje tutaj, a widać, że „rodzina czcionki” i „wielkości czcionki” są tutaj zmieniane zgodnie z wartościami, które ustawiliśmy w kodzie CSS, ale nie ma wpływu na „Washt Font-Weight” i „kolor” div. To dlatego, że niesiemy te wartości. W ten sposób możemy rozwinąć niektóre właściwości przy użyciu nazwy właściwości i ustawić wartość „Unset” dla tej właściwości.

Przykład 4

Umieścimy tutaj jeden nagłówek, a następnie umieścimy akapit; Po tym akapicie umieszczamy tutaj również element DIV, a na końcu umieszczamy element rozpiętości. Będziemy stylizować je wszystkie, a następnie rozwiniemy je wszystkie w CSS. Spójrz na plik CSS i zobacz, jak to zrobimy.

Nagłówek „Font-Family” to pierwsza właściwość, którą ustawiliśmy, i wybieramy dla niej „Algierski”. Dostosowujemy również jego „kolor”, który ustawiamy na „fioletowe” i „środkowe” również nagłówek, wykorzystując „Wyrównanie tekstu.„Mamy teraz akapit i wszystko, co musimy zrobić, to zmienić„ kolor ”akapitu. W tym przypadku wartość atrybutu „kolor” jest ustawiona na „zielony”. „Rozmiar czcionki” tutaj to „24px”. Jako właściwość „rodziny czcionki” używamy również „Times New Roman.„Atrybut„ dekoracja tekstu ”służy do utworzenia podkreślenia tekstu. Wartość „dekoracji tekstu” została ustawiona na „podkreślenie.„Używamy teraz słowa kluczowego„ Bold ”dla„ Waseight Font-Weight ”i właściwości„ Aligację tekstu ”do ustawienia tego akapitu w„ Centrum."

Teraz dla Div wykorzystujemy te same właściwości, ale zmieniamy tutaj wartości tych właściwości. W tej sytuacji wartość atrybutu „kolor” jest „czerwona.„W tym przypadku„ wielkości czcionki ”to„ 22px ”. Używamy również „Calibri” jako właściwości „rodziny czcionki”. Wartość „dekoracji tekstu” została zmieniona na „Podkreśl.„Aby umieścić tę DIV na środku, używamy właściwości„ Wyrównania tekstu ”i ustawiamy ją jako„ Center."

Następnie mamy rozpiętość, „niebieski” to wartość właściwości „kolor”. W tym przypadku „wielkości czcionki” to „20px”. „Cambria” jest również ustalane tutaj jako wartość właściwości „rodziny czcionki”. Zmieniamy również „styl czcionki” tego okresu na „kursywa.„Wartość„ dekoracji tekstu ”, której tu używamy, jest„ Podkreśl.„Pokazamy ci, jak to będzie wyglądać, gdy wszystkie nieruchomości mają zastosowanie do nich, a także, gdy nie zastosuje się do nich żadna nieruchomość. Pokazamy tutaj dwa wyjścia, abyś mógł łatwo poznać różnicę przed użyciem „unset” i po użyciu wartości „Unset” dla właściwości „wszystkich”.

Spójrz na to pierwsze wyjście tutaj; Wszystkie właściwości są stosowane do nagłówka, akapitu, div i rozpiętości, ponieważ nie używamy tutaj „unset” z żadną właściwością. Teraz przejdź do przodu i sprawdź, jak pokaże wyjście, gdy użyjemy „Unset."

W tym pliku CSS dodajemy po prostu „All: Unset” dla nagłówka, akapitu, Div i Span. Oznacza to, że „niesiemy” wszystkie właściwości, które zastosowaliśmy dla nich wszystkie.

Dane wyjściowe pokazuje, że na nagłówku, akapicie, Div i do elementu Span nie stosuje się właściwości. Wynika to tylko z wartości „niezajemnej”, której użyliśmy dla „wszystkich."

Wniosek

Ten samouczek został opracowany, aby pomóc Ci poznać wartość CSS „niezajemną”, która pozwala nam cofnąć niektóre właściwości, a także cofnąć wszystkie właściwości, po prostu umieszczając tam „niepokój”. Ten samouczek szczegółowo przeszedł ten temat. Przedstawiliśmy tutaj cztery różne przykłady, w których wykorzystaliśmy tę wartość „niezajemną”, a także wyjściowe, więc łatwo zrozumiesz, jak funkcjonuje ta „nieskażona” wartość. Wykorzystaliśmy wartość „Unset” oddzielnie od nazw właściwości, a także użyliśmy jej z właściwością „wszystkie”, która anulowała wszystkie właściwości, które zastosowaliśmy w przykładach. Mam nadzieję, że będziesz w stanie rozwinąć swoje właściwości w CSS po prawidłowym postępowaniu w tym samouczku.