CSS Asterisk
Składnia
*Wartość nieruchomości
LUB
*rodzic
Wartość nieruchomości
Przykład 1
Utwórz plik HTML i zapisz akapity i nagłówki w pliku HTML, abyśmy mogli je stylizować za pomocą selektora CSS „*”. W tym samouczku oprogramowanie, których używamy do wykonywania przykładów, to Visual Code Studio. Tak więc otwieramy plik HTML w tym kodzie Visual Studio i piszemy kod HTML tutaj. Podajemy również kod. Ten plik jest zapisywany za pomocą „.rozszerzenie pliku html ”.
Widać, że mamy nagłówek1 w ciele HTML, a następnie klasę „”, w której mamy dwa różne akapity za pomocą „
„Tag, a następnie zamknij ten„ div ”. Po tym „mamy kolejny akapit”
„Który jest poza„ ”. Tutaj zamykamy ciało i oszczędzamy. Następnie przechodzimy do naszego pliku CSS, gdzie używamy gwiazdki „*”, aby zastosować różne style na tej stronie HTML.
Kod CSS
Tutaj tworzymy nasz plik CSS i używamy „.rozszerzenie pliku CSS ”z tym plikiem. Musimy połączyć ten plik do pliku HTML. Tak więc, wszystkie styliza.
Najpierw używamy selektora „*”, a następnie używamy właściwości różnych stylów wewnątrz kręconych aparatów ortodontyczny. Używamy właściwości „koloru tła” i wybraliśmy kolor „żółty” dla tła tej strony. Następnie mamy właściwość „kolor” i tę właściwość „koloru” zmienia kolor tekstu na „fioletowy”. Zmieni wszystkie kolory tekstowe zapisane w pliku HTML na „Purple”. Użyj również właściwości „rodziny czcionki”, która jest używana do zmiany stylu czcionki, i ustaw ją na „Times New Roman”. Cały tekst zostanie napisany w tym stylu czcionki. Wszystkie właściwości stylów, których używamy, będą miały zastosowanie na pełnej stronie HTML, ponieważ używamy „*” i nie wspominamy żadnej nazwy z tym „*”.
Wyjście
Otrzymujemy to wyjście, klikając prawym przyciskiem myszy plik HTML i wybierając „Otwórz w domyślnej przeglądarce”. Dane wyjściowe pokazuje, jak ten selektor „*” działa w CSS.
Możesz zauważyć, że cały tekst jest wyświetlany w kolorze „fioletowym”, a cały tekst jest napisany w stylu czcionki „Times New Roman”, a cały kolor tła jest „żółty”. Tak więc, kiedy używamy selektora „*”, nie musimy stosować go osobno do każdego elementu. Selektor „*” przyjmuje wszystkie elementy pliku HTML i stosuje styl do wszystkich.
Przykład 2
Mamy przykład 2 i zmieniamy kod HTML. Tworzymy trzy akapity w „Div” i jeden akapit poza Div w tym kodzie HTML.
Kod CSS
W tym pliku CSS wspomnimy o „Div” z gwiazdką „*”. Następnie użyj właściwości stylizacji dla tego „DIV”. Te styl będą miały zastosowanie do wszystkich elementów „Div”.
Używamy „Div *” i umieszczamy kręcone aparaty ortodontyczne, w których używamy właściwości stylu. Tutaj używamy „jasnoniebieskiego” jako „koloru tła” tylko dla elementów div. Następnie „Blue-Violet” jest ustawiony dla koloru tekstu lub czcionki. Zmień także styl czcionek elementów Div na „Algierski” za pomocą właściwości „Font-Family”. Dostosowujemy tekst elementów „Div” w „centrum” za pomocą „align tekstu”.
Wyjście
Na tym wyjściu nagłówek jest prosty. Nie ma zastosowania do tego nagłówka, ponieważ ten nagłówek jest napisany poza „Div”. Stosujemy stylowanie tylko do elementów „div”. Teraz kolejne trzy wiersze zostały napisane w „Div”. Jego styl czcionki jest zmieniany, jego kolor czcionki jest zmieniany, a także tekst umieszcza się na środku, a tło tych linii jest niebieskie. Wszystkie te stylowania, których używamy w naszym pliku CSS, są stosowane do wszystkich elementów „Div”. Ostatni akapit jest również prosty, ponieważ jest również napisany poza „Div”.
Przykład 3
Wykonujemy również inny przykład, dzięki czemu możesz łatwo uzyskać różnicę między tym, jak działa selektor „*”, a jak działa, gdy używamy dowolnej nazwy z tym selektorem „*”.
W tym pliku HTML tworzymy nagłówek 1 za pomocą „
”Tag; klasa DIV za pomocą znacznika „”; akapity za pomocą „
”Tag; a także klasa spanów za pomocą znacznika „”. Zastosujemy różne style na „H1”, „Div”, „P” i „rozprzestrzenianie się” za pomocą CSS.
Kod CSS
Najpierw używamy tylko selektora „*” do zmiany całego koloru tła strony HTML. Kolor „różowy” jest wybrany jako „kolor tła” dla strony HTML. Następnie używamy „P” z „*”, aby wszystkie stylowanie zostanie zastosowane do akapitów zapisanych w pliku HTML. „Kolor tła” wszystkich akapitów jest ustawiony jako kolor „jasnozielony”. Rozmiar tekstu napisanego w tagu akapitu zostanie renderowany w „Monospace”, gdy ustawiamy rozmiar tekstu akapitu na „Monospace”. Wszystkie te właściwości stylu są stosowane do akapitów.
Następnie stylizujemy elementy klasowe „rozpiętości” za pomocą „rozpiętości” z „*”. Kolor tła Elements Elements jest „jasnoniebieski”, a styl czcionki jest „Kursywa” i „Bold”. Następnie mamy klasę „div” i będziemy to stylizować. Zmieniamy jego kolor tła na „żółty”. „Rozmiar czcionki” to „130%” dla elementów DIV. Cały tekst elementu DIV jest renderowany w centrum, ponieważ używamy „Wyrównania tekstu”. „Rodzina czcionki” jest „algierska”. „H1” pozostaje. Musimy więc zastosować styl na tym H1. „Kolor tła” nagłówku 1 to „pomarańczowy”, a tekst tego nagłówka 1 jest ustawiony jako „zielony” w kolorze. Rozmiar czcionki nagłówka 1 to „25px” i jest wyrównana „środkowa”.
Wyjście
Wyjście pokazuje, że nagłówek ma inny kolor, a także styl tego nagłówka jest inny. Używamy dwóch klas „Div”, a dane dwóch klas Div są takie same w stylizacji. Możesz zobaczyć, że istnieją cztery akapity, a kolor tła tych czterech akapitów jest zielony. Klasy spanów są takie same w stylu, a kolor tła klasy spanów jest jasnoniebieski. Całe tło jest takie samo, jak używamy tej właściwości „koloru tła” z „*”.
Wniosek
W tym samouczku nauczyliśmy się użycia gwiazdki „*” w CSS. Studiowaliśmy, jak to działa samotnie i jak działa, pisząc dowolną nazwę z tym selektorem „*”. Dowiedzieliśmy się, że ten selektor gwiazdkowy przyjmuje wszystkie elementy strony HTML i zastosował styl do wszystkich tych elementów. Zbadaliśmy różne przykłady, w których użyliśmy tego selektora „*” w CSS i uczyniliśmy wyniki wszystkich tych przykładów. W tym samouczku dostarczyliśmy kod HTML i CSS wraz z wynikami tych kodów.