Grupa CSS
Składnia selektora grupy:
Element1, element2, element3…// Lista deklaracji
Przykład 1:
Aby zademonstrować te podane przykłady, używany jest kod Visual Studio. Otworzymy nowy plik i wybierzemy język „HTML”, który utworzy plik HTML. Następnie zaczynamy robić to w świeżo utworzonym pliku. Kiedy zapisujemy gotowy kod, „.rozszerzenie pliku html ”jest automatycznie dodawane do nazwy pliku. Gdy podstawowe tagi HTML pojawią się w tym nowo utworzonym pliku, dodając „!„Znaki i kliknięcie„ Enter ”, zaczynamy od dodania nagłówków„ H1 ”, a także„ H2 ”. Po tych nagłówkach umieszczamy dwa różne akapity w kodzie HTML. Teraz po tym produkujemy plik CSS, a także łączymy oba pliki do zastosowania właściwości CSS do elementów HTML.
Ponieważ chcemy zastosować ten sam styl zarówno na nagłówek, jak i do akapitu, nie musimy umieszczać wszystkich tych elementów osobno. Po prostu śledzimy selektor grupowania i wspominamy o wszystkich elementach i oddzielajemy je, umieszczając przecinek „” między nimi, jak pokazano na zrzucie ekranu poniżej. Wspominamy wszystkie elementy jako „H1, H2, P”. Teraz włóż kręcone szelki, a następnie wykorzystaj właściwości w tych kręconych aparatach ortodontycznych. Kiedy dodamy właściwości, wówczas właściwości te będą miały zastosowanie do wszystkich elementów, o których wspomnialiśmy. Używamy właściwości „Aligacja tekstu” i ustawiamy je na „Center”, wykorzystując tę jedną właściwość.
Następnie dekorujemy je, stawiając „podkreślenie” jako wartość właściwości „dekoracji tekstu”. „Rodzina czcionki”, której używamy do wszystkich tych elementów, to „Algierski”. Dostosowujemy „rozmiar czcionki” do „22px”. Następnie wykorzystaliśmy właściwość „koloru”, którą ustawiliśmy na „bordowy” na wszystkich nagłówkach, a także akapitach.
Oto wynik powyższego kodu CSS. Widać, że kolor, wielkości czcionki, rodzinna czcionka i wszystkie inne właściwości, które wykorzystaliśmy powyżej, są stosowane do wszystkich nagłówków i akapitów, ponieważ używamy dla nich selektora grupowania. Cały styl dla tych elementów jest tutaj taki sam, jak w kodzie CSS.
Przykład nr 2:
W tym przykładzie utworzymy wiele akapitów z unikalnymi nazwami, a także wieloma Divami o różnych nazwach. Mamy tu na kierunku przed wszystkimi tymi akapitami i divs. Zastosujemy selektor grupowania do tych wszystkich w kodzie CSS.
Umieszczamy nazwy wszystkich zajęć akapitowych i klas DIV, a także nagłówka. Zastosujemy te same właściwości do wszystkich. Wszystkie właściwości, które zamierzamy zdefiniować tutaj w kręconych klamrach, będą miały zastosowanie do wszystkich tych elementów, o których wspominaliśmy. Dostosowujemy wszystkie elementy w „centrum” z pomocą właściwości „Wyrównania tekstu” i używamy „Times New Roman” jako wartości właściwości „rodziny czcionki”. Następnie ustaw „rozmiar czcionki” na „23px”, a „kolor” dla wszystkich jest „czerwony”. Teraz stosujemy trochę „koloru tła” jako „lekkiego niebieskiego” i „w stylu czcionki” do „Kursyki”. Wszystkie te właściwości zostaną zastosowane do wszystkich akapitów, Divów, a także do nagłówka.
Tutaj, w tym wyniku powyższego kodu, wszystkie Divy, akapity, a także nagłówek pojawia się w tym samym stylu. Wszystkie właściwości stylizacji, które są stosowane na wszystkie z nich, są takie same. Ponieważ użyliśmy do tego selektora grupowania.
Przykład nr 3:
Tutaj zastosujemy te same właściwości do akapitów. Wszystkie akapity pojawią się tak samo. W przypadku Divs wykorzystujemy te same właściwości, więc wszystkie Divy będą renderować w tym samym stylu.
Używamy „Times New Roman”, ponieważ „H1” i „Orange” jest tutaj wybrane tutaj jako „kolor” jako „kolor”. „Kolor tła” tego „H1” jest ustawiony na „Light-Yellow”. Teraz umieszczamy wszystkie nazwy akapitów i używamy tutaj niektórych właściwości. „Calibri” jest określony jako wartość właściwości „rodziny czcionki”, a „rozmiar czcionki” będzie „23px”. Następnie „bordowy” dla „koloru”. Tutaj umieszczamy „kolor tła” „lekkiego zielonego”, a wartość właściwości „czcionki” jest ustawiona na „Bold”. Następnie mamy właściwość „kolor” i ustawiamy ją na „zielony”, a „kolor tła” dla wszystkich Divów to „lekkie salmon”. „Kursywa”, ustawiając tę wartość w właściwości „tekstu tekstowego”.
Tutaj widzisz, że wszystkie akapity pojawiają się w tym samym stylu, a wszystkie divy pojawiają się w tym samym stylu, w którym ustawiliśmy te wartości w kodzie CSS.
Przykład nr 4:
Mamy trzy różne nagłówki, akapit, div, a także klasę rozpiętości. Zastosujemy te same właściwości stylizacji do wszystkich w CSS.
Umieszczamy nazwy wszystkich elementów, na których chcemy zastosować właściwości. Możesz zobaczyć tutaj, jak umieścić te nazwy. Musimy umieścić przecinek między nazwami wszystkich elementów, a następnie umieścić właściwości wewnątrz kręconych aparatów ortodontycznych. Korzystamy z właściwości „Alignaj tekstu” do wyrównania „lewych” wszystkich komponentów. Rodzina czcionek „Times New Roman” jest ustawiona jako wartość właściwości „rodziny czcionki”. Następnie wybierz „24px” dla „wielkości czcionki”, który zostanie zastosowany do wszystkich, a „Purple” jest wybrane do „koloru”. Tutaj stosujemy „kolor w tle” „światła-różowego”, a słowo kluczowe „odważne” jest wybrane jako wartość właściwości „Wash-Weight”. Użyliśmy również „Podkreśl” właściwości „dekoracji tekstu”, aby wszystkie z nich są bardziej atrakcyjne.
Wynik wyżej wymienionego kodu CSS pokazano tutaj. Jak widać, wszystkie nagłówki i akapity, a także rozpiętość mają ten sam kolor, wielkość czcionki, radość czcionki i wszystkie inne style są takie same, ponieważ używaliśmy dla wszystkich selektorów grupowania. Formatowanie tych elementów jest tutaj takie samo.
Wniosek
W tym samouczku wyjaśniliśmy, że selektor grupowy jest zdefiniowany, ponieważ możemy wspólnie wybrać wiele komponentów i stylów, oddzielając je przecinkiem. W naszych kodach wykorzystaliśmy tę koncepcję. W tym samouczku omówiliśmy również, jak korzystać z tego selektora grupowego i jak ustawić właściwości w tym. Podaliśmy także wyniki wszystkich tych kodów. Dla Twojej korzyści opracowaliśmy pełny samouczek, który obejmuje kod, dokładne wyjaśnienie i wyniki.