2010-04-12 00:15:01

Jak wykorzystać selektory cz. 1.

W poprzednim artykule przedstawiłem selektory w stylach CSS. Tym razem pokażę jak ich używać i jakie to może przynieść efekty. Za pomocą selektorów wybieramy element na stronie, który chcemy sformatować. Następnie określamy jakie ich właściwości chcemy zdefiniować i podajemy ich wartość. Załóżmy, że chcemy sformatować akapit na stronie zmienimy kolor czcionki i dodamy obramowanie. Selektorem w tym przypadku będzie „p” – akapit. Jest to selektor typu, gdyż wskazuje jedynie typ elementu strony – w tym przypadku selektor wybierze wszystkie akapity na stronie. Właściwościami będą: „color” – kolor znaków i „border” – obramowanie, a wartościami tych właściwości będą w pierwszym przypadku „#00ff00;” – kolor zielony, a w drugim „4px double #ff0000;” – obramowanie grubości 4 pikseli, linią podwójną w kolorze czerwonym.

Cały zapis można zapisać w pliku „style.css” w taki sposób:

p{color: #00ff00; border: 4px double #ff0000;}

lub taki:

p
{
    color: #00ff00;
    border: 4px double #ff0000;
}

Możemy sprawdzić to w kodzie strony „index.html”

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Lorem ipsum</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
	<p>
	Lorem ipsum dolor sit amet enim. <strong>Etiam ullamcorper. <a href="#">test 1</a></strong> Suspendisse a pellentesque dui, <span>non felis. <a href="#">test 2</a></span> <a href="#">test 3</a> Maecenas malesuada elit lectus felis, <a href="#">test 4</a> malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p>
</div>
	<p>Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.
	</p>
</body>
</html>

Efekt powinien prezentować się następująco:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Kolejnym selektorem jest „*” czyli selektor uniwersalny, wskazujący wszystkie elementy na stronie. Najczęściej używa się go do wyzerowania marginesów i dopełnień elementów domyślnie ustawianych przez przeglądarki. Każda może ustawiać nieco inne wartości tych właściwości.

* {margin: 0; padding: 0;}

Jest to przydatny zapis w przypadku witryn, gdzie różnica 1 piksela mogła by popsuć wygląd całej strony. Przykładowa strona po zastosowaniu tego selektora wyglądała by tak:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Następny rodzaj selektora to selektor potomka. Oto jego przykład:

p a {font-size: large;}

a to wygląd strony:

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Selektor wskazał wszystkie odnośniki (elementy „a”) leżące wewnątrz akapitu (elementu „p”)

Podobny do poprzedniego jest selektor dziecka. Może on przybrać postać taką:

p>a {color: #ffcc33;}

Strona będzie wyglądała tak jako poniżej.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Tym razem wybrane zostały tylko te odnośniki które leżały bezpośrednio wewnątrz akapitu. Pierwsze dwa odnośniki znajdują się dodatkowo w znacznikach „strong” i „span”, więc selektor p>a nie wskazuje ich.

Selektor braci:

span+a {text-decoration: none;}

Do usunięcia podkreślenia wybrane zostaną tylko te odnośniki, które stoją bezpośrednio za znacznikiem „span”.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. test 1 Suspendisse a pellentesque dui, non felis. test 2 test 3 Maecenas malesuada elit lectus felis, test 4 malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.

Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.

Uwaga, selektory braci i selektory dziecka nie są interpretowane przez przeglądarkę IE 6.

Ciąg dalszy niebawem. A w zasadzie zależy to od ilości komentarzy pod spodem.

Tagi:

3 odpowiedzi do “Jak wykorzystać selektory cz. 1.”

  1. Maciek pisze:

    Bardzo prosto i przejrzyście. Rozumiem, że następny tekst będzie o selektorach specjalnych np. :hover? ;)
    Pozdrawiam.

  2. dzioner pisze:

    Fajnie na tacy podane szczegóły :)

  3. Leszek Sewastianowicz pisze:

    Nie wiem czy w selektory specjalne będą już w następnym tekście, ale będą na pewno.

Dodaj odpowiedź