KURS CSS

Selektory elementów   Selektory atrybutów   Selektory specjalne   Selektory pseudoklas   Selektory pseudoelementów

Treść

Selektory

Selektorem może być dowolny element języka HTML dla którego chcemy zdefiniować parametry formatowania. W zależności od sposobu odwoływania się do definicji reguły wyrózniamy następujące rodzaje selektorów:

Selektory elementów

Selektory elementów to najczęściej spotykane selektory o składni: selektor(właściwość:cecha;)
Selektor typu to podstawowy typ selektory np.: p, div, td(color:blue;).
Selektor uniwersalny (inaczej ogólny) to slektor pasujący do wszystkich znaczników. Ten selektor jest oznaczany *(gwiazdką). Np.: *(font-family:tahoma;)

Selektor potomka

Przy użyciu selektora potomka możemy formatować elementy wpisane w inny, leżący wyżej w hierarchii strony element. Np.: jeże w elemencie < h2>, znajduje się element < i>, to jest on potomkiem elementu < h2> i formatujemy go według wzoru: h2 i(własciwość:cecha;)

Przykład formatowania selektorem potomka

Selektor dziecka

Selektor dziecka służy do formatowania elementów znajdujących się o jeden rząd niżej w hierarchii drzewa dokumentu. Ma on postać rodzic > dziecko(właściowość:cecha;)

Przykład formatowania przy pomocy selektora dziecka

Selektor braci

Selektor braci formatuje 2 element na tym samym poziomie hierarchii, w/g wzoru: brat1+ brat2(właściwość:cecha;) Przykład na braci

Na początek

Selektory atrybutów

W CSS można formatować znaczniki na podstawie posiadanych przez nie atrybutów. Postać selektora atrybutów: selektor[atrybut="wartość atrybutu"]{właściwość:cecha;}. Selektory atrybutów można podzielic na trzy rodzaje:

  • Prosty selektor atrybutów - nadany atrybut bez wartości
  • Selektor atrybutu o określonej wartości
  • Selektor atrybutu zawierający określony wyraz
Przykłady
Prosty selektor atrybutów

Przkładowy akapit bez formatowania

Akapit formatowany selektorem atrybutu: p[align]{ font-size:20px; color:red; }

Selektor atrybutu o określonej wartości

Przkładowy akapit bez formatowania

Akapit formatowany selektorem atrybutu z wartością: p[align="right"]{ font-size:12px; color:blue; }

Selektor atrybutu zawierający określony wyraz

Przkładowy akapit bez formatowania

Akapit formatowany selektorem atrybutu z wartością: p[title~="jest"]{ font-family:Comic Sans MS; color:green; }

Na początek

Selektory specjalne

Selektory specjalne pozwalają nadać indywidualne cechy elementom wielokrotnie występującym na stronie. Mamy dwa takie selektory: selektor klasy i selektor identyfikatora.

Selektor klasy tworzymy zaczynając nazwę klasy od kropki (.), np.: p.akapit1, hdzie p to selektor a .akapit1 nazwa klasy. W kodzie HTML do selektora klasy odwołujemy się następująco: p class="nazwa klasy(bez kropki)" np.: p class="akapit1".

Tworzenie selektora identyfikatora wygląda podobnie tylko znakiem rozpoczynającym jest hash(#) np.: img#graf1. Podobnie również wstawiamy taki selektor do HTML'a: img id="graf1".

W przypadku obu tych selektorów możliwe jest tworzenie tzw. selektorów uniwersalnych, czyli nie przypisanych do określonego znacznika HTML. Dotyczy to szczególnie klas. Można taką klasę używać do wielu elementów.
Dobrą praktyką jest stosowanie klas do wielu elementów, a identyfikatora tylko do jednego elementu.

Na początek

Pseudoklasy

Pseudoklasy wprowadzają styl zależnie od położenia kursora myszy lub działania(np.: wciśnięcia l_kl myszy). Najczęściej stosowane do formatowania linków, mogą być użyte do większości elementów.
Pseudoklasy deklarujemy od dwukropka(:) i mamy 4 możliwości:

  • :active - link odwiedzony, strona jest aktualnie wczytana
  • :link - link nieaktywny, nie został jeszcze użyty
  • :visited - link odwiedzony
  • :hover - link gotowy do kliknięcia, kursor myszy nad linkiem

Stosując pseudoklasy, powinniśmy użyć wszystkich, i w podanej wyżej kolejności. Pseudoklasa hover może być użyta do formatowania elementów innych niż linki. Ten akapot posiada klasę "sil" z pseudoklasą "hover".

Pseudoklasa :focus nadaje atrybuty formatowania odsyłaczowi(wcześniej wybranemu)lub polu formularza na którym został ustawiony kursor. Konstrukcja selektor:focus{cecha:wartość;}

Na początek

Selekotry pseudoelementów

W języku HTML nie ma mechanizmów dostępu do takich elementów jak pierwsza litera lub pierwsza linia akapitu. Do ich formatowania możemy użyc pseudoelementów dostępnych w CSS.
Pierwsza linia; first-line może być formatowana następująco:
selektor:first-line{cechy:wartości};
Pierwsza litera; first-letter - selektor:first-letter{cecha:wartość};

Formatowanie pierwszej litery: font-size:1cm; color:red;

Na początek