Selektor uniwersalny
Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 15 z 76.
Selektor uniwersalny to potężny selektor w CSS, który wybiera każdy element HTML na stronie. Jest reprezentowany przez gwiazdkę (*).
Selektor uniwersalny po zastosowaniu określonych stylów obejmuje wszystkie elementy, niezależnie od ich typu, klasy czy identyfikatora. Może być przydatny do ustawiania stylów globalnych lub resetowania stylów domyślnych w całym dokumencie.
Oto podstawowa składnia używania selektora uniwersalnego:
* {
property: value;
}Na przykład załóżmy, że chcesz ustawić domyślny kolor tekstu i rozmiar czcionki dla wszystkich elementów na stronie. Możesz użyć selektora uniwersalnego w ten sposób:
* {
color: black;
font-size: 14px;
}
Wyzwanie
ŁatwyOtrzymujesz dokument HTML zawierający różne elementy, w tym nagłówki (<h1>, <h2>), akapity (<p>) i element podziału (<div>). Twoim zadaniem jest użycie selektora uniwersalnego do stylizacji tych elementów. Wykonaj poniższe kroki:
- Napisz regułę CSS używającą selektora uniwersalnego, która ustawia kolor tekstu wszystkich elementów na darkgray, a rozmiar czcionki na 16 pikseli.
Spróbuj swoich sił
<html>
<head>
<title>Universal Selector</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Stylizacja za pomocą CSS
4Podstawy tekstu
Kolor tekstuRodzina czcionekRozmiar czcionkiGrubość czcionkiWyrównanie tekstuDekoracja tekstuWyzwanie powtórkowe #1Wyzwanie powtórkowe #27Model pudełkowy, część 1
Czym jest model pudełkowy?Odstęp wewnętrznyMarginesyObramowaniaSzerokość i wysokośćZadanie podsumowujące13Strona internetowa Tonga
Menu nawigacyjneNagłówek powitalny
Sekcja „O nas”Sekcja kontaktowaZnacznik viewportMedia query8Model pudełkowy, część 2
Rozmiar pudełkaZaokrąglenie rogówPrzepełnienieCień pudełkaWyzwanie podsumowujące3Podstawowe selektory
Wprowadzenie do selektorówSelektor typuSelektor klasySelektor identyfikatoraGrupowanie selektorówSelektor uniwersalnyWyzwanie: selektory9Flexbox
Czym jest Flexbox?Kierunek flexJustify ContentAlign ItemsIdealne wyśrodkowanieWyzwanie Flexbox12Podstawy responsywnego projektowania
Czym jest responsywne projektowanie?Znacznik meta viewportElastyczne układyJednostki viewportuPodstawy Media QueriesElastyczne obrazyPoćwicz samodzielnie: Edytor online Web