Trwa tłumaczenie tego artykułu.
Ta strona jest częścią piątą kursu CSS Getting Started. Wyjaśnia ona jak możesz używać 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.
|
Więcej szczegółów 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.
Selektor class
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.
Selektor ID
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.
|
Przykłady <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
1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.
2. Następnie dodaj atrybuty id i class do pierwszej kopii, a potem id do drugiej:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</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>
</htmlTeraz 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:
|
Zadanie: użycie pseudo selectorów
- Utwórz plik HTML z następują treścią:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> </body> </html> - Edytuj plik CSS. Zamień jego treść na:
a.homepage:link, a.homepage:visited { padding: 1px 10px 1px 10px; color: #fff; background: #555; border-radius: 3px; border: 1px outset rgba(50,50,50,.5); font-family: georgia, serif; font-size: 14px; font-style: italic; text-decoration: none; } a.homepage:hover, a.homepage:focus, a.homepage:active { background-color: #666; } - Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt):
Go to our Home page
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