HTML & CSS dla początkujących (część 26): Oto jak działa dostęp za pomocą selektorów (1)

Selektory określają, w jaki sposób style CSS są przypisywane elementom HTML. W odpowiedniej definicji najpierw podaje się nazwę elementu, do którego selektor ma odnieść się. Następnie deklaracja następuje w klamrach. W obrębie deklaracji można podać jedną lub więcej właściwości. Ogólna składnia wygląda zatem następująco:

Selektor {
   Właściwość1: Wartość;
   Właściwość2: Wartość;
   Właściwość3: Wartość;
}

Odpowiednia definicja została już przedstawiona w poprzednim samouczku.

h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Upewnij się, że każdą deklarację kończysz średnikiem.

Spójrzmy na dostępne selektory

W rzeczywistości, CSS posiada całkiem sporą liczbę selektorów, z których ważniejsze przedstawię. Bo jedno jest pewne: jedynie opanowanie pracy z selektorami pozwoli sensownie definiować właściwości CSS.

Najprostszą możliwością przypisania stylów wewnątrz dokumentu HTML jest selektor elementu.

Poprzez następującą składnię wszystkim elementom p zostaje przypisany kolor czarny.

p {
   color: #009966;
}

Jeśli chcesz przypisać ten sam styl kilku elementom, jest to również możliwe.

W tym przypadku wymieniasz po prostu odpowiednie elementy jedno po drugim, oddzielone przecinkiem.

p, h1,  li {
   color: #000;
}

Możesz też przypisać elementom wiele stylów. Stylizacje są oddzielane średnikiem.

p {
   color: #000;
   background-color: red;
}

Możliwe jest także połączenie wymienionych wariantów.

p, h1,  li {
   color: #009966;
   background-color: red;
}

Wynik może wyglądać tak:

Obszar zawierający kilka elementów

Często występuje potrzeba sformatowania obszaru, który składa się z kilku elementów HTML. W takich przypadkach HTML posiada dwa specjalne elementy - span i div. Te elementy będą Wam towarzyszyły - również w tej serii.

Przykład:

<div class="artikel">
  <h1>Farbexplosion</h1>
  <p class="thema">Poradnik dotyczący tworzenia kolorowej eksplozji autorstwa <span class="autor">Markusa Melzera</span>.</p>
</div>

Jedyną różnicą między div a span jest to, że element div wymusza nową linię w przepływie tekstu. Span natomiast nie tworzy nowej linii. W przedstawionym przykładzie definiowany jest obszar div, zawierający nagłówek i akapit. Wewnątrz akapitu z kolei znajduje się obszar span.

Selektory ID i klasy

Dotychczas korzystaliśmy z selektorów elementów. W poniższym przykładzie przez taki selektor zostają sformatowane wszystkie nagłówki h1.

h1 {
   color: #000;
   background-color: red;
}

Jednakże taka forma nie zawsze jest pożądana. Co na przykład w przypadku, gdy chcesz przypisać pewne właściwości tylko jednemu lub kilku, a nie wszystkim nagłówkom h1? W takich przypadkach CSS oferuje dwie możliwości, a mianowicie selektory klas i ID.

Selektory klas pozwalają geolokalizować elementy HTML z atrybutami klas. W odpowiednim elemencie HTML konieczne jest podanie atrybutu class. Definicje klas zaczynają się od kropki.

Przykład:

.czerwony {
   color: czerwony;
}

Została zdefiniowana klasa czerwony. Aby dodać właściwości koloru czerwonego do elementu HTML, należy podać class, a następnie nazwę klasy.

<p class="czerwony">PSD-Tutorials.de</p>

Selektor ID można użyć w podobny sposób. Selektor ID rozpoznawalny jest po podwójnym krzyżyku.

#topmenu {
   color: niebieski;
}

W tym przykładzie jest definiowane ID topmenu. Jednak uwaga: ID można przypisać w dokumencie tylko raz. Dostęp do zdefiniowanej właściwości ID wygląda następująco:

<div id="topmenu">To jest nawigacja</div>

Atrybut id przypisuje się nazwę identyfikatora. Należy pamiętać, że w tym przypadku nie notuje się potrójnego kratownika.





Warto zaznaczyć, że podane informacje można również ze sobą łączyć. Na przykład, można przypisać jednemu elementowi HTML kilka klas.

<p class="czerwony duży">PSD-Tutorials.de</p>

W tym przykładzie do akapitu tekstu przypisano dwie klasy: czerwony i duży. Jeśli chcecie podać klasę i identyfikator, wygląda to następująco:

<p class="czerwony" id="navi">PSD-Tutorials.de</p>

Podobnie można łączyć ze sobą elementy i identyfikatory. Przykład poniżej:

div.navi { 
   color: blue; 
}

Ten składniowy zapis odnosi się wyłącznie do elementów div o klasie navi. Elementy p, które również posiadają klasę navi, nie zostaną dotknięte.

W CSS istnieje jeszcze inny sposób łączenia selektorów. Zachęcam do zapoznania się z poniższą składnią:

h1 { 
   color: red;
}
em { 
   color: blue; 
}

Tutaj wszystkim nagłówkom pierwszego rzędu przypisano kolor czerwony. Elementy em otrzymały kolor niebieski.

Dzięki połączeniu tych dwóch instrukcji można teraz zapewnić, że tylko elementy em będą koloru niebieskiego, które znajdują się wewnątrz elementów h1.

h1 em { 
   color: blue; 
};

Nazwy elementów są tutaj oddzielone od siebie bez przecinków.

To zresztą popularna pułapka, w którą często wpadają także początkujący w CSS. Przedstawiamy tę samą składnię, ale tym razem z dodanym przecinkiem:

h1, em { 
   color: blue; 
}

Co oznacza ta składnia? Ona odnosi się do wszystkich elementów h1 i wszystkich elementów em. Jest to więc zupełnie co innego niż składnia bez przecinka!

Innym ważnym selektorem jest selektor uniwersalny. Pozwala on na wybór dowolnego elementu. Ten selektor jest definiowany poprzez gwiazdkę.

* { 
   color: red; 
}

Dzięki temu zapisowi wszystkie elementy zostaną pokolorowane na czerwono. Z tym selektorem również wiążą się pewne szczególne składniowe cechy.

#mainnavi * { 
   color: red; 
}

W tym przykładzie kolor tekstu wszystkich elementów wewnątrz elementu o identyfikatorze mainnavi zostanie zmieniony na czerwony. Jednakże nie dotyczy to samego elementu.

Jeśli selektor uniwersalny znajduje się na początku deklaracji, wówczas nie trzeba go zapisywać. Coś takiego byłoby zbędne:

* p { 
   color: red; 
}

Ten zapis jest równoznaczny z poniższym:

p { 
   color: red; 
}

W następnym samouczku poznacie więcej selektorów.