Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00372 008661 10462823 na godz. na dobę w sumie
ABC kaskadowych arkuszy stylów (CSS) - książka
ABC kaskadowych arkuszy stylów (CSS) - książka
Autor: Liczba stron: 304
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-747-6 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).
Dynamiczny rozwój technologii przesyłu danych prowadzący do zwiększenia przepustowości internetu był kołem zamachowym powstawania nowych stron WWW opartych na coraz to wymyślniejszych rozwiązaniach. Jednym z nich są kaskadowe arkusze stylów (CSS), które obecnie są doskonałą alternatywą dla żmudnego procesu przygotowania stron WWW. Pozwalają nadać wspólny wygląd dokumentom tworzącym stronę WWW bez większego wysiłku i przy ogromnej oszczędności czasu.

Autor w książce 'ABC kaskadowych arkuszy stylów (CSS)' stworzył możliwie kompletne, polskie opracowanie poświęcone roli CSS w tworzeniu stron WWW. Postawił sobie jeszcze jeden cel, zgodnie z którym książka miała być przeznaczona zarówno dla Czytelników rozpoczynających przygodę z tworzeniem stron WWW, jak i dla 'starych wyjadaczy', mających w tej dziedzinie sporo doświadczenia. Zgodnie z sugestiami czytelników, którzy zapoznali się już z poprzednimi książkami Bartosza Danowskiego (np. 'HTML. Ćwiczenia praktyczne', 'Kaskadowe arkusze stylów. Ćwiczenia praktyczne'), niniejsza publikacja zawiera jeszcze więcej praktycznych przykładów.

Ze względu na charakter tematyki założono, że Czytelnik posiada już niezbędną wiedzę do pracy z komputerem. Dokładniej mówiąc, chodzi o umiejętność pracy z dowolnym edytorem tekstowym.

Doskonały podręcznik dla początkujących twórców stron WWW!

Książka opisuje m.in.:

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl ABC kaskadowych arkuszy styl(cid:243)w (CSS) Bartosz Danowski Autor: ISBN: 83-7197-747-6 Format: B5, stron: 300 Dynamiczny rozw(cid:243)j technologii przesy‡u danych prowadz„cy do zwiŒkszenia przepustowo(cid:156)ci internetu by‡ ko‡em zamachowym powstawania nowych stron WWW opartych na coraz to wymy(cid:156)lniejszych rozwi„zaniach. Jednym z nich s„ kaskadowe arkusze styl(cid:243)w (CSS), kt(cid:243)re obecnie s„ doskona‡„ alternatyw„ dla ¿mudnego procesu przygotowania stron WWW. Pozwalaj„ nada(cid:230) wsp(cid:243)lny wygl„d dokumentom tworz„cym stronŒ WWW bez wiŒkszego wysi‡ku i przy ogromnej oszczŒdno(cid:156)ci czasu. Autor w ksi„¿ce (cid:132)ABC kaskadowych arkuszy styl(cid:243)w (CSS)(cid:148) stworzy‡ mo¿liwie kompletne, polskie opracowanie po(cid:156)wiŒcone roli CSS w tworzeniu stron WWW. Postawi‡ sobie jeszcze jeden cel, zgodnie z kt(cid:243)rym ksi„¿ka mia‡a by(cid:230) przeznaczona zar(cid:243)wno dla Czytelnik(cid:243)w rozpoczynaj„cych przygodŒ z tworzeniem stron WWW, jak i dla (cid:132)starych wyjadaczy(cid:148), maj„cych w tej dziedzinie sporo do(cid:156)wiadczenia. Zgodnie z sugestiami czytelnik(cid:243)w, kt(cid:243)rzy zapoznali siŒ ju¿ z poprzednimi ksi„¿kami Bartosza Danowskiego (np. (cid:132)HTML. ˘wiczenia praktyczne(cid:148), (cid:132)Kaskadowe arkusze styl(cid:243)w. ˘wiczenia praktyczne(cid:148)), niniejsza publikacja zawiera jeszcze wiŒcej praktycznych przyk‡ad(cid:243)w. Ze wzglŒdu na charakter tematyki za‡o¿ono, ¿e Czytelnik posiada ju¿ niezbŒdn„ wiedzŒ do pracy z komputerem. Dok‡adniej m(cid:243)wi„c, chodzi o umiejŒtno(cid:156)(cid:230) pracy z dowolnym edytorem tekstowym. Doskona‡y podrŒcznik dla pocz„tkuj„cych tw(cid:243)rc(cid:243)w stron WWW! Ksi„¿ka opisuje m.in.: formatowanie czcionek na stronie WWW; osadzanie w‡asnych czcionek; pozycjonowanie element(cid:243)w; regulowanie margines(cid:243)w; zmiana wygl„du okna przegl„darki i kursora myszki; formatowanie tabel; kontrola wygl„du blok(cid:243)w tekstu i nag‡(cid:243)wk(cid:243)w; kontrola wygl„du formularzy; tworzenie stron zgodnie z zaleceniami specyfikacji HTML 4.0.1. Wstęp ...................................................z...................................................z............7 Rozdział 1. Wprowadzenie do zagadnień języka HTML 4.01 oraz kaskadowych arkuszy stylów...................................................z..9 Krótkie wprowadzenie do języka HTML ...................................................p..................... 9 Wprowadzenie do kaskadowych arkuszy stylów — CSS ............................................... 13 Komentarze dla tworzonych arkuszy...................................................p.................... 14 Implementacja CSS w przeglądarkach ...................................................p................. 16 Metody umieszczania stylów w dokumencie ...................................................p....... 16 Problemy ze stylami w starych przeglądarkach...................................................p.... 23 Jednostki miar stosowane w CSS ...................................................p......................... 24 Nazewnictwo kolorów używane w CSS ...................................................p............... 26 Podsumowanie ...................................................p...................................................p......... 29 Rozdział 2. Budowa stylu — selektory...................................................z............31 Selektory proste...................................................p...................................................p........ 31 Selektory uniwersalne ...................................................p................................................. 32 Selektory „potomka” ...................................................p...................................................p 33 Selektory „dziecka”...................................................p...................................................p.. 34 Selektory „rodzeństwa”...................................................p............................................... 36 Identyfikatory — ID...................................................p...................................................p. 36 Klasy ...................................................p...................................................p........................ 39 Pseudoklasy...................................................p...................................................p..............41 Pseudoelementy...................................................p...................................................p........ 47 Grupowanie selektorów ...................................................p.............................................. 51 Podsumowanie ...................................................p...................................................p......... 52 Rozdział 3. Dziedziczenie i kaskadowość ...................................................z.......53 Dziedziczenie ...................................................p...................................................p........... 53 Kaskadowość...................................................p...................................................p............ 59 Podsumowanie ...................................................p...................................................p......... 61 Rozdział 4. Właściwości tekstu ...................................................z.....................63 Poziome wyrównanie ...................................................p.................................................. 63 Pionowe wyrównanie ...................................................p.................................................. 66 Wcięcie tekstu ...................................................p...................................................p.......... 71 Dekoracja tekstu...................................................p...................................................p....... 74 Przekształcanie tekstu ...................................................p................................................. 78 Regulacja odstępów pomiędzy literami ...................................................p...................... 80 4 ABC kaskadowych arkuszy stylów (CSS) Regulacja odstępów pomiędzy wyrazami ...................................................p................... 82 Regulacja odstępów pomiędzy wierszami ...................................................p.................. 83 Pusta przestrzeń...................................................p...................................................p........ 85 Podsumowanie ...................................................p...................................................p......... 87 Rozdział 5. Właściwości czcionki ...................................................z..................89 Rodzaj użytej czcionki — rodzina czcionek ...................................................p............... 90 Rozmiar czcionki ...................................................p...................................................p..... 97 Waga czcionki ...................................................p...................................................p........ 101 Styl czcionki...................................................p...................................................p........... 104 Warianty czcionki ...................................................p...................................................p.. 106 Szerokość czcionki...................................................p...................................................p. 107 Proporcja czcionki...................................................p...................................................p.. 107 Zbiorczy zapis właściwości czcionek ...................................................p....................... 108 Podsumowanie ...................................................p...................................................p....... 109 Rozdział 6. Osadzanie czcionek na stronie WWW............................................111 Open Type ...................................................p...................................................p.............. 111 True Doc...................................................p...................................................p.................116 Podsumowanie ...................................................p...................................................p....... 120 Rozdział 7. Właściwości list ...................................................z........................121 . 123 Typ listy ...................................................p...................................................p................ Dowolny obraz jako wypunktowanie listy...................................................p................ 134 Pozycjonowanie listy względem wypunktowania lub numeracji ................................ 135 Zbiorczy zapis właściwości list...................................................p................................. 137 Podsumowanie ...................................................p...................................................p....... 138 Rozdział 8. Kolor i tło poszczególnych elementów ...........................................141 Kolor ...................................................p...................................................p...................... 141 Tło ...................................................p...................................................p...................... .... 144 Definicja koloru jako tła ...................................................p..................................... 144 Element graficzny jako tło ...................................................p.................................. 148 Zbiorczy zapis właściwości tła ...................................................p........................... 157 Podsumowanie ...................................................p...................................................p....... 158 Rozdział 9. Marginesy...................................................z.................................161 Marginesy zewnętrzne — margin ...................................................p............................. 161 Zbiorczy zapis właściwości marginesów zewnętrznych ....................................... 171 Marginesy wewnętrzne — padding ...................................................p.......................... 172 Zbiorczy zapis właściwości marginesów wewnętrznych (dopełnienia) ................ 177 Podsumowanie ...................................................p...................................................p....... 178 Rozdział 10. Obramowanie poszczególnych elementów .....................................183 Definicja obramowania ...................................................p............................................. 183 Styl obramowania...................................................p...................................................p... 187 Szerokość obramowania...................................................p............................................ 190 Kolor obramowania...................................................p...................................................p 191 Podsumowanie ...................................................p...................................................p....... 192 Rozdział 11. Tabele ...................................................z......................................199 Formatowanie zawartości tabeli...................................................p................................ 202 Formatowanie krawędzi tabeli ...................................................p.................................. 207 Formatowanie wyglądu tabeli za pomocą dodatkowych stylów.................................. 212 Podsumowanie ...................................................p...................................................p....... 217 Spis treści 5 Rozdział 12. Pozycjonowanie elementów ...................................................z.......219 Pozycjonowanie bezwzględne (absolute) ...................................................p................. 219 Pozycjonowanie względne (relative) ...................................................p........................ 223 Pozycjonowanie statyczne (static) ...................................................p............................ 225 Pozycjonowanie typu fixed ...................................................p....................................... 226 Nakładanie elementów na siebie ...................................................p............................... 228 Kolejność nakładanych elementów...................................................p........................... 231 Wymiarowanie pozycjonowanych elementów ...................................................p......... 232 Podsumowanie ...................................................p...................................................p....... 234 Rozdział 13. Oblewanie tekstem innych elementów ..........................................237 Sterowanie oblewaniem ...................................................p............................................ 237 Blokowanie oblewania wybranych elementów...................................................p......... 240 Podsumowanie ...................................................p...................................................p....... 243 Rozdział 14. Efekty wizualne ...................................................z.........................245 Kadrowanie ...................................................p...................................................p............ 245 Ukrywanie elementów ...................................................p.............................................. 247 Sterowanie wymiarowanymi elementami ...................................................p................. 249 Podsumowanie ...................................................p...................................................p....... 252 Rozdział 15. Drukowanie...................................................z...............................255 Definicja rozmiaru strony ...................................................p......................................... 255 Kontrola łamania strony ...................................................p............................................ 256 Podsumowanie ...................................................p...................................................p....... 257 Rozdział 16. Dodatkowe style dla przeglądarki MS Internet Explorer 5.5 oraz 6...................................................z.259 Wygląd okna przeglądarki ...................................................p........................................ 259 Wygląd kursora ...................................................p...................................................p...... 261 Podsumowanie ...................................................p...................................................p....... 262 Rozdział 17. Graficzne edytory CSS — TopStyle................................................263 Charakterystyka programu ...................................................p........................................ 263 Praca z kreatorem ...................................................p...................................................p... 267 Ręczne definiowanie stylu ...................................................p........................................ 269 Dodatkowe funkcje ...................................................p...................................................p 271 Podsumowanie ...................................................p...................................................p....... 272 Zakończenie ...................................................z..................................................273 Dodatek A Przykłady i gotowe rozwiązania problemów....................................275 Formularze ...................................................p...................................................p............. 275 Tło składane z wielu elementów ...................................................p............................... 276 Podpinanie arkuszy do dokumentów w najpopularniejszych edytorach WWW ......... 277 EzHTML ...................................................p...................................................p.......... 277 Pajączek 2000 ...................................................p...................................................p.. 277 MS Front Page 2000/XP ...................................................p..................................... 278 Zmiana tła całej komórki tabeli...................................................p................................. 279 Wczytywanie arkusza w zależności od wykrytej przeglądarki.................................... 280 Gotowe arkusze do wykorzystania na stronie domowej .............................................. 281 Odnośniki bez podkreśleń, zmieniające kolor po najechaniu na nie kursorem myszy...................................................p............. 281 Przykład formatowania suwaków ...................................................p....................... 282 6 ABC kaskadowych arkuszy stylów (CSS) Przykład definicji kursora dla różnych elementów na stronie ............................... 282 Arkusz formatujący typową stronę ...................................................p..................... 283 Przydatne adresy internetowe ...................................................p................................... 285 Dodatek B Zestawienie obsługi stylów przez najpopularniejsze przeglądarki ....287 Dodatek C Zbiór opisanych stylów łącznie z dostępnymi wartościami .............293 Właściwości tekstu...................................................p...................................................p. 293 Właściwości czcionki...................................................p................................................ 294 Właściwości listy ...................................................p...................................................p... 294 Właściwości tła i koloru...................................................p............................................ 295 Marginesy zewnętrzne ...................................................p.............................................. 295 Marginesy wewnętrzne — dopełnienie...................................................p..................... 296 Obramowanie ...................................................p...................................................p......... 296 Właściwości tabeli ...................................................p...................................................p. 297 Pozycjonowanie ...................................................p...................................................p..... 297 Oblewanie tekstem innych elementów...................................................p...................... 298 Efekty wizualne...................................................p...................................................p...... 298 Właściwości drukowania ...................................................p.......................................... 298 Style dla przeglądarki MS Internet Explorer ...................................................p............ 299 Rozdział 3. Dziedziczenie Zrozumienie pojęcia dziedziczenia wymaga od nas zapoznania się z hierarchią waż- ności poszczególnych znaczników wewnątrz dokumentu. Kaskadowe arkusze stylów wprowadzają pojęcie drzewa i na jego przykładzie doskonale widać te zależności. Poniżej zamieszczam listing prostego kodu strony oraz rozrysowane dla niego drzewo. $ $ (cid:18)  $$  $  $$ 6o+..6/;+ $$      6o+.8/789   $ $ $ $ $  $ $ $ $  $ $ $ $   $    $ Przykładowe drzewo dla powyższego kodu wyglądałoby tak jak na rysunku 3.1. Analizując rysunek, widzimy, że określenie np. koloru tekstu jako niebieski bezpo- średnio dla pary znaczników   spowoduje jego użycie dla każdego ele- mentu naszej strony znajdującego się niżej w hierarchii. Jeżeli dodatkowo zdefiniu- jemy kolor listy    jako zielony, to tekst całego dokumentu będzie niebieski poza listą, która zostanie sformatowana za pomocą koloru zielonego. Idąc dalej tym tokiem rozumowania, dopiszmy do stylu odpowiedzialnego za formatowanie    definicję wielkości czcionki równą 14 punktów. Strona wynikowa będzie ABC kaskadowych arkuszy stylów (CSS) 54 Rysunek 3.1. Przykładowe drzewo dziedziczenia zbudowane na podstawie opisanego kodu HTML sformatowana za pomocą czcionki o wielkości 14 punktów i w kolorze niebieskim. Natomiast lista będzie miała kolor zielony i identyczną wielkość czcionki, podobnie jak reszta dokumentu. Innymi słowy, styl odpowiedzialny za definicję czcionki będzie dziedziczony z nadrzędnego w hierarchii znaczników  . Innym prostszym przykładem dziedziczenia może być deklaracja stylu dla odnośni- ków, która opiera się na pseudoklasach. Mam tutaj na myśli przykład z definicją dwóch rodzajów odsyłaczy. 2  -3362+: 0328(cid:18)7/ 48 8/8(cid:18)./-36+832232/   +2  0328(cid:18)7/ 48  Zwróć uwagę na to, że pierwszy selektor określa rodzaj domyślnego odnośnika, któ- remu przypisuje kolor granatowy, wysokość 18 punktów oraz brak podkreślenia. Drugi selektor jest definicją klasy o nazwie + i odpowiada za utworzenie hiperłą- cza o takich samych właściwościach jak główny odsyłacz, a jedyna różnica ma pole- gać na wysokości tekstu, która tym razem wynosi zaledwie 12 punktów. Dlatego też wystarczy w przypadku mniejszego odsyłacza zadeklarować jedynie rozmiar czcion- ki, gdyż pozostałe elementy są dziedziczone z wyżej stojącego w hierarchii odsyłacza podstawowego. Nic nie stoi na przeszkodzie, by poza wielkością zmienić również kolor mniejszego odsyłacza. W takiej sytuacji odpowiedni kod powinien przybrać następującą formę: 2  -3362+: 0328(cid:18)7/ 48 8/8(cid:18)./-36+832232/  Rozdział 3.  Dziedziczenie i kaskadowość 55  +2  0328(cid:18)7/ 48 -3366/.  Duży, domyślny odsyłacz, będzie granatowy, natomiast małe hiperłącze określone za pomocą klasy powinno przybrać kolor czerwony. Niestety, od zasady dziedziczenia zdarzają się wyjątki wynikające z niedoskonałości implementacji CSS przez producentów przeglądarek. Przykładem może być doku- ment, gdzie w znacznikach   zdefiniujemy kolor tekstu, a następnie wstawimy tabelę — przeglądarka Netscape Navigator nie będzie umiała zastosować naszej reguły dla zawartości komórek tabeli. Oczywiście w Mozilli, na której bazuję w niniejszej książce, wspomniany problem z dziedziczeniem nie występuje. Również Opera w miarę poprawnie dziedziczy style z elementó w nadrzędnych. Idealnym testem na sprawdzenie, czy nasza przeglądarka poprawnie dziedziczy style przypisane elementom nadrzędnym, są poniższy arkusz CSS:   ,+-16392.(cid:18)-336;8/ 0328(cid:18);/18,3. 0328(cid:18)7/ 48 0328(cid:18)78/8+- -3366/.  oraz kod HTML. $ $ (cid:18)  $$ 884 ;;; ; 361 $  (cid:18)8 786-8 .8. 8 /+. /8+884(cid:18)/59:328/28(cid:18)84/-328/288/8 8-+67/8#(cid:18)(cid:18) /8+2+//;36.7-328/287o3;+C9-3;/C.+C78632;;; /8+2+//7-64832-328/286D834778632  /8+2+/9836-328/28+6837+23;7 /8+2+/34618-328/28 .+;2-8;3 6/0+697 -776/78/7//884/8/8 ## 88/$89o#8632  88/  /+. ,3. -;-/2-2/7832+46/73./C,47/9.3///280678(cid:18)/88/6 78373;+222+-2+  6o+./8+/134378G43;+2+3 /, 432 77821C2+8D643o-o/8/2///282+1oD;/78342+ 4/6;7/13 8+,/,36./6 86 8. -;-/2-2/7832+46/73./C,47/9.3///28 0678(cid:18)/88/678373;+222+-2+  6o+./8+/13 4378G43;+2+3 /,432 77821C2+8D643o-o/8/2 ///282+1oD;/78342+4/6;7/13 56 ABC kaskadowych arkuszy stylów (CSS)  8.  86  8+,/  ,3.  8 Porównując rysunki 3.2 oraz 3.3 widzimy, że w przypadku Internet Explorera tekst wewnątrz tabeli niczym nie różni się do tego na zewnątrz, czyli ma wysokość 15 punk- tów, kolor czerwony oraz został pogrubiony i pochylony. Natomiast na rysunku 3.3 od razu widać, że zawartość tabeli jest wyświetlona za pomocą domyślnej czcionki przeglądarki. Rysunek 3.2. MS Internet Explorer — przykład poprawnego dziedziczenia. Tekst w tabeli jest dokładnie taki sam jak na zewnątrz Rozwiązaniem tego problemu jest odpowiednie przygotowanie arkusza stylów (patrz rysunek 3.4). C$  ,+-16392.(cid:18)-336;8/ 0328(cid:18);/18,3. 0328(cid:18)7/ 48 0328(cid:18)78/8+- -3366/.  Ciekawym przykładem dziedziczenia jest niżej przedst awiony przypadek. Zawartość arkusza stylów: -/6;32  0328(cid:18)7/ 48 Rozdział 3.  Dziedziczenie i kaskadowość 57 Rysunek 3.3. Netscape Navigator — przykład błędnego dziedziczenia. Tekst w tabeli jest inny niż na zewnątrz Rysunek 3.4. Netscape Navigator po odpowiednich zmianach w kodzie arkusza CSS potrafi wyświetlić stronę zgodnie z naszymi oczekiwaniami — jednak nadal nie dziedziczy stylów nadrzędnych elementów -3366/.    0328(cid:18)7/ 48 -336/32  Przykładowy kod HTML:  -+77-/6;32+1D;/78342+4/6;7/13   58 ABC kaskadowych arkuszy stylów (CSS) Analizując definicję stylów dochodzimy do wniosku, że nagłówek stopnia pierwszego powinien mieć wysokość tekstu równą 30 punktów oraz kolor zielony. Jeżeli przyj- rzymy się samemu nagłówkowi w kodzie stronie, to widzimy, że nasz nagłówek ma przypisaną klasę o nazwie -/6;32. O zgrozo, co tu teraz zadziała?... Otóż nie jest to takie skomplikowane, gdyż specyfi- kacja CSS określa specyficzność poszczególnych elementów. W moim przykładzie specyficzność kształtuje się następująco: JJJJ  — niższa specyficzność równa 1, JJJJ -/6;32 — wyższa specyficzność równa 10, Zgodnie z założeniami zawartymi w specyfikacji realizowana jest reguła z większy numerem. Dlatego w tym konkretnym przypadku nagłówek zostanie wyświetlony czcionką o wysokości 15 punktów w kolorze czerwonym gdyż ta klasa ma wyższą specyficzność. Czasami chcemy wyłączyć dziedziczenie pewnych stylów w czasie formatowania. W takim przypadku należy skorzystać z ważności danych stylów. Również tym razem oprę się na przykładzie z nagłówkiem. Chciałbym, aby mój nagłówek na stronie zo- stał wyświetlony czcionką o wysokości 15 punktów w kolorze zielonym. Niestety, moja zachcianka to połączenie wybranych właściwości klasy -/6;32 oraz selekto- ra  . Najprostszym rozwiązaniem jest przygotowanie odpowiedniej klasy i przypisa- nie jej dla nagłówka  . Niestety, tym razem nie możemy dodawać nowych definicji do arkusza, a jedynie dokonać kosmetycznej poprawki. Jak już wiesz, w poprzednim przykładzie nagłówek został sformatowany za pomocą klasy -/6;32, gdyż miała ona wyższą specyficzność, a styl dla selektora  został zupełnie pominięty. Teraz skorzystamy z zaistniałej sytuacji i dla selektora  , a dokładniej dla koloru zielonego, dodamy polecenie 4368+28. Zmodyfikowany arkusz jest widoczny poniżej. -/6;32  0328(cid:18)7/ 48 -3366/.    0328(cid:18)7/ 48 -33616//24368+28  Zwróć uwagę na sposób, w jaki zostało dodane polecenie 4368+28 do konstrukcji stylu. Zawsze występuje po wartości przypisanej dla właściwości konkretnego selekto- ra. Oczywiście sam kod HTML nie uległ żadnej zmianie i nadal ma następującą postać:  -+77-/6;32+1D;/78342+4/6;7/13   Przypisywanie ważności umożliwia zablokowanie dziedziczenia pewnych stylów z nadrzędnych elementów, dzięki czemu mamy jeszcze większe możliwości kontro- lowania wyglądu strony WWW. Rozdział 3.  Dziedziczenie i kaskadowość 59 Polecenie 4368+28 jest poprawnie obsługiwane przez przeglądarki, na których oparłem się w niniejszej książce. Niestety, w przypadku Netscape Navigatora nie działa ono poprawnie i dany styl jest dziedziczony z elementu znajdującego się wyżej w hierarchii. Kaskadowolć Kolejnym bardzo ważnym pojęciem stosowanym w kaskadowych arkuszach stylów, a przy tym występującym w samej nazwie, jest kaskadowość. Funkcja ta odpowiada za określenie hierarchii stosowanych stylów w dokumencie. Wiemy już, że style do dokumentu możemy wstawiać na kilka sposobów (bezpośrednio w kodzie strony jako atrybut dowolnego znacznika, w nagłówku  , globalnie dla danego do- kumentu oraz przez dołączenie zewnętrznego arkusza). Mieszanie zastosowanych stylów jest jak najbardziej możliwe i często spotykane, dlatego konieczne stało się określenie ważności poszczególnych metod. Zasada kaskadowości przyjęta przez twórców wygląda następująco: najpierw ładowane i uwzględniane są zewnętrzne ar- kusze, następnie style wpisane do nagłówka  , a na samym końcu style wpisane bezpośrednio do znacznika. Takie rozwiązanie umożliwia pełną kontrolę nad dokumentem, a w przypadku sprzeczności zdefiniowanych stylów użyty zostanie ten, który jest najbliżej formatowanego dokumentu. $ $ (cid:18)  $$ 884 ;;; ; 361 $  (cid:18)8 786-8 .8. 8 /+. /8+884(cid:18)/59:328/28(cid:18)84/-328/288/8 8-+67/8#(cid:18)(cid:18) /8+2+//;36.7-328/287o3;+C9-3;/C.+C78632;;; /8+2+//7-64832-328/286D834778632  /8+2+/9836-328/28+6837+23;7 /8+2+/34618-328/28 .+;2-8;3 88/$89o#8632  88/ 78/84/8/8 ##   -3366/.   78/  /+. ,3.  +1oD;/78342+4/6;7/13036+83;+246/+697##;47+2;    78/-33616//20328(cid:18)7/ 48+1oD;/78342+4/6;7/13    ,3.  8 Rysunek 3.5 przedstawia przykład działania kaskady. Domyślnie dla każdego na- główka stopnia pierwszego został zdefiniowany kolor czerwony bezpośrednio w (cid:30)   dokumentu. Następnie dla drugiego nagłówka w samym znaczniku      wpisałem dodatkowy styl określający kolor tekstu jako zielony o wielkości 10 60 ABC kaskadowych arkuszy stylów (CSS) punktów. Oczywiście każdy następny nagłówek stopnia pierwszego, wpisany do do- kumentu i ograniczony tylko znacznikami     bez dodatkowych wpisów, rów- nież będzie sformatowany zgodnie z definicją znajduj ącą się w   strony. Rysunek 3.5. Przykład prostej kaskady Na początku tego rozdziału nie napisałem wszystkiego, gdyż chciałem w możliwie najłatwiejszy sposób pokazać zasadę działania kaskady. Otóż kaskady nie ograniczają się jedynie do trzech możliwości zdefiniowania stylów w dokumencie — jest jeszcze kilka innych poziomów. W praktyce wygląda to tak, że każda przeglądarka ma zdefi- niowane swoje domyślne arkusze, za pomocą których formatuje znaczniki w doku- mencie. Na przykład, jeżeli w kodzie strony znajduje się znacznik    , dla któ- rego nie ustawiono żadnych stylów, to przeglądarka wyświetli taki nagłówek zgodnie z tym, jak ją zaprogramowano dla tego typu elementó w. Niektóre przeglądarki pozwalają na przypisanie swoich arkuszy stylów, które potrafią zastąpić domyślne formatowanie przeglądarki. W ten sposób zdefiniowany arkusz jest kolejnym poziomem kaskady. Trzecim poziomem kaskady są style zdefiniowane przez projektanta strony WWW. Innymi słowy, są to te wszystkie polecenia, które zost ały opisane w tej książce. W praktyce wygląda to mniej więcej tak, że jeżeli internauta wejdzie na stronę, na której nie zastosowano żadnych stylów, to przeglądarka skorzysta ze swoich domyśl- nych ustawień. Jeżeli właściciel przeglądarki przygotuje własny arkusz stylów i wej- dzie na tę samą stronę, na której nie ma zdefiniowanych żadnych stylów, to do wy- świetlenia jej zawartości zostanie użyty arkusz użytkownika, gdyż jest on ważniejszy w hierarchii kaskad. Idąc dalej tym tokiem myślenia, rozpatrzmy trzeci przypadek, w którym internauta wejdzie na stronę, w której umieszczone dowolne style. Teraz załóżmy, że nadal korzysta z przeglądarki, w której zdefiniował swój własny arkusz stylów. W takim przypadku do wyświetlenia strony zostanie użyty styl przygotowany przez autora strony, gdyż stoi on wyżej w hierarchii niż domyślny styl przeglądarki oraz arkusz internauty. Na rysunku 3.6 dokładnie widać to, co starałem się opisać powyżej. Oczywiście w przypadku arkusza autora mamy do czynienia z kolejnymi kaskadami, o których wspominałem na samym początku. Rozdział 3.  Dziedziczenie i kaskadowość 61 Rysunek 3.6. W rywalizacji arkuszy wygrywa arkusz autora, zaraz za nim jest internauta, a na ostatnim miejscu znajduje się domyślny arkusz przeglądarki Wewnątrz samego arkusza stylów również mamy do czynienia z kaskadami, a ideal- nym przykładem takiej sytuacji był listing przedstawiony na początku tego rozdziału oraz rysunek 3.5. W jednym dokumencie starły się style wpisane do nagłówka    ze stylami wpisanymi bezpośrednio do danego znacznika. Pomimo tego, że obie deklaracje dotyczyły tego samego elementu, wygrał styl wpisany bezpośrednio do formatowanego akapitu. W razie potrzeby sytuację taką możemy zmienić poprzez zastosowanie polecenia 4368+28. $ $ (cid:18)  $$ 884 ;;; ; 361 $  (cid:18)8 786-8 .8. 8 /+. /8+884(cid:18)/59:328/28(cid:18)84/-328/288/8 8-+67/8#(cid:18)(cid:18) /8+2+//;36.7-328/287o3;+C9-3;/C.+C78632;;; /8+2+//7-64832-328/286D834778632  /8+2+/9836-328/28+6837+23;7 /8+2+/34618-328/28 .+;2-8;3 88/$89o#8632  88/ 78/84/8/8 ##   -3366/.4368+28   78/  /+. ,3.  +1oD;/78342+4/6;7/13036+83;+246/+697##;47+2;    78/-33616//20328(cid:18)7/ 48+1oD;/78342+4/6;7/13    ,3.  8 Przykład, który jest widoczny powyżej, spowoduje wyświetlenie nagłówków o dwóch różnych wielkościach ale o identycznym kolorze. Stanie się tak pomimo tego, że bez- pośrednio do     wpisałem styl nadający temu elementowi kolor zielo ny. Podsumowanie Zrozumienie pojęcia kaskadowość i dziedziczenie ma ogromne znaczenie dla świa- domej pracy ze stylami dlatego jeżeli masz jakieś problemy z którymś z elementów opisanych w tym rozdziale to spróbuj jeszcze raz się z nim zapoznać. W przypadku 62 ABC kaskadowych arkuszy stylów (CSS) gdy nadal czegoś nie rozumiesz spróbuj przepisać poszczególne przykłady a jeżeli to nic nie da napisz do mnie. Pytania prześlij na adres eathan@irc.pl a w miarę swoich możliwości postaram Ci się pomóc.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

ABC kaskadowych arkuszy stylów (CSS)
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: