Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Selektory

Wprowadzenie do selektorów

Email Drukuj PDF

Tematy: wprowadzenie | selektory elementów | selektory atrybutów | selektory specjalne | selektory pseudoklas | selektory pseudoelementów

Selektory, o których powiedzieliśmy wstępnie w rozdziale Budowa stylu, należą do kluczowych pojęć Cascading Style Sheets. To one właśnie wskazują obiekty, którym przypisujemy jakiś zestaw własności. Selektorem może być dowolny element języka HTML. Przykładem jest choćby element p, który w języku HTML, jak wiadomo, oznacza akapit, albo ul, czyli wykaz nieuporządkowany. Jest to tzw. selektor prosty (por. inne selektory).

Budowa stylu

Ogólna konstrukcja stylu ma następującą postać:

selektor { cecha: wartość }

W języku angielskim: selector { property: value }

Widać z tego, że selektor pełni tutaj zasadniczą rolę określając, jakiemu elementowi przypiszemy pewne własności. Gdybyśmy chcieli przypisać akapitowi czcionkę Helvetica o rozmiarze 12pt, powinniśmy to zdefiniować następująco:

p { font-family: Helvetica; font-size: 12pt; }

Podobnie, gdyby wykaz nieuporządkowany miał być przedstawiony za pomocą czcionki pogrubionej, koloru czerwonego, definicja powinna wyglądać następująco:

ul { font-weight: bold; color: #FF0000; }

Pojęcie selektora jest więc proste i zrozumienie jego znaczenia nie powinno przysparzać żadnych trudności.

Grupowanie selektorów

Te same wartości stylu możemy nadać jednocześnie kilku selektorom, wyliczając ich listę przed deklaracją własności i wartości. Na przykład, chcąc przypisać taką samą czcionkę i kolor tytułom stopnia pierwszego, drugiego i trzeciego, zamiast definiować każdy tytuł z osobna, możemy napisać:

h1, h2, h3 {font-family:Helvetica; color:blue; }

Zwróćmy uwagę na przecinki rozdzielające selektory.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V