* { font-family: Tahoma; color: Teal; } Przedstawione w języku CSS formatowanie czcionki będzie obowiązywać dla
* { font-family: Tahoma; color: Teal; }Przedstawione w języku CSS formatowanie czcionki będzie obowiązywać dla
Pytanie z egzaminu CKE, czerwiec 2020 (arkusz EE.09-SG-20.06).
Gwiazdka to selektor uniwersalny: reguła * { ... } obejmuje każdy element strony. Czcionka Tahoma i kolor Teal stają się więc ustawieniem domyślnym dla wszystkich znaczników, od <body> po każdy <span>.
Selektor uniwersalny ma najniższą szczegółowość, dlatego każda bardziej konkretna reguła go nadpisze, na przykład h1 { color: navy; } zmieni kolor nagłówków. Gwiazdkę stosuje się często do resetu stylów: * { margin: 0; padding: 0; box-sizing: border-box; }. Do zapamiętania: * - wszystkie elementy, # - identyfikator, kropka - klasa.
Wiele właściwości tekstu, takich jak kolor i krój pisma, dziedziczy się z rodzica, więc podobny efekt daje często reguła dla <body>. Gwiazdka różni się tym, że przypisuje styl każdemu elementowi bezpośrednio, także polom formularza, które kroju z <body> nie dziedziczą.
Identyfikator w selektorze CSS zapisuje się z krzyżykiem (#menu), a klasę z kropką (.menu). Gwiazdka nie jest ani jednym, ani drugim, a wartość * w atrybucie id czy class nie byłaby zresztą sensowną nazwą.
Najczęstszy błąd to wybór wersji „niezależnie od późniejszych ustawień”. Rzeczywiście reguła dotyczy całego kodu HTML, ale nie wygrywa z innymi regułami. Kaskada CSS daje pierwszeństwo regułom bardziej szczegółowym: selektor typu, klasy czy identyfikatora nadpisze ustawienie z gwiazdki. Tylko dopisanie !important mogłoby zmienić ten porządek, a tu go nie ma.
Formatowanie z selektora uniwersalnego obowiązuje więc wszystkie elementy strony jako ustawienie domyślne, które dalsze, bardziej konkretne reguły mogą zmienić.
Kolejność reguł w pliku ma znaczenie dopiero wtedy, gdy dwie reguły mają tę samą szczegółowość - wtedy wygrywa reguła zapisana później.