Skip to main content

Visit Mozilla.org

CSS:Na początek:Selektory

z Mozilla Developer Center, polskiego centrum programistów Mozilli.


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.

[edytuj] 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
Część wewnątrz nawiasów klamrowych nazywa się deklaracją.

Słowo kluczowe color jest własnością, a red jest wartością.

Ś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 strong jako selektorów znaczników. Specyfikacja CSS odwołuje się do nich jako selektorów typu.

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.

Przykłady
Ten znacznik HTML posiada zarówno atrybut class, jak i id: 
<P class="key" id="principal">

Id, principal, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy key.

W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy key staną się zielone. (Nie wszystkie muszą być elementami P.) 

.key {color: green;}

Ta reguła powoduje, że jeden element o id principal zostanie pogrubiony: 

#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.

Więcej szczegółów
Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi.

Na przykład selektor .key wybiera wszystkie elementy, które mają klasę o nazwie key. Selektor p.key wybiera tylko elementy P, które mają klasę o nazwie key.

Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, class i id. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor [type=button] wybiera wszystkie elementy, które mają atrybut type o wartości button.

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.

[edytuj] Zadanie: Używanie selektorów class i id

Wyedytuj swój plik HTML i zduplikuj paragraf 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.

Wyzwanie
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 paragrafie stanie się niebieski:
Cascading Style Sheets
Cascading Style Sheets

Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy paragraf też był niebieski:

Cascading Style Sheets
Cascading Style Sheets


[edytuj] 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

Źródło: "http://developer.mozilla.org/pl/docs/CSS:Na_pocz%C4%85tek:Selektory"