Uniwersalny selektor CSS jest prawdopodobnie najłatwiejszy do zrozumienia, ponieważ określa, że style zostaną zastosowane do absolutnie wszystkich elementów bez wyjątku. Selektor uniwersalny składa się tylko z jednego znaku – gwiazdki (*), ogólna składnia jest następująca:
* { wartość nieruchomości; wartość nieruchomości; ... )
Przykład selektora uniwersalnego CSS
Ustęp 1
Ustęp 2
Ustęp 3
Wynik w przeglądarce
Ustęp 1
Ustęp 2
Ustęp 3
W tym przykładzie wyczyszczono marginesy, wypełnienia i ramki elementów strony. Dlaczego może to być potrzebne? Jak już wiesz z lekcji , niektóre elementy HTML początkowo mają pewne wartości niektóre właściwości, np. dla akapitów są to niezerowe górne i dolne marginesy pustej przestrzeni, dla łączy obrazkowych są to ramki itp. Ale nie wszystko jest takie proste, faktem jest, że w różne przeglądarki wielkość tych pól może się nieznacznie różnić, a niektóre od dłuższego czasu nie mają ustawionych domyślnych ramek dla linków do obrazów. A to nie wszystkie możliwe różnice.
Dlatego wielu projektantów układów (a teraz uczysz się układu) tworzy tak zwane „Reset Style CSS", czyli na samym początku arkusza stylów resetują wszystkie możliwe niezerowe wartości CSS, a następnie w trakcie pracy dodają do elementów style, ale oczywiście z własnymi wartościami. Dzięki temu możesz mieć pewność, że strona HTML będzie wyglądać tak samo we wszystkich przeglądarkach.
Bardzo często do resetowania stylów używa się selektora uniwersalnego, chociaż niektórzy wolą po prostu wypisać niektóre selektory tagów oddzielone przecinkami, a inni w ogóle nie korzystają z resetowania, zdając się na swoją uwagę. Decyzja należy do Ciebie, co zrobisz, ale w każdym razie jest za wcześnie, aby o tym myśleć. I pamiętaj, że z czasem wypracujesz sobie własny styl pisania (przepraszam za tautologię), więc nie zawracaj sobie tym głowy.
Praca domowa.
Nie widzę sensu odrabiania pracy domowej nad selektorem uniwersalnym, bo wszystko tutaj jest zbyt oczywiste, więc zróbmy coś trochę innego.
Witam, drodzy czytelnicy bloga. Dzisiaj będziemy nadal wypełniać nasze materiały i zaczniemy mówić o tak podstawowej rzeczy, jak selektory w języku CSS.
Jest ich siedem typów – tag, class, Id, universal, atrybuty, a także pseudoklasy i pseudoelementy. Trochę dużo, prawda? Cóż, nieważne, powoli przeanalizujmy je wszystkie i skorzystajmy ze szczegółowych przykładów.
W poprzednich publikacjach przyglądaliśmy się już , a także zapoznaliśmy się z jednostkami wielkości, takimi jak i poznaliśmy zasady dziedziczenia w CSS. Cóż, dzisiaj, jak powiedziałem, otwieramy bardzo poważny rozdział w badaniu języka znaczników stylistycznych.
Zanim zaczniesz studiować zasady stylu, musisz dowiedzieć się, jak i według jakich zasad ustawić te znaczniki, dzięki którym przeglądarka zrozumie, do jakich elementów kodu HTML mają zostać zastosowane. Selektory są różne. Te najprostsze, z punktu widzenia zrozumienia, wykorzystują nazwy znaczników, do których trzeba będzie zastosować zapisane po nich reguły języka CSS.
W w tym przykładzie wszystkie znaczniki akapitu P będą miały czerwony kolor czcionki i szary kolor aby wypełnić tło. Każda reguła CSS może mieć określonych kilka selektorów jednocześnie. Jak należy je czytać? Zawsze z prawej do lewej, tj. zacznij od tego najbliżej nawiasu otwierającego.
W powyższym przykładzie pierwsza linia pokazuje selektor znacznika (elementu), który wymusza czerwony kolor czcionki dla wszystkich kontenerów Div.
Zawartość zwykłego kontenera Div
W drugiej linii widzimy przykład złożonego selektora, w którym mamy nowy element np klasa. Jest zarejestrowany jako . Możemy użyć dowolnej nazwy jako wartości klasy, używając symboli ,,,[_],[-].
Ale oprócz klas język znaczników stylu używa również identyfikatora. Jaka jest różnica między klasą a identyfikatorem? Wartość tego ostatniego musi być wyjątkowa, ponieważ Id jest unikalnym identyfikatorem dla znacznika HTML, a jego nazwa (wartość) może zostać użyta w kodzie tylko raz.
Wartość klasy nie jest unikalna i można jej użyć do dowolnej wartości duża ilość elementy w kodzie. Te. różne znaczniki (Div, P, H1 itp.) mogą mieć to samo znaczenie atrybut klasy:
Jak się go używa Selektory CSS? Okazuje się, że jego nazwisko jest pisane z kropką z przodu.
Dlatego też, gdy w kodzie CSS widzimy coś zaczynającego się od kropki, od razu to rozumiemy mówimy o o klasie. Jeśli spojrzymy na przykład podany na zrzucie ekranu, teraz we wszystkich elementach kodu HTML, w których zapisana jest „klasa” o wartości „Niebieski”, tekst zostanie zabarwiony na niebiesko.
Ale tak się wcale nie stanie, ponieważ wybraliśmy nazwę klasy „Niebieska”. Moglibyśmy to nazwać dowolnie (nawet „xyz”), a kolor w naszym przykładzie jest ustawiony dokładnie tak, jak przypisano selektorowi w tej klasie. Mam nadzieję, że to jest jasne? Zmieńmy nazwę (wartość) klasy w przykładzie:
Akapit z tekstem
Akapit z tekstem
Te. Teraz mamy klasę XYZ i napisaną dla niej regułę:
Xyz (kolor:niebieski)
Pokolorowałem tekst akapitu na niebiesko. Ten przykład po raz kolejny to podkreśla nazwa atrybutu klasy możesz użyć dowolnego. Jednak kontynuujmy.
Przyjrzyjmy się jeszcze raz przykładowi użycia selektorów tagów i klas w CSS. Wyobraźmy sobie, że mamy następujące reguły stylu:
Div (kolor:czerwony) div.a123 (kolor:zielony) .xyz (kolor:niebieski)
Wyobraźmy sobie również, że w kodzie HTML mamy następujące elementy:
Zgodnie z ustalonymi regułami dla określonych selektorów, zawartość podanych elementów kodu HTML powinna wyglądać następująco:
Zobaczmy teraz, dlaczego przeglądarka zinterpretowała to w ten sposób stylizacja elementy danych kodu HTML. Dla pierwszego kontenera Div, w którym nie określono żadnej klasy, będzie obowiązywać reguła CSS obowiązująca dla wszystkich kontenerów: div (kolor: czerwony). W związku z tym jego zawartość zostanie zabarwiona na czerwono. To właśnie trzeba było pokazać.
W tagu drugiego Div mamy klasę „a123”. W tym przypadku zastosowane zostaną reguły CSS odpowiadające „div.a123” (ponieważ mamy po prostu znacznik Div z zapisanym w nim atrybutem class="a123"). Dlatego zawartość drugiego pojemnika zostanie zabarwiona na zielono.
Ale prawdopodobnie zauważyłeś, że pierwszą regułę CSS „div (color:red)” możesz zastosować także do drugiego Div, ponieważ jest ona przeznaczona dla wszystkich kontenerów bez wyjątku. Prowadzi to do sprzeczności, którą można rozwiązać w CSS, wprowadzając koncepcję.
Porozmawiamy o tym szczegółowo nieco później, ale na razie powiem tylko, że priorytet „div.a123” (dla drugiego Div w rozważanym przykładzie) będzie wyższy.
Nawiasem mówiąc, podobna sytuacja ma miejsce w przypadku trzeciego Div z naszego przykładu. Dostępne są dwie opcje: selektor znacznika „div” i selektor klasy „.xyz”. Ponownie, z powodów, które nie zostały jeszcze przeze mnie wyjaśnione (przeczytaj o tym w linku tuż powyżej), priorytet tego ostatniego będzie wyższy, dlatego zawartość trzeciego pojemnika zostanie oznaczona kolorem niebieskim.
Przejdźmy dalej. W powyższym przykładzie mamy znacznik akapitu P, który zawiera klasę="a123". Okazuje się, że ten element nie należy do żadnego z trzech wskazanych przez nas selektorów (wszystkie trzy go pominęły).
Ma tylko skrzyżowanie z drugą opcją, ale ten selektor będzie używany tylko dla znaczników „Div” z klasą „a123”, a nie dla znacznika akapitu P. W rezultacie kolor tekstu w tym akapicie pozostanie domyślny , tj. czarny.
Następnie w przykładzie mamy element akapitu z klasą = „xyz”. Zostanie do niego zastosowana ostatnia reguła CSS „.xyz (kolor:niebieski)”. Dlatego tekst tego akapitu zostanie zaznaczony kolorem niebieskim. Tutaj myślę, że wszystko jest jasne.
Przejdźmy teraz do identyfikatorów, o których już wspomniałem. Kiedy widzimy coś w kodzie CSS hash z przodu, to oznacza, że mamy do czynienia z Id:
Zwykle ten selektor jest zapisany nie wspominając o tagu, do którego się odnosi (pierwsza opcja w przykładzie podanym tuż powyżej), chociaż druga opcja pisowni jest również akceptowalna, ale jest rzadko używana. Wynika to z faktu, że wartość atrybutu Id w kodzie będzie unikalna, co oznacza, że nie mogą istnieć dwa elementy o takich samych wartościach Id. Te. nie ma sensu wyjaśniać, choć nie jest to zabronione.
Dlatego zazwyczaj po prostu zapisują skrót (hash), po którym bezpośrednio następuje wartość (nazwa) atrybutu Id. Załóżmy, że mamy następującą regułę dla Id:
#tył (kolor:czerwony)
a kod zawiera następujący fragment:
co w wyniku zastosowania do niego reguły po „#back” będzie interpretowane przez przeglądarkę następująco:
Kontener div z unikalnym identyfikatorem
CSS również zapewnia selektor uniwersalny oznaczony gwiazdką, co na to wskazuje ta reguła będzie mieć zastosowanie ogólnie do dowolnego elementu w kodzie:
* (czarny kolor)
W takim przypadku tekst zawarty w dowolnym tagu będzie czarny (kolor domyślny). Oczywiste jest, że wszystkie pozostałe selektory (tagi, klasy i Id) będą miały wyższy priorytet niż uniwersalny.
Wszystkie opcje opisane powyżej (tag, klasa, identyfikator i uniwersalny) będą działać w absolutnie wszystkich przeglądarkach. Istnieją jednak inne opcje, które nie wszędzie działają.
Do tego typu zaliczają się selektory atrybutów, które są bardzo wygodne i pozwalają znacznie rozszerzyć i jednocześnie uprościć możliwości ukierunkowanego wpływu, ale które niestety nie są w pełni obsługiwane przez wszystkie przeglądarki.
Jak zapewne pamiętacie, w Język HTML wewnątrz tagów możemy zastosować różne atrybuty, które pozwalają nam nadać określone właściwości zawartości samych tych elementów. Dlatego logiczne byłoby używanie nie tylko nazw tagów, ale także nazw atrybutów jako selektorów w języku CSS.
Właściwie zrobiliśmy to już, gdy przyjrzeliśmy się klasie i identyfikatorowi, ponieważ były to w zasadzie atrybuty niektórych tagów. Tyle, że ID i Klasa są bardzo ważne w układzie i zostały umieszczone w oddzielnych grupach, każda z własną składnią.
Jak korzystać z innych selektorów istniejących w języku? Atrybuty HTML(nie identyfikator i nie klasa)? Całkiem proste - ująć je w nawiasy kwadratowe:
(Zielony kolor)
Teraz każdy tag w kodzie HTML, który zawiera „tytuł”, będzie miał zielony kolor tekstu.
Moim zdaniem bardzo wygodne. Ale cały problem z używaniem selektorów atrybutów polega na tym nie działają w IE 6 i niższych ogólnie lub działają, ale tylko częściowo. Dopóki udział użytkowników uzyskujących dostęp do Internetu przy użyciu IE 6 nie wyniesie zera, będzie to wygodnym sposobem najprawdopodobniej nie będzie szeroko stosowany w układzie. Niemniej jednak trzeba wiedzieć o ich istnieniu i umieć z nich korzystać.
Jak widać na przykładzie nie ma znaczenia, czy atrybut określony w selektorze ma jakąkolwiek wartość, czy jest pusty. Ale to nie wszystko, co możesz z tym zrobić, ponieważ to tylko piosenka.
Możesz w nich wskazać nie tylko nazwa atrybutu, ale także jego znaczenie:
(Zielony kolor)
W rezultacie reguły CSS określone dla takiego selektora zostaną zastosowane tylko do tagu, który ma „tytuł” o wartości „Pierwszy akapit” (w naszym przykładzie będzie to druga linia):
Opisany przykład był ścisłą równością, ale możesz napisać ten selektor w ten sposób:
(Zielony kolor)
To. ta reguła CSS będzie miała zastosowanie tylko do tych elementów kodu HTML, których „tytuł” zawiera słowo „akapit” (w naszym przykładzie będzie to druga i trzecia linia):
Interpretuje składnię selektora atrybutów «~=» ponieważ „zawarte jest całe słowo”. Na przykład dla elementu z tytułem="Drugi akapit" CSS правило «color:green» уже применяться не будет.!}
Ale możesz to umieścić zamiast tego «*=» i wtedy nie tylko będą brane pod uwagę poszczególne słowa określone w selektorze, ale także części słów (dowolny fragment tekstu zawarty w dowolnym miejscu atrybutu):
(Zielony kolor)
W tym przypadku dla elementu z tytułem="Drugi akapit" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как !} «^=» (wszystko, co zaczyna się od wartości określonej w nawiasach), co pomaga utworzyć selektor atrybutów taki jak ten:
(kolor czerwony)
Prawdopodobnie pamiętasz, że atrybut określający . A więc dość często linki wewnętrzne na stronie są one względne, ale zewnętrzne nie mogą być wykonane inaczej, jak tylko uczynić je absolutnymi.
Dlatego wszystko Linki zewnętrzne będą zaczynać się od „http”, a wewnętrzne można określić w formie względnej bez użycia „http”. To. Selektor podany w naszym przykładzie na to pozwoli pokoloruj wszystkie linki zewnętrzne w witrynie(wszystkie absolutne) na czerwono. Cóż, względne, które nie zawierają „http”, pozostaną kolorem, który został dla nich domyślnie przyjęty. Uważam, że to jest świetne!!!
Jak widać selektory atrybutów dają nam bardzo dużo możliwości i to, że nie są jeszcze powszechnie stosowane to zasługa bardzo biednej i obrażonej firmy Melkosoft, a w szczególności ich pomysłu IE 6. Ale powoli zaczynają do wykorzystania w CSS i wkrótce oczywiście wejdą w życie.
Tak, jest inny operator «$=» - wszystko, co kończy się wartością podaną w cudzysłowie:
(Zielony kolor)
W rezultacie druga i trzecia linia z naszego pierwszego przykładu zostaną pokolorowane na zielono, ponieważ znaczenie „tytułu” kończy się na „raf”. W ten sposób selektory atrybutów doskonale sprawdzałyby się we współczesnym CSS, gdyby nie pewien procent użytkowników korzystających z przeglądarki IE 6.
Właściwie ze wszystkich typów pozostały nam tylko dwa do rozważenia: . Ale chcę to przenieść do następnego artykułu, w którym porozmawiamy również o ich różnych kombinacjach.
Powodzenia! Do zobaczenia wkrótce na stronach bloga
Możesz być zainteresowany
Selektory pseudoklas i pseudoelementów w CSS (hover, First-child, First-line i inne), relacje pomiędzy Tagi HTML kod 
Priorytety w CSS i ich wzrost dzięki Ważności, kombinacji i grupowaniu selektorów, stylów użytkownika i autora 
Styl listy (typ, obraz, pozycja) - Reguły CSS do dostosowywania wygląd listy w kodzie HTML 
Tło w CSS (kolor, pozycja, obraz, powtórzenie, załącznik) - wszystko do ustawienia koloru tła lub obrazu tła Elementy HTML
CSS - co to jest, jak łączyć się z kaskadowymi arkuszami stylów Kod HTML za pomocą stylu i łącza 
Jednostki wymiarowe (piksele, Em i Ex) oraz zasady dziedziczenia w CSS 
Do czego służy CSS, jak połączyć kaskadowe arkusze stylów z dokumentem HTML i podstawowa składnia tego języka 
Wypełnienie, margines i obramowanie — ustawione Wewnętrzny CSS i zewnętrzne, a także ramki ze wszystkich stron (góra, dół, lewa, prawa) Jak ustawić rotację kolor tła wiersze tabel, list i innych elementów HTML na stronie przy użyciu pseudoklasy nth-child 
Jak znaleźć i usunąć nieużywane linie stylu (dodatkowe selektory) w pliku CSS swojej witryny 
Wyświetl (blok, brak, inline) w CSS - ustaw typ wyświetlania elementów HTML na stronie internetowej
Czasami podczas tworzenia strony internetowej konieczne staje się nadanie określonego stylu wszystkim bez wyjątku elementom, które pojawiają się na stronie. Aby zrealizować to zadanie, stosuje się uniwersalny selektor.
Jest to oznaczone symbolem „*”. Za jego pomocą możesz zaznaczyć wszystkie tagi na stronie na raz, bez konieczności dostosowywania ich przeznaczenia i zagnieżdżenia. Na przykład:
* (rozmiar czcionki: 18 pikseli; )
Korzystając z tego wpisu, ustawiamy wszystkie elementy z tekstem na wysokość czcionki 18 pikseli.
Przyjrzyjmy się temu bliżej. Przed wersją 2 CSS nie było selektora uniwersalnego. Pasuje do wszystkich elementów, więc określone przez niego style zostaną zastosowane do nich jednocześnie. Używając tego selektora, należy zachować szczególną ostrożność. Ostrożność nazywa się możliwe wystąpienie trudności w dziedziczeniu stylów, a raczej ich nieprzewidywalnego zachowania.
Warto też zaznaczyć, że użycie klasy, identyfikatora, atrybutu pozwala na pominięcie uniwersalnego selektora bez szkody. Na przykład:
*. po lewej (obramowanie: 1px stała #000;). po lewej (obramowanie: 1px stała #000; )
Rekordy te niosą ten sam ładunek semantyczny, a styl zostanie zastosowany w ten sam sposób zarówno z użyciem selektora uniwersalnego, jak i bez niego.
Zasadniczo uniwersalny selektor można znaleźć w praktyce podczas resetowania domyślnych stylów przeglądarki. Na przykład wcięcia, rozmiary czcionek i tak dalej.
Jednakże, choć metoda ta jest prosta i dodatkowo znacznie zmniejszy długość kodu, ma ona szereg wad.
Wady uniwersalnego selektora przy resetowaniu stylów standardowych:
Z powodów opisanych powyżej zaleca się zresetowanie stylów specjalnie dla każdego elementu za pomocą selektora typu. Na końcu podano przykład podobnego kodu do resetowania stylów
Czasami trzeba ustawić jeden styl dla wszystkich elementów strony internetowej jednocześnie, na przykład ustawić czcionkę lub styl tekstu. W tym przypadku pomocny będzie uniwersalny selektor pasujący do dowolnego elementu strony internetowej.
W CSS3 selektor uniwersalny jest również używany w połączeniu z przestrzenią nazw.
* (Opis zasad stylu)
Symbol gwiazdki (*) używany jest do oznaczenia selektora uniwersalnego. W niektórych przypadkach nie jest konieczne określanie selektora uniwersalnego. Na przykład wpisy *.class i .class mają identyczne wyniki.
| Opis | Przykład | |
|---|---|---|
| <тип> | Wskazuje typ wartości. | <размер> |
| A i B | Wartości muszą być wyprowadzane w określonej kolejności. | <размер> && <цвет> |
| | B | Wskazuje, że należy wybrać tylko jedną wartość z proponowanych (A lub B). | normalne | kapitaliki |
| || B | Każda wartość może być używana niezależnie lub razem z innymi w dowolnej kolejności. | szerokość || liczyć |
| Grupuje wartości. | [przytnij || przechodzić ] | |
| * | Powtórz zero lub więcej razy. | [,<время>]* |
| + | Powtórz jeden lub więcej razy. | <число>+ |
| ? | Określony typ, słowo lub grupa jest opcjonalna. | wstawka? |
| (A, B) | Powtórz co najmniej A, ale nie więcej niż B razy. | <радиус>{1,4} |
| # | Powtórz jeden lub więcej razy, oddzielając je przecinkami. | <время># |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Przeglądarka Internet Explorera do wersji szóstej włącznie, rozumie konstrukcję *html, co jest nielogiczne, gdyż tag jest znacznikiem najwyższego poziomu i nie mogą znajdować się nad nim żadne elementy. Ten błąd jest czasami używany do tworzenia stylu dla IE6, takiego jak * treść HTML(...) doda styl do selektora treści w IE6 i niższych wersjach i nie działa w innych przeglądarkach.
W przeglądarka internetowa Jeśli w Explorerze 7 dodasz selektor uniwersalny przed nazwą selektora bez spacji, będzie on traktowany jako selektor kontekstu. Dlatego wpis *body działa tylko w IE7 i jest ignorowany przez inne przeglądarki.
Każda specyfikacja przechodzi kilka etapów zatwierdzania.
