Ta strona tłumaczy jak możesz użyć stylów selektywnie, i jak różne typy selektorów mają różne priorytety.
Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.
Informacja: Selektory
CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:
strong {color: red;}
W terminologii CSS cała ta linia jest regułą. Ta reguła zaczyna się od strong, który jest selektorem. Wybiera, które elementy w drzewie DOM będą używały tej reguły.
| Część wewnątrz nawiasów klamrowych nazywa się deklaracją. Słowo kluczowe Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie. Ten kurs odwołuje się do selektorów takich jak |
Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.
Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.
Dwa atrybuty posiadają specjalny status w CSS. Są to class oraz id.
Użycie atrybutu class w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.
W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.
Użycie atrybutu id w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie id mu nadasz. Nazwa id musi być unikalna w dokumencie.
W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym id, kiedy używasz go w selektorze.
Ten znacznik HTML posiada zarówno atrybut class, jak i id: <P class="key" id="principal"> Id, W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy .key {color: green;}
Ta reguła powoduje, że jeden element o id #principal {font-weight: bolder;}
|
Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.
| Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi. Na przykład selektor Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, W dalszej części kursu (Tabele) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach. Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę Selektory w specyfikacji CSS. |
Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.
Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.
Zadanie: Używanie selektorów class i id
Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go. Następnie dodaj atrybuty id i class do pierwszej kopii, a potem id do drugiej:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample document</TITLE>
<LINK rel="stylesheet" type="text/css" href="style1.css"></strong>
</HEAD>
<BODY>
<P id="first">
<STRONG class="carrot">C</STRONG>ascading
<STRONG class="spinach">S</STRONG>tyle
<STRONG class="spinach">S</STRONG>heets
</P>
<P id="second">
<STRONG>C</STRONG>ascading
<STRONG>S</STRONG>tyle
<STRONG>S</STRONG>heets
</P>
</BODY>
</HTML>
Teraz wyedytuj swój plik CSS. Zamień całą treść na:
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
Odśwież okno przeglądarki, aby zobaczyć wynik:
| Cascading Style Sheets |
| Cascading Style Sheets |
Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.
Selektory klas .carrot oraz .spinach mają priorytety nad selektorem znaczników strong.
Selektor id #first ma priorytet nad selektorami klas i znaczników.
Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski:
Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:
|
Co dalej?
Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.
Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: Czytelny CSS