Professional Documents
Culture Documents
pl
Bartomiej Dymecki
Tajniki CSS
Tajniki CSS
Bartomiej Dymecki
ISBN: 978-83-60320-97-6
darmowy fragment
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
Wstp
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.
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.
Co powiniene wiedzie?
Przykady
Rozdzia 1
Wprowadzenie do CSS
Kod CSS moemy doczy do dokumentu HTML na trzy sposoby. Pierwszy z nich,
to umieszczenie kodu bezporednio przy znaczniku:
<p style="..."></p>
<head>
<style type="text/css">
...
</style>
</head>
<head>
</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.
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
selektor {
waciwo1: warto1;
waciwo2: warto2;
waciwo3: warto3
p {
color: black;
font-size: 1.2em
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.
Definiujc reguy w CSS nie trzeba robi adnych odstpw, czy wci, lecz jest to
wskazane, poniewa pozwala zachowa przejrzysto kodu.
Komentarze
/* 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.
...
<form id="zamowienie">
#zamowienie {
...
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>
<span class="niebieski">
</span>
</p>
h1, p, a {
color: red
#pierwszy, .niebieski, p {
...
* {
...
Wiedza na temat kaskady jest niezwykle istotna dla penego zrozumienia dziaania
arkuszy stylw, ktre nie bez powodu nosz miano kaskadowych.
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:
#lista {
color: red
ul {
selektor gwiazdki - *
Rozdzia 6
Zaawansowane selektory
Selektor potomka
p a {
color: red
<p>
<a href="">link1</a>
<a href="">link2</a>
</p>
<a href="">link3</a>
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.
#tresc p {
...
<div id="#tresc">
<p>...</p>
</div>
<div id="tresc">
<div class="jakas_klasa">
<p>...</p>
</div>
</div>
#tresc > p {
...
<div id="tresc">
<p>...</p>
</div>
<div id="tresc">
<blockquote>
<p>...</p>
</blockquote>
</div>
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 {
...
<h2>Nagwek</h2>
<p>...</p>
<h2>Nagwek</h2>
<h3>...</h3>
<p>...</p>
Selektory pseudoklas
selektor:pseudoklasa {
...
:lang - pozwala nada styl elementom, ktre maj nadany atrybut lang. Niestety
rwnie nie dziaa w przegldarce IE 6,
Najbardziej typowy przykad, to style dla odnonikw, nad ktrymi znajduje sie
kursor myszy:
a {
color: darkred;
text-decoration: none
a:hover {
color: red;
text-decoration: none
blockquote:lang(en) {
...
<blockquote lang=en>
...
</blockquote>
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
font-size: 2em
p:first-letter {
color: red
Efekt:
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.
a[title] {
color: red
a[title~="nowy"] {
...
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^="Mj"] {
...
Powyszy selektor zadziaa tylko dla znacznika A ktrego atrybut TITLE rozpoczyna
si sowem Mj. Zadziaa w takich sytuacjach:
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 :-)
a[title*="nowy"] {
...
Dla tej reguy liczy si tylko to, e zbir czterech liter tworzcy sowo nowy w ogle
wystpuje w atrybucie TITLE.
Tajniki CSS
http://www.escapemagazine.pl/297324-tajniki-css