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ź

Musisz się zalogować aby dodać komentarz.