You are on page 1of 34

Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.

pl

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 1 z 32


Niniejsza darmowa publikacja zawiera jedynie fragment
penej wersji caej publikacji.

Aby przeczyta ten tytu w penej wersji kliknij tutaj.


Niniejsza publikacja moe by kopiowana, oraz dowolnie
rozprowadzana tylko i wycznie w formie dostarczonej przez
NetPress Digital Sp. z o.o., operatora sklepu na ktrym mona
naby niniejszy tytu w penej wersji. Zabronione s
jakiekolwiek zmiany w zawartoci publikacji bez pisemnej zgody
NetPress oraz wydawcy niniejszej publikacji. Zabrania si jej
od-sprzeday, zgodnie z regulaminem serwisu.
Pena wersja niniejszej publikacji jest do nabycia w sklepie
internetowym Salon Cyfrowych Publikacji ePartnerzy.com.
Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Bartomiej Dymecki

Tajniki CSS

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 2 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Tajniki CSS

Bartomiej Dymecki

Skad i amanie: Patrycja Kierzkowska

Korekta: Anna Matusewicz

Wydanie pierwsze, Jdrzejw 2007

ISBN: 978-83-60320-97-6

Wszelkie prawa zastrzeone!

Autor oraz Wydawnictwo dooyli wszelkich stara, by informacje zawarte w tej


publikacjach byy kompletne, rzetelne i prawdziwe. Autor oraz Wydawnictwo Escape
Magazine nie ponosz adnej odpowiedzialnoci za ewentualne szkody wynikajce
z wykorzystania informacji zawartych w publikacji lub uytkowania tej publikacji.

Wszystkie znaki wystpujce w publikacji s zastrzeonymi znakami firmowymi bd


towarowymi ich wacicieli.

Wszelkie prawa zastrzeone. Rozpowszechnianie caoci lub fragmentu w jakiejkolwiek


postaci jest zabronione. Kopiowanie, kserowanie, fotografowanie, nagrywanie,
wypoyczanie, powielanie w jakiekolwiek formie powoduje naruszenie praw autorskich.

Wydawnictwo Escape Magazine


ul. Spokojna 14
28-300 Jdrzejw
http://www.EscapeMagazine.pl

darmowy fragment

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 3 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Spis treci
Wstp................................................................................................................................... 6
Co powiniene wiedzie?................................................................................................7
Wybierz dobr przegldark........................................................................................... 7
Przykady........................................................................................................................ 8
Rozdzia 1
Wprowadzenie do CSS ....................................................................................................... 9
Jak poczy HTML i CSS?..........................................................................................10
Tworzenie regu............................................................................................................ 12
Komentarze................................................................................................................... 13
Wkraczamy w wiat selektorw................................................................................... 14
Czym jest kaskada?.......................................................................................................16
Czym jest dziedziczenie?.............................................................................................. 18
Style dla rnych urzdze........................................................................................... 20
@media i @import........................................................................................................21
Rozdzia 2 ......................................................................................................................... 23
Podstawowe waciwoci ................................................................................................. 23
i wartoci............................................................................................................................23
wiat wartoci...............................................................................................................24
Kilka sposobw zapisu wartoci................................................................................... 25
Podzia waciwoci...................................................................................................... 27
Inne podstawowe waciwoci...................................................................................... 30
Podsumowanie i przykad............................................................................................. 32
Rozdzia 3.......................................................................................................................... 33
Style dla tekstu...................................................................................................................33
Rne sposoby definiowania rozmiaru czcionki.......................................................... 36
Rozdzia 4.......................................................................................................................... 41
Style dla grafiki................................................................................................................. 41
Rozdzia 5.......................................................................................................................... 47
Style dla list....................................................................................................................... 47
Rozdzia 6.......................................................................................................................... 52
Zaawansowane selektory................................................................................................... 52
Selektor potomka.......................................................................................................... 53
Selektory dziecka.......................................................................................................... 54
Selektor ssiada.............................................................................................................56
Selektory pseudoklas.................................................................................................... 56
Selektory pseudoelementw......................................................................................... 59
Selektory atrybutw...................................................................................................... 61
Rozdzia 7.......................................................................................................................... 65
Box model..........................................................................................................................65
Jak sobie z tym poradzi?............................................................................................. 67
Metoda 1: sprytne uycie waciwoci......................................................................... 68
Metoda 2: hackujemy CSS............................................................................................70

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 4 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Metoda 3: komentarze warunkowe............................................................................... 71


Metoda 4: przejcie w tryb zgodnoci ze standardami................................................. 73
Rozdzia 8.......................................................................................................................... 75
Elementy blokowe i liniowe.............................................................................................. 75
Rozdzia 9.......................................................................................................................... 78
Przepyw i elementy pywajce......................................................................................... 78
Waciwo clear.......................................................................................................... 81
Rozdzia 10........................................................................................................................ 85
Rne pozycje blokw.......................................................................................................85
Position: absolute.......................................................................................................... 86
Position: relative........................................................................................................... 88
Rozdzia 11........................................................................................................................ 90
Generowanie treci ........................................................................................................... 90
przy uyciu CSS................................................................................................................ 90
Rozdzia 12........................................................................................................................ 93
CSS w praktyce................................................................................................................. 93
Jak stworzy dobre menu?............................................................................................ 94
Zmiana koloru po najechaniu na pozycj menu.......................................................98
Centrowanie strony..................................................................................................... 100
Skiplink....................................................................................................................... 101
Style dla tabel..............................................................................................................102
Style dla formularzy....................................................................................................109
Kolorowy przycisk......................................................................................................115
Kolumnowy ukad strony............................................................................................118
Dwie kolumny........................................................................................................ 118
Dwie kolumny wycentrowane................................................................................119
Trzykolumnowy ukad strony................................................................................ 124
Boczne kolumny o staej szerokoci...................................................................... 124
Kolumna wewntrz kolumny................................................................................ 131
Rozdzia 13...................................................................................................................... 138
Optymalizacja stylw...................................................................................................... 138
Podzia arkusza na czci............................................................................................139
Podzia stylw na kilka arkuszy..................................................................................140
Cztery boki w jednym................................................................................................140
Pocz kilka waciwoci............................................................................................ 142
Ta sama warto dla kilku selektorw........................................................................ 143
Sposb zapisu..............................................................................................................143
Rozdzia 14...................................................................................................................... 145
Co dalej?
CSS3 nadchodzi...............................................................................................................145
DODATEK A.................................................................................................................. 147
rda inspiracji...............................................................................................................147
DODATEK B
Polecana literatura........................................................................................................... 149

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 5 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Wstp

Rosnca popularno internetu sprawia, e coraz wicej osb myli o stworzeniu


wasnej strony internetowej. Entuzjaci Sieci marz o posiadaniu strony domowej, bloga
albo nawet wikszej witryny tematycznej. Mnstwo internautw w rnym wieku
zabiera si do nauki, przede wszystkim jzykw HTML i CSS.

Niestety, wiele rde dostpnych w internecie nie uczy poprawnego uywania tych
jzykw. Do niedawna take wikszo ksiek karmia czytelnikw bajkami
o budowaniu stron przy uyciu tabel, zaletach uywania ramek i absolutnie nie
wspominaa o koniecznoci rozdzielenia struktury od elementw definiujcych wygld
witryny. W cigu kilku ostatnich lat sytuacja pod tym wzgldem nieco poprawia si, ale
dua cz internetowych kursw, artykuw i poradnikw nadal mija si z prawd.

Najwicej nieporozumie uroso wok technologii CSS. Dlatego ksika ta nosi tytu
Tajniki CSS. To, o czym bd pisa, nie jest adn tajemnic, ale raczej wiedz, ktra
nie jest powszechnie znana. Z e-booka skorzystaj zarwno osoby pocztkujce, bo ju
na starcie naucz si poprawnego budowania stron, jak i osoby bardziej zaawansowane,
ktre maj okazj zapozna si z wiedz trudn do zdobycia jeszcze kilka lat temu
i zmieni swoje nawyki.

Wybraem tak form publikacji z kilku powodw. Po pierwsze, chciaem stworzy


co w rodzaju prawdziwego przewodnika po jzyku - od kwestii podstawowych do
bardziej zaawansowanych. Po drugie, ebook jest, przynajmniej dla mnie, o wiele
przystpniejszy, ni np. zbir artykuw na stronie www.

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 6 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Zajmuj si tworzeniem stron w jzyku CSS od kilku lat i sporo si przez ten czas
nauczyem. Prowadz midzy innymi blog http://www.BelloisNadaje.pl W tej ksice
bdziemy m.in. mwi zarwno o podstawach jzyka, jak i zaawansowanych selektorach
i pseudoklasach. Wyjanimy sobie, czym jest kaskada, box model oraz, w jaki sposb
mona generowa tre strony przy pomocy arkuszy stylw. Opiszemy rwnie bdy
w obsudze CSS w najpopularniejszej przegldarce internetowej, czyli Internet
Explorerze. Nie zabraknie oczywicie przykadw praktycznych i interesujcych
ciekawostek.

Tworzc t ksik staraem si unika zbdnego wodolejstwa, pisa o konkretach,


a zarazem uywa prostego jzyka. Jeli uwaasz, e co mona w niej ulepszy albo co
jest dla Ciebie niejasne, to zapraszam do kontaktu ze mn.

Co powiniene wiedzie?

Do zrozumienia treci zawartych w tym dziele, niezbdna jest wiedza na temat


jzyka HTML. Jest on na szczcie duo prostszy, ni sam CSS. Kursy HTML mona
znale na wielu stronach internetowych, czy w rnych ksikach dostpnych
w ksigarniach.

Wybierz dobr przegldark

CSS jest jzykiem dosy rozbudowanym. Nie kada przegldarka internetowa


rozumie wszystkie jego elementy. Najbardziej blado wypada tutaj popularny (niestety)
Internet Explorer. Nie rozumie wielu konstrukcji, a cz interpretuje w niepoprawny
sposb. Warto uywa nowoczesnych przegldarek - np. Opery (http://www.operapl.net)
lub Firefoksa (http://www.firefox.pl). Obie komunikuj si z uytkownikiem w jzyku
polskim.

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 7 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Przykady

Na potrzeby ksiki stworzyem szereg przykadw obrazujcych opisywane


techniki. S one umieszczone na stronie wydawnictwa Escape Magazine. W rnych
rozdziaach podaj odnoniki kierujce bezporednio do przykadw.

Moesz take przejrze ich spis: (link w penym wydaniu)

Jeeli chcesz pobra wszystkie przykady, to s one spakowane:

(link w penym wydaniu)

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 8 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Rozdzia 1
Wprowadzenie do CSS

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 9 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Skrt CSS pochodzi od angielskiej nazwy Cascading Style Sheets, co tumaczy si


jako kaskadowe arkusze stylw. Jzyk CSS czy si z jzykiem HTML i suy do
okrelania wygldu stron internetowych.

Podstawowym i najwaniejszym powodem uywania arkuszy stylw jest


moliwo oddzielenia elementw odpowiedzialnych za wygld strony od jej struktury.
Inaczej - warstwy prezentacji od warstwy informacji. Jednym z celw przy pisaniu kodu
CSS jest umieszczenie w nim wszelkich informacji o wygldzie witryny. Mwic
prociej: na stronie w jzyku HTML zapisujesz jaki tekst,za pomoc jzyka CSS
opisujesz wygld npkolor tekstu, krj czcionek, itd.

Ogromnie uatwia to pniejsz edycj strony. Jeli chc zmodyfikowa jakie


szczegy wygldu, to najczciej wystarczy, e zmodyfikuj kilka regu CSS.
W pewnych przypadkach ingerencja w kod HTML take jest konieczna, ale ma ona
wwczas bardziej ograniczony charakter i jest o wiele prostsza do przeprowadzenia.

W tym rozdziale omwimy sobie dokadnie zasady dziaania CSS. Zaczniemy od


metod doczania stylw do kodu HTML.

Jak poczy HTML i CSS?

Kod CSS moemy doczy do dokumentu HTML na trzy sposoby. Pierwszy z nich,
to umieszczenie kodu bezporednio przy znaczniku:

<p style="..."></p>

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 10 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Jest to oczywicie sposb zy, poniewa nie oddzielimy wygldu od struktury, co


poskutkuje niezwykle zagmatwanym i trudnym do odczytania kodem.

Drugi sposb, to umieszczenie kodu w sekcji HEAD dokumentu:

<head>

<style type="text/css">

...

</style>

</head>

Jest to metoda dobrze sprawdzajca si w przypadku nieduych i mao


skomplikowanych stron.

Trzecia metoda, idealna w wikszoci przypadkw, polega na umieszczeniu kodu


CSS w osobnym pliku i doczeniu go do dokumentu przy pomocy znacznika LINK:

<head>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

Omawianie szczegw dotyczcych tego znacznika nie wchodzi w zakres


tematyczny tej ksiki. Informacje na ten temat mona znale w Sieci, na przykad na
tej stronie: http://grabun.com/teksty/odnosniki-w-sekcji-head

Aby ostatnia metoda zadziaa, musisz oczywicie utworzy plik o nazwie: style.css.
(style, to najczciej nadawana nazwa i takiej te uyem w przykadzie; oczywicie
mona zastosowa inn). Arkusz stylw zawsze powinien posiada rozszerzenie *.css.

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 11 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Nic nie stoi take na przeszkodzie, aby do jednej strony doczy nawet kilka
osobnych plikw ze stylami. W niektrych przypadkach byoby to nawet wskazane.
Podam prosty przykad z wasnego dowiadczenia. Prowadz blog powicony Sieci
i webmasteringowi. Dla jego poprzedniej wersji stworzyem dwa osobne pliki ze stylami.

Pierwszy jest oglny - dotyczy zarwno strony gwnej, jak i wszystkich podstron.
Drugi wczytywany jest tylko na podstronach z konkretnym wpisem, poniewa zawiera
m.in. style odnoszce si do komentarzy i formularza komentowania, ktre nie s
potrzebne na stronie gwnej. Dziki takiemu rozwizaniu strona gwna dziaa szybciej.
Rnica nie jest by moe kolosalna, ale kilka drobnych zmian zsumowanych ze sob
moe mie ju wiksze znaczenie. Dlatego wszdzie gdzie si tylko da, naley szuka
metod optymalizacji strony - grosik do grosika.

Tworzenie regu

Najwaniejszym elementem stylw CSS jest regua. Skada si z selektora oraz


zestaww waciwoci i wartoci. Obrazuje to prosty schemat:

selektor {

waciwo1: warto1;

waciwo2: warto2;

waciwo3: warto3

Selektor okrela, do jakich elementw odnosi si dana regua. Pary waciwoci


i wartoci zamknite s parze nawiasw klamrowych. Po kadej wartoci, wystpuje
rednik. W przypadku ostatniej nie jest on konieczny. Oto przykad:

p {

color: black;

font-size: 1.2em

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 12 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

W tym przypadku selektorem jest znacznik (inaczej tag) P, wic regua definiuje
wygld akapitu oznaczanego w jzyku HTML znacznikiem P. Pierwsza para waciwoci
i wartoci ustala czarny kolor tekstu, a druga wielko liter. W tej chwili szczegy nie s
dla nas wane, chodzi o zrozumienie zasady.

Posikujc si tym schematem:


waciwo: warto;

moemy powiedzie, e waciwoci jest sowo color definiujce kolor tekstu.


Waciwo ta przyjmuje warto black, czyli czarny. Tak wic kolor tekstu w akapicie
bdzie czarny.

Definiujc reguy w CSS nie trzeba robi adnych odstpw, czy wci, lecz jest to
wskazane, poniewa pozwala zachowa przejrzysto kodu.

Mam nadziej, e to wszystko jest dla Ciebie proste i klarowne. Dokadniej


o dostpnych waciwociach i wartociach powiemy sobie w jednym z rozdziaw. Jeli
masz jakie wtpliwoci, to wr do pocztku tego rozdziau lub czytaj dalej,
a niebawem zostan one rozwiane.

Komentarze

Obok regu mona umieci wasne komentarze. Jest to szczeglnie przydatne


w przypadku bardziej rozbudowanych arkuszy. Komentarze wstawiamy w niezwykle
prosty sposb:

/* tre komentarza */

Tutaj chyba nie potrzeby duszego tumaczenia tego zagadnienia. Stosuj komentarze
tam, gdzie po pewnym czasie moesz mie problemy ze zrozumieniem znaczenia kodu.
Komentarze s rwnie dobre do dzielenia arkuszy stylw na kilka sekcji, o czym
dokadniej opowiem pod sam koniec ksiki.

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 13 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Wkraczamy w wiat selektorw

Dobrze. Wiesz ju, czym s selektory. Teraz porozmawiamy o rnych typach


selektorw. W tym rozdziale omwimy tylko najprostsze z nich. Aby pozna te bardziej
zaawansowane, moesz sign do rozdziau 8.

Selektor elementu. Ten rodzaj wystpi w naszym wczeniejszym przykadzie.


Odnosi si on po prostu do danego znacznika HTML, jak P, H1, czy BLOCKQUOTE.
Spjrzmy na to jeszcze raz:
blockquote {

...

Selektor identyfikatora. Jak zapewne wiesz, elementom HTML mona nadawa


unikalne identyfikatory, np.:

<form id="zamowienie">

Dany identyfikator moe by przypisany tylko i wyczanie do jednego znacznika,


czyli moe wystapi tylko raz w dokumencie HTML. Jeli mamy w kodzie formularz
z identyfikatorem zamowienie, to moemy si do niego odwoa w regule CSS:

#zamowienie {

...

Tak wic, aby regua odnosia si tylko i wycznie do konkretnego elementu,


musimy stworzy selektor skadajcy si z dowolnej nazwy poprzedzonej znakiem #.
Nastpnie przy pomocy atrybut id podpinamy j do dowolnego znacznika.

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 14 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Selektor klasy. Selektora klasy moemy uy wtedy, gdy chcemy stworzy regu
odnoszc si do kilku wybranych elementw. Podam gotowy przykad. Zamy, e na
Twojej stronie jest kilka ciekawych tekstw i chciaby od czasu do czasu wyrni
w nich jakie zdanie przez zmian jego koloru.

Dawniej sdzono, e efekt taki mona osign przez uycie znacznika FONT. My
jednak wiemy, e naley oddziela struktur od wygldu, wic zrobimy to w CSS:

.niebieski {

color: blue

Jak widzisz, nazwy klas s zawsze poprzedzone kropk. Dziki znacznikowi SPAN
moemy atwo uy naszej klasy w kodzie HTML, posugujc si waciwoci class:
<p>

Normalny tekst w akapicie.

<span class="niebieski">

A tu tekst wyrniony na niebiesko.

</span>

I znw tekst normalny.

</p>

czenie selektorw. Selektory moemy rwnie czy ze sob. Zamy, e


chcemy, aby tekst umieszczony w kilku znacznikach mia zawsze czerwony kolor:

h1, p, a {

color: red

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 15 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Jeeli wic chcesz przypisa dan waciwo do kilku elementw, to moesz uy


kilku selektorw i oddzieli je przecinkami. Bardziej zaawansowany przykad:

#pierwszy, .niebieski, p {

...

Nie ma znaczenia, czy s to selektory identyfikatorw, klas czy te selektory


elementw.

Selektor gwiazdki. Odnosi si on do absolutnie wszystkich znacznikw:

* {

...

Selektor gwiazdki wpywa zarwno na akapity, jak i nagwki. Na wszystkie


elementy strony.

Czym jest kaskada?

Wiedza na temat kaskady jest niezwykle istotna dla penego zrozumienia dziaania
arkuszy stylw, ktre nie bez powodu nosz miano kaskadowych.

Generalnie chodzi o to, e rne reguy CSS maj rn wano - niektre s


waniejsze i mog nadpisywa inne, a niektre s mniej wane. Style, jak ju przecie
mwilimy, moemy docza do strony na kilka rnych sposobw. Stopie ich
wanoci przedstawia si nastpujco:

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 16 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

1. Style bezporednio przy znaczniku.

2. Style w sekcji HEAD dokumentu.

3. Style w zewntrznym pliku.

Oznacza to, e reguy CSS znajdujce si w zewntrznym pliku mog by nadpisane


przez reguy znajdujce si wewntrz pliku HTML, ale nie odwrotnie.

Drugim elementem wpywajcym na wano regu jest rodzaj selektora. Zasada jest
prosta - im dokadniejszy selektor, tym waniejsz tworzy regu. Najmniej precyzyjny,
a przy tym najmniej istotny jest selektor * - odnoszcy si do wszystkich tagw.
Nastpne w kolejnoci s selektory elementu, jak div, czy ul. Po nich wystpuj selektory
atrybutw, czy pseudoklas, o ktrych bdziemy mwi w dalszej czci ksiki.
Najwaniejszym selektorem jest selektor identyfikatora.

Moe jednak zaistnie sytuacja w ktrej chcielibymy, aby jedna regua bya
waniejsza, ni wynikaoby to z zasad kaskady. Moemy sprawi, e dana regua bdzie
najwaniejsza przez wykorzystanie specjalnego atrybutu !important. Spjrzmy na pewien
przykad kodu HTML:

<ul id="lista">

<li>jeden</li>

<li>dwa</li>

<li>trzy</li>

</ul>

Mamy tu prost list z nadanym identyfikatorem #lista. Dodajmy do tego kod CSS:

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 17 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

#lista {

color: red

ul {

color: blue !important

Selektor identyfikatora jest waniejszy, ni selektor elementu, wic tekst


w przykadowej licie powinien teoretycznie posiada czerwony kolor. Jednak atrybut
!important nada drugiej regule wiksz wano, wic bdzie on mia kolor niebieski.

Podsumujmy wano poznanych dotd selektorw. Przedstawmy je w kolejnoci od


najmniej znaczcego:

selektor gwiazdki - *

selektor elementu - p, div, h1, form

selektor klasy - .niebieski, .trzeci, .nowy

selektor identyfikatora - #naglowek, #menu, #wstep

zwikszanie wanoci - !important

Dalsza cze tego rozdziau w penej wersj ebooka.


Sprawd:
http://www.escapemagazine.pl/297324-tajniki-css

Ale to jeszcze nie koniec!


Dalej jest cay rozdzia o selektorach!

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 18 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Rozdzia 6
Zaawansowane selektory

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 19 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Jeli dotrwae do tego momentu, to znaczy, e ju cakiem sporo wiesz na temat


CSS. Pora wic przej na wyszy poziom. W tym rozdziale zajmiemy si rnymi
zaawansowanymi selektorami. Przed rozpoczciem lektury warto naprawd dobrze
przyswoi sobie cz rozdziau trzeciego mwic o podstawowych selektorach.
Wierz, e ju to zrobie, ale jeli nie, to warto zrobi sobie ma powtrk.

Selektory to potne narzdzie. Jeeli nauczysz si dobrze nimi posugiwa, to


naprawd sporo osigniesz. Jednak rwnie dobrze mog by one przyczyn Twoich
frustracji, gdy bdziesz niedokadny, albo nie do koca zrozumiesz ich dziaanie.
Dlatego skup si mocno i postaraj przyswoi t wiedz.

Selektor potomka

Uywajc tego selektora moemy nada styl tylko elementom znajdujcym si


wewntrz innego elementu. Uycie jest bardzo proste:

p a {

color: red

Powysza regua pozwala nada inny styl wszystkim odnonikom znajdujcym si


wewntrz akapitw. Popatrzmy na taki kod HTML:

<p>

<a href="">link1</a>

<a href="">link2</a>

</p>

<a href="">link3</a>

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 20 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Zastosowany przez nas styl zmieni kolor tekstu dla link1 i link2, ale nie dla link3,
poniewa znajduje si on poza akapitem.

Selektory dziecka

Tego selektora Internet Explorer 6 niestety nie rozpoznaje, ale na szczcie zmienio
si to w jego nowej, sidmej wersji, ktra ukazaa si pod koniec 2006 roku.

Selektor dziecka jest podobny do selektora potomka. Jednak w odrnieniu od niego


zadziaa tylko wtedy, gdy element zawarty jest bezporednio w elemencie nadrzdnym.
Wemy taki kod CSS z selektorem potomka:

#tresc p {

...

Zadziaa on w kodzie HTML:

<div id="#tresc">

<p>...</p>

</div>

Zadziaa rwnie w takim kodzie:

<div id="tresc">

<div class="jakas_klasa">

<p>...</p>

</div>

</div>

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 21 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Dla selektora potomka nie ma znaczenia, czy element znajduje si w nim


bezporednio, czy poprzedzaj go inne elementy.

Zamiemy teraz selektor ssiada na selektor dziecka:

#tresc > p {

...

W przypadku takiego selektora styl zadziaa tylko dla znacznika P znajdujcego si


bezporednio w DIV-ie #tresc. Zadziaa dobrze dla takiego kodu HTML:

<div id="tresc">

<p>...</p>

</div>

Ale nie dla takiego:

<div id="tresc">

<blockquote>

<p>...</p>

</blockquote>

</div>

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 22 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Selektor ssiada

Selektor ssiada rwnie nie jest obsugiwany przez IE6, a tylko IE7. Skada si on
tak naprawd z dwch selektorw. Odnosi si do sytuacji, gdy w kodzie HTML drugi
selektor wystpuje bezporednio za tym pierwszym. Tak si go konstruuje:

h2 + p {

...

W tym przypadku akapit wystpujcy bezporednio po nagwku drugiego poziomu


otrzymaby specjalny styl:

<h2>Nagwek</h2>

<p>...</p>

Ale jeli poprzedzaby go inny znacznik, to selektor nie mgby zadziaa:

<h2>Nagwek</h2>

<h3>...</h3>

<p>...</p>

Selektor ssiada mona wykorzysta np. do wyrnienia pierwszego akapitu


wewntrz artykuu.

Selektory pseudoklas

Na pocztku przyjrzymy si konstrukcji pseudoklasy:

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 23 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

selektor:pseudoklasa {

...

Widzisz ju t zasad? Najpierw wystpuje normalny selektor, potem dwukropek,


a nastpnie nazwa pseudoklasy. Czym s pseudoklasy? Najatwiej jest to wyjani
omawiajc wszystkie dostpne pseudoklasy:

:link - odnosi si do nieodwiedzonych odnonikw,

:visited - odnosi si do odwiedzonych odnonikw,

:hover - dziaa wtedy, gdy nad elementem znajduje si wskanik myszy,

:focus - definiuje waciwoci elementu aktualnie uywanego np. pole formularza


podczas wpisywania danych. Nie dziaa w IE 6,

:active - element jest aktywny, np. zosta kliknity,

:first-child - odnosi si tylko do pierwszego elementu znajdujcego si wewntrz


selektora, np. pierwszego akapitu. Nie dziaa w IE 6,

:lang - pozwala nada styl elementom, ktre maj nadany atrybut lang. Niestety
rwnie nie dziaa w przegldarce IE 6,

atwe? No to zajmijmy si przykadami praktycznego zastosowania


pseudoselektorw.

Najbardziej typowy przykad, to style dla odnonikw, nad ktrymi znajduje sie
kursor myszy:

a {

color: darkred;

text-decoration: none

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 24 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

a:hover {

color: red;

text-decoration: none

W wyniku zastosowania tego stylu, hipercze bdzie miao kolor


ciemnoczerwony bez adnych zdobie. Gdy znajdzie si nad nim kursor myszy,
przybierze kolor czerwony.

Waciwo text-decoration dwukrotnie ustawiam na none, poniewa nie chc


adnych podkrele. Rne przegldarki maj skonnoci do ustawiania wartoci tej
waciwoci wedug wasnego widzi-mi-si, wic dobrze jest zrobi to samodzielnie
zarwno dla normalnego i hipercza, jak i dla :hover.

Sprbujmy teraz zrobi co z pseudoklas :lang. Jak zapewne wiesz, znacznik


BLOCKQUOTE oznacza duszy cytat. Nadajmy inny styl cytatom w jzyku angielskim.

blockquote:lang(en) {

...

Styl ten bdzie mie zastosowanie dla kodu HTML:

<blockquote lang=en>

...

</blockquote>

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 25 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Zastanwmy si jeszcze nad wykorzystaniem :first-child. Moemy na przykad


nada styl pierwszemu elementowi listy UL:

ul: first-child {

...

Oprcz wyej wspomnianych, istnieje sporo innych pseudoklas, ktrych jednak w tym
momencie raczej si nie stosuje z powodu braku ich obsugi w rnych przegldarkach.
Mam tu na myli na przykad: :last-child. :root, :first-of-type, :empty, :only-child i wiele
innych. Jeeli bd one obsugiwane chociaby przez Firefox i Oper, to ich szczegowy
opis z ca pewnoci zostanie tutaj dodany.

Selektory pseudoelementw

Bardzo podobne do selektorw pseudoklas s selektory pseudoelementw. Maj one


identyczn skadnie. Dostpne s dwa tego rodzaju selektory:

:first-line - pozwala zmodyfikowa pierwsz lini tekstu znajdujc si w danym


elemencie, np. akapicie.

:firts-letter - ten selektor pozwala z kolei zmodyfikowa pierwsz liter danego


tekstu.

Zobaczmy, jak to wyglda w praktyce. Mamy prosty kod HTML:

<p>Lorem Ipsum is simply dummy text of the printing and typesetting


industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. </p>

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 26 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Przykadowy tekst zosta pobrany ze strony http://www.lipsum.com. Teraz spjrz na


CSS:
p:first-line {

font-size: 2em

p:first-letter {

color: red

Efekt:

Poniewa selektor dotyczy pierwszej linii, to gdy zwikszymy rozmiar okna


przegldarki...

...zwikszy si rwnie ilo tekstu objtego stylem.

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 27 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Selektory atrybutw

Na pewno wiesz, e znacznikom jzyka HTML mona nadawa rne atrybuty (jak
TITLE, ALT, HREF, NAME i wiele innych). Do atrybutw tych moemy si odwoywa
rwnie przy pomocy regu jzyka CSS. Dziki temu moemy nada styl tylko tym
elementom, ktrym nadano okrelone atrybuty. Daje to nam, jako webmasterom,
ogromne moliwoci. W ogle nie rozumie ich Internet Explorer 6, ale do wersji 7
zostaa dodana ich obsuga.

Najpierw przeanalizujmy wszystkie dostpne selektory atrybutw:

selektor[atrybut] - aby selektor zadziaa, wystarczy sama obecno atrybutu.


Przykad:

a[title] {

color: red

Znacznik A ma nadany atrybut TITLE, wic zostanie mu zaaplikowany styl


zmieniajcy jego kolor na czerwony.

selektor[atrybut~="warto"] - selektor sprawdza, czy dane sowo wystpuje


wewntrz atrybutu. Na przykad:

a[title~="nowy"] {

...

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 28 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Powyszy selektor zadziaa tylko wtedy, gdy sowo nowy wystpi w atrybucie
TITLE dla znacznika A. Wybrane sowo musi by oddzielone spacjami od innych
znakw. Zadziaa wic w takich przypadkach:

<a title="nowy" href="">...</a>

<a title=" super nowy" href="">...</a>

<a title="super nowy motor" href="">...</a>

Ale nie zadziaa w takich:

<a title="super motor href="">...</a>

<a title="supernowy href="">...</a>

selektor[atrybut="warto"] - sprawdza, czy zawarto atrybutu jest dokadnie taka


sama, jak podanej wartoci. Spjrz na przykad podobny do poprzedniego:

a[title="Mj nowy tytu"] {

...

Odnonik musi mie nadany tytu skadajcy si tylko i wycznie ze sformuowania


Mj nowy tytu, aby selektor mg zadziaa. Oto JEDYNY przypadek w ktrym
zadziaa:

<a title="Mj nowy tytu" href="">...</a>

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 29 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

selektor[atrybut^="warto"] - ten i nastpne selektory zostay zaczerpnite z jzyka


CSS w wersji 3 (nie jest on jeszcze ukoczony). Ten odnosi si do atrybutw, ktre
rozpoczynaj si okrelonym cigiem znakw. Zobaczmy, jak to dziaa:

a[title^="Mj"] {

...

Powyszy selektor zadziaa tylko dla znacznika A ktrego atrybut TITLE rozpoczyna
si sowem Mj. Zadziaa w takich sytuacjach:

<a title="Mj motor" href="">...</a>

<a title="Mj nowy motor" href="">...</a>

Ale nie w takiej:


<a title="Nowy motor" href=""></a>

selektor[atrybut$="warto"] - selektor podobny do poprzedniego, ale odnosi si do


atrybutw, ktrych warto koczy si danym cigiem znakw. Np.:

a[href$="pdf"] {

...

Powysza regua zadziaa dla odnonikw, ktrych atrybut href koczy si znakami
pdf. Dziki temu moesz nada inny styl linkom do plikw PDF! Moesz w ten sposb
nada styl linkom do dowolnego rodzaju plikw. Moesz nawet automatycznie wstawi
przy nich odpowiedni obrazek... ale o tym opowiem w rozdziale 13, mwicym
o generowaniu treci przy uyciu CSS. Jeli jeste bardzo niecierpliwy, to moesz zajrze
tam od razu :-)

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 30 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

selektor[atrybut*="warto"] - jest to selektor zbliony do selektora tworzonego


przy pomocy ~=, ale w jego przypadkw nie ma znaczenia, przy pomocy jakich znakw
dane sowo zostao oddzielone od innych. Tak wic regua podobna do jednej
z poprzednich:

a[title*="nowy"] {

...

zadziaa w takich przypadkach:

<a title=" super nowy" href="">...</a>

<a title="super nowy motor" href="">...</a>

Ale rwnie w takich:

<a title=" supernowy" href="">...</a>

<a title=" nowymotor" href="">...</a>

Dla tej reguy liczy si tylko to, e zbir czterech liter tworzcy sowo nowy w ogle
wystpuje w atrybucie TITLE.

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 31 z 32


Bartomiej Dymecki, Tajniki CSS, www.EscapeMagazine.pl

Zobacz pen wersj ebooka

Tajniki CSS

http://www.escapemagazine.pl/297324-tajniki-css

Wydawnictwo Escape Magazine, http://www.EscapeMagazine.pl 32 z 32


Niniejsza darmowa publikacja zawiera jedynie fragment
penej wersji caej publikacji.

Aby przeczyta ten tytu w penej wersji kliknij tutaj.


Niniejsza publikacja moe by kopiowana, oraz dowolnie
rozprowadzana tylko i wycznie w formie dostarczonej przez
NetPress Digital Sp. z o.o., operatora sklepu na ktrym mona
naby niniejszy tytu w penej wersji. Zabronione s
jakiekolwiek zmiany w zawartoci publikacji bez pisemnej zgody
NetPress oraz wydawcy niniejszej publikacji. Zabrania si jej
od-sprzeday, zgodnie z regulaminem serwisu.
Pena wersja niniejszej publikacji jest do nabycia w sklepie
internetowym Salon Cyfrowych Publikacji ePartnerzy.com.

You might also like