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

 

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

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;

 

 

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 nazywamy się deklaracją.

 

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

 

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.

 

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>

</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 akapicie 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 akapit też był niebieski:

 

Cascading Style Sheets

Cascading Style Sheets

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

 

Źródło