Selektory CSS

W poprzednim poście dowiedzieliśmy się o istnieniu styli CSS. Dziś trochę więcej praktyki, czyli jak tworzyć selektory CSS aby dobrać się do wybranych elementów strony internetowej i zmieniać ich wygląd.


Znaczniki HTML jako selektory CSS

Gdy chcemy stworzyć regułę CSS dla wybranej grupy znaczników HTML sprawa jest prosta - przepisujemy ten znacznik do selektora CSS. Załóżmy, ze chcemy wyrównać tekst do środka i ustawić kolor tekstu na czerwony dla wszystkich nagłówków <h1> oraz <h2> na stronie, a kolor linków na zielony:

h1 {  text-align:center;  color:#f00;}h2 {  text-align:center;  color:#f00;}a {  color:#0f0;}

Identyczne reguły możemy łączyć oddzielając selektory przecinkiem:

/* rezultat identyczny z poprzednim zaoszczędziliśmy trochę na objętości kodu*/h1, h2 {  text-align:center;  color:#f00;}a {  color:#0f0;}

Atrybut id w CSS

O atrybucie id dowiedzieliśmy się już przy okazji zabawy z linkami i zakładkami na stronie. Pamiętajmy, że id jest niepowtarzalny w obrębie dokumentu HTML (to jakby PESEL dla elementów strony). Przypuścmy, że mamy na naszej stronie proste menu nawigacji i chcemy zachęcić do odwiedzenia strony "o mnie" przez zwiększenie wielkości tekstu w linku:

<a href="index.html">start</a> <a href="o-mnie.html" id="o-mnie">o mnie</a> <a href="kontakt.html">kontakt?</a>

Dokładamy więc odpowiednią regułę i odwołujemy się do elementu z id="o-mnie" wykorzystując znak #. Zwiększamy czcionkę dwukrotnie względem pozostałych linków:

h1, h2 {  text-align:center;  color:#f00;}a {  color:#0f0;}#o-mnie {  font-size:200%;}

CSS i class

Najwyższy czas poznać atrybut class. Powiedzieliśmy, że id jest jak numer PESEL - jeden i niepowtarzalny. Natomiast class jest trochę jak klasa w szkole i kilka elementów może należeć do tej samej klasy. Możemy więc kilku elementom przypisać atrybut class by następnie za pomocą selektorów CSS ubrać te elementy w identyczne mundurki;).

Wróćmy do ostatniego przykładu. Mamy już nagłówki, linki w kolorze zielonym oraz powiększony link do podstrony "o mnie". Okazuje się jednak, że musieliśmy na stronie dołożyć linki do innych stron internetowych. Chcemy teraz, żeby linki z nawigacji do podstron odróżniały się od zewnętrznych linków. Wykorzystajmy więc atrybut class:

<a href="index.html" class="nawigacja">start</a> <a href="o-mnie.html" class="nawigacja" id="o-mnie">o mnie</a> <a href="kontakt.html" class="nawigacja">kontakt?</a> <a href="http://www.zoo-krakow.pl/">Strona krakowskiego ZOO</a> <a href="http://www.zoo.opole.pl/">Strona opolskiego ZOO</a> 

Do poprzednich reguł CSS dopiszemy nową regułę dla linków z nawigacji. Zmienimy ich kolor na niebieski oraz pogrubimy czcionkę. Selektory dla klas tworzymy z kropką.

h1, h2 {  text-align:center;  color:#f00;}a {  color:#0f0;}#o-mnie {  font-size:200%;}.nawigacja {  color:#00f;  font-weight:bold;}

Mamy już trzy różne reguły dla naszych linków, brawo!

Zagnieżdżone selektory

Wymienione wyżej rodzaje selektory moża w dowolny sposób zagnieżdżać, najlepiej wyjaśni to kilka przykładów:

/* 
  obramowanie  grube na dwa piksele 
  dla wszystkich obrazków umieszczonych w elementach div 
*/
div img {
  border-width:2px;
}

/* 
  kolor czerwony dla wszystkich linków 
  znajdujących się wewnątrz elementu o id="galeria"  
*/
#galeria a {
  color:#f00;
}