Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00713 010506 11034278 na godz. na dobę w sumie
CSS3. Nieoficjalny podręcznik. Wydanie III - książka
CSS3. Nieoficjalny podręcznik. Wydanie III - książka
Autor: Liczba stron: 584
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-7317-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) odmieniły świat stron internetowych. Pozwoliły oddzielić treść strony od jej wyglądu. Od tej chwili życie projektantów stało się zdecydowanie prostsze. Praca nad zmianą wyglądu strony przestały przyprawiać o zawrót głowy, a szybkie przygotowanie kilku wersji na konkretne urządzenia stało się realne. Ostatnia wersja CSS3 wprowadza kolejne nowości, które zapewnią optymalne wykorzystanie potencjału stron WWW.

Ta książka należy do cenionej serii 'Nieoficjalny podręcznik'. W trakcie lektury dowiesz się, jak przygotować poprawny arkusz stylów i dołączyć go do strony. Poznasz najlepsze techniki formatowania konkretnych elementów kodu HTML. Ponadto przekonasz się, że można szybko i wygodnie zaprojektować profesjonalną stronę WWW. Znajdziesz tu również opis nowości HTML-a w wersji 5 oraz nauczysz się korzystać z innych czcionek niż Arial czy Verdana. Dzięki CSS3 wiele operacji, które do tej pory sprawiały kłopoty lub wymagały korzystania z elementów graficznych, uda Ci się wykonać za pomocą zaledwie paru linijek kodu. Zaokrąglone rogi, obracanie elementów, gradienty to tylko niektóre z nich. Książka ta jest obowiązkową lekturą dla każdego projektanta i webmastera chcącego być na bieżąco z nowinkami ze świata stron WWW.

Poznaj sekrety CSS3!

Najlepszy przewodnik po CSS3 dla webmasterów!

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

Darmowy fragment publikacji:

Tytuł oryginału: CSS3: The Missing Manual, 3rd Edition Tłumaczenie: Łukasz Piwko ISBN: 978-83-246-7317-9 © 2013 Helion S.A. Authorized Polish translation of the English edition of CSS3: The Missing Manual, 3rd Edition, ISBN 9781449325947 © 2013 Sawyer McFarland Media, Inc. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/css3n3 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/css3n3.zip Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:321)ci Nieoficjalna czo(cid:281)ówka ......................................................................................15 Wst(cid:241)p .................................................................................................................19 Cze(cid:316)(cid:235) I. Podstawy CSS ................................................................... 31 Rozdzia(cid:281) 1. Przystosowanie kodu HTML do pracy z CSS ................................. 33 HTML kiedy(cid:321) i teraz ................................................................................. 33 HTML kiedy(cid:321) — aby dobrze wygl(cid:238)da(cid:298)o .................................................... 33 HTML teraz — szkielet dla CSS .............................................................. 35 Pisanie HTML-a z my(cid:321)l(cid:238) o CSS ................................................................. 35 Pami(cid:258)taj o strukturze ............................................................................. 36 Dwa nowe znaczniki HTML do nauczenia .............................................. 36 Pami(cid:258)taj o uk(cid:298)adzie strony ..................................................................... 40 O czym trzeba zapomnie(cid:240) ....................................................................... 41 Podstawowe wskazówki ......................................................................... 43 Znaczenie deklaracji typu dokumentu ....................................................... 45 Aktualizowanie Internet Explorera ............................................................ 47 Rozdzia(cid:281) 2. Tworzenie stylów i arkuszy stylów ............................................. 49 Anatomia stylu ......................................................................................... 49 Zrozumie(cid:240) arkusze stylów ......................................................................... 52 Styl wewn(cid:258)trzny czy zewn(cid:258)trzny ............................................................. 52 Wewn(cid:258)trzne arkusze stylów ...................................................................... 53 Style zewn(cid:258)trzne ....................................................................................... 54 Do(cid:298)(cid:238)czanie arkusza stylów przy u(cid:353)yciu znacznika HTML ....................... 55 Do(cid:298)(cid:238)czanie arkuszy stylów za pomoc(cid:238) kodu CSS .................................... 56 Kurs: tworzenie pierwszego stylu ............................................................... 57 Tworzenie stylu (cid:321)ródliniowego ............................................................... 57 Tworzenie wewn(cid:258)trznych arkuszy stylów ............................................... 58 Tworzenie zewn(cid:258)trznego arkusza stylów ................................................ 60 Poleć książkęKup książkę Rozdzia(cid:281) 3. Selektory, czyli do czego odnosz(cid:221) si(cid:241) style ..................................67 Selektory znaczników — style dla ca(cid:298)ej strony .............................................67 Selektor klasy — precyzyjna kontrola .........................................................69 Selektor ID — unikalne elementy strony ....................................................72 Nadawanie stylów grupom znaczników .....................................................72 Grupowanie selektorów ..........................................................................73 Selektor uniwersalny ..............................................................................74 Stylizowanie znaczników zagnie(cid:353)d(cid:353)onych ..................................................74 Drzewo rodzinne HTML ........................................................................75 Tworzenie selektorów potomka ..............................................................76 Tworzenie modu(cid:298)ów ...............................................................................78 Pseudoklasy i pseudoelementy ...................................................................79 Style odno(cid:321)ników ...................................................................................79 Stylizowanie fragmentów akapitu ...........................................................80 Wi(cid:258)cej pseudoklas i pseudoelementów ....................................................80 Selektory atrybutu .....................................................................................83 Selektor dziecka .....................................................................................85 Selektory dziecka z uwzgl(cid:258)dnieniem typu elementu ................................88 Selektor brata ............................................................................................89 Selektor :not() ............................................................................................90 Kurs: selektory ...........................................................................................92 Tworzenie selektora grupowego ..............................................................94 Tworzenie i stosowanie selektora klasy ...................................................95 Tworzenie selektora potomka .................................................................97 Tworzenie i stosowanie selektora identyfikatora .....................................98 Ostatni szlif .........................................................................................100 Rozdzia(cid:281) 4. Oszcz(cid:241)dzanie czasu dzi(cid:241)ki dziedziczeniu ..................................103 Czym jest dziedziczenie? .........................................................................103 Jak dziedziczenie upraszcza arkusze stylów ..............................................104 Granice dziedziczenia ..............................................................................104 Kurs: dziedziczenie ..................................................................................107 Prosty przyk(cid:298)ad: dziedziczenie jednopoziomowe ...................................107 Wykorzystanie dziedziczenia do zmiany stylu ca(cid:298)ej strony .....................109 Kiedy dziedziczenie nie dzia(cid:298)a ...............................................................111 Rozdzia(cid:281) 5. Zarz(cid:221)dzanie wieloma stylami — kaskada .................................. 113 Kaskadowo(cid:321)(cid:240) stylów ................................................................................114 Style dziedziczone mog(cid:238) si(cid:258) kumulowa(cid:240) ...............................................114 Najbli(cid:353)szy przodek bierze gór(cid:258) ..............................................................115 Gór(cid:258) bierze styl bezpo(cid:321)redni .................................................................116 Jeden znacznik, wiele stylów .................................................................116 Precyzja: który styl we(cid:351)mie gór(cid:258) ...............................................................118 Remis: wygrywa ostatni ........................................................................119 4 S P I S T R E (cid:285) C I Poleć książkęKup książkę Kontrolowanie kaskady ........................................................................... 120 Zmienianie precyzji ............................................................................. 121 Wybiórcze przes(cid:298)anianie ....................................................................... 122 Jak unikn(cid:238)(cid:240) wojny na precyzj(cid:258) .............................................................. 123 Resetowanie stylów .............................................................................. 125 Kurs: kaskadowo(cid:321)(cid:240) w akcji ...................................................................... 127 Resetowanie stylów i definiowanie nowych ........................................... 127 Tworzenie stylu mieszanego ................................................................ 129 Rozwi(cid:238)zywanie konfliktów ................................................................... 130 Cze(cid:316)(cid:235) II. Stosowanie CSS ............................................................. 133 Rozdzia(cid:281) 6. Formatowanie tekstu ..................................................................135 Czcionki ................................................................................................. 135 Wybór czcionki .................................................................................... 137 Stosowanie czcionek sieciowych .............................................................. 140 Typy plików fontów ............................................................................. 141 Kwestie prawne dotycz(cid:238)ce czcionek ...................................................... 142 Gdzie szuka(cid:240) czcionek sieciowych ........................................................ 142 Generowanie ró(cid:353)nych formatów czcionek ............................................. 143 Dyrektywa @font-face .......................................................................... 145 Tworzenie stylów przy u(cid:353)yciu czcionek sieciowych ............................... 147 U(cid:353)ywanie wariantu pogrubionego i kursywy ......................................... 148 Us(cid:298)uga Google Fonts ............................................................................ 153 Znajdowanie i wybieranie czcionek ...................................................... 154 Korzystanie z us(cid:298)ugi Google Fonts ........................................................ 157 Kolorowanie tekstu ................................................................................. 159 Notacja szesnastkowa .......................................................................... 160 Systemy HSL i HSLA ........................................................................... 162 Zmiana rozmiaru pisma .......................................................................... 163 Stosowanie pikseli ................................................................................ 163 Stosowanie s(cid:298)ów kluczowych, procentów i jednostki em ....................... 163 Formatowanie s(cid:298)ów i liter ........................................................................ 167 Pogrubienie i kursywa .......................................................................... 167 Zamiana tekstu na wielkie litery .......................................................... 168 Dekorowanie tekstu ............................................................................. 169 Odst(cid:258)p mi(cid:258)dzy wyrazami i literami ...................................................... 170 Dodawanie cieni do tekstu ................................................................... 171 Formatowanie ca(cid:298)ych akapitów ............................................................... 172 Zmienianie odst(cid:258)pu mi(cid:258)dzy wierszami ................................................. 172 Wyrównywanie tekstu .......................................................................... 174 Wcinanie pierwszego wiersza i usuwanie marginesów ........................... 174 Formatowanie pierwszej litery lub pierwszego wiersza akapitu .............. 177 Stylizowanie list ...................................................................................... 178 Typy list .............................................................................................. 178 Pozycjonowanie punktorów i numerów ................................................ 179 Punktory graficzne ............................................................................... 181 S P I S T R E (cid:285) C I 5 Poleć książkęKup książkę Kurs: formatowanie tekstu .......................................................................181 Ustawienia strony ................................................................................182 Formatowanie nag(cid:298)ówków i akapitów ...................................................185 Formatowanie list ................................................................................188 Dostrajanie za pomoc(cid:238) klas ..................................................................189 Wyka(cid:300)czanie projektu ..........................................................................191 Rozdzia(cid:281) 7. Marginesy, dope(cid:281)nienie i obramowanie .....................................195 Istota modelu polowego ...........................................................................195 Marginesy i dope(cid:298)nienie ...........................................................................197 Zapis skrótowy marginesów i dope(cid:298)nienia .............................................198 Konflikty marginesów ..........................................................................199 Likwidowanie odst(cid:258)pu za pomoc(cid:238) marginesów ujemnych .....................200 Elementy (cid:321)ródliniowe, blokowe i inne ...................................................202 Obramowanie ..........................................................................................203 Skrócony zapis w(cid:298)a(cid:321)ciwo(cid:321)ci obramowania .............................................204 Formatowanie poszczególnych kraw(cid:258)dzi ...............................................205 Kolorowanie t(cid:298)a .......................................................................................206 Zaokr(cid:238)glanie rogów .................................................................................207 Cienie elementów ....................................................................................210 Okre(cid:321)lanie wysoko(cid:321)ci i szeroko(cid:321)ci ............................................................212 Obliczanie rzeczywistych wymiarów pól ...............................................213 Przedefiniowywanie wymiarów pól .......................................................214 Kontrolowanie wycieków za pomoc(cid:238) w(cid:298)asno(cid:321)ci overflow .......................216 Okre(cid:321)lanie minimalnej szeroko(cid:321)ci i wysoko(cid:321)ci ......................................218 Elementy p(cid:298)ywaj(cid:238)ce .................................................................................219 T(cid:298)a i obramowanie a elementy p(cid:298)ywaj(cid:238)ce ..............................................221 P(cid:298)ywaków nie wpuszczamy ...................................................................222 Kurs: marginesy, t(cid:298)a i obramowanie .........................................................224 Ustawianie t(cid:298)a i marginesów .................................................................224 Ustawianie odst(cid:258)pów wokó(cid:298) znaczników ..............................................227 Tworzenie paska bocznego ...................................................................230 O krok dalej ..........................................................................................233 Rozdzia(cid:281) 8. Umieszczanie grafiki na stronach WWW .................................. 235 CSS i znacznik img ............................................................................235 Obrazy t(cid:298)a ................................................................................................236 Kontrola sposobu powtarzania obrazu w tle ..............................................239 Pozycjonowanie obrazu t(cid:298)a .......................................................................242 S(cid:298)owa kluczowe ....................................................................................242 Dok(cid:298)adne warto(cid:321)ci ................................................................................244 Procenty ...............................................................................................244 Ustalanie po(cid:298)o(cid:353)enia obrazu na sztywno .................................................246 Definiowanie pocz(cid:238)tku i ko(cid:300)ca t(cid:298)a ........................................................246 Skalowanie obrazów t(cid:298)a ........................................................................248 W(cid:298)asno(cid:321)(cid:240) zbiorcza background ................................................................249 Ustawianie wielu obrazów w tle jednego elementu ...................................251 6 S P I S T R E (cid:285) C I Poleć książkęKup książkę Stosowanie gradientów w tle .................................................................... 254 Gradienty liniowe ................................................................................ 254 Powtarzanie gradientów liniowych ....................................................... 258 Gradienty promieniste ......................................................................... 260 Powtarzalne gradienty promieniste ....................................................... 262 Tworzenie gradientów przy u(cid:353)yciu narz(cid:258)dzia ColorZilla .......................... 262 Kurs: uatrakcyjnianie grafik ..................................................................... 265 Definiowanie obramowania obrazu ...................................................... 265 Tworzenie galerii fotografii ................................................................... 268 Dodawanie cieni .................................................................................. 271 Kurs: u(cid:353)ywanie obrazów t(cid:298)a ..................................................................... 273 Umieszczanie obrazu w tle strony ........................................................ 273 Zast(cid:258)powanie obramowania grafik(cid:238) ..................................................... 275 U(cid:353)ywanie grafiki w listach punktowanych ............................................ 276 Uatrakcyjnianie paska bocznego ........................................................... 278 Rozdzia(cid:281) 9. Upi(cid:241)kszanie systemu nawigacji ..................................................281 Wybieranie odno(cid:321)ników do stylizacji ....................................................... 281 Poznaj stany odno(cid:321)ników ..................................................................... 281 Wybieranie okre(cid:321)lonych odno(cid:321)ników ................................................... 283 Stylizowanie odno(cid:321)ników ........................................................................ 284 Podkre(cid:321)lanie odno(cid:321)ników ..................................................................... 285 Tworzenie przycisku ............................................................................ 286 U(cid:353)ywanie grafiki .................................................................................. 289 Tworzenie pasków nawigacji ................................................................... 290 U(cid:353)ywanie list nienumerowanych ......................................................... 291 Pionowe paski nawigacji ....................................................................... 292 Poziome paski nawigacji ...................................................................... 293 Wczytywanie grafik t(cid:298)a odno(cid:321)ników z wyprzedzeniem ............................. 299 Stylizowanie wybranych rodzajów odno(cid:321)ników ........................................ 301 Odno(cid:321)niki do innych witryn ................................................................. 301 Odno(cid:321)niki do adresów e-mail ............................................................... 302 (cid:297)(cid:238)cza do ró(cid:353)nych typów plików ............................................................ 302 Kurs: stylizowanie odno(cid:321)ników ............................................................... 303 Podstawy formatowania odno(cid:321)ników ................................................... 303 Dodawanie obrazu t(cid:298)a do odno(cid:321)nika ..................................................... 305 Wyró(cid:353)nianie ró(cid:353)nych rodzajów odno(cid:321)ników ......................................... 306 Kurs: tworzenie paska nawigacji .............................................................. 308 Dodawanie efektu rollover i tworzenie odno(cid:321)ników „Jeste(cid:321) tutaj” .......... 311 Z pionowego w poziomy ....................................................................... 314 Rozdzia(cid:281) 10. Przekszta(cid:281)cenia, przej(cid:306)cia i animacje CSS ................................. 317 Przekszta(cid:298)cenia ....................................................................................... 317 Obracanie ............................................................................................ 318 Skalowanie .......................................................................................... 319 Przesuwanie ......................................................................................... 321 Zniekszta(cid:298)canie .................................................................................... 322 S P I S T R E (cid:285) C I 7 Poleć książkęKup książkę Stosowanie wielu przekszta(cid:298)ce(cid:300) naraz ...................................................324 Punkt pocz(cid:238)tkowy przekszta(cid:298)cenia ........................................................324 Przej(cid:321)cia ..................................................................................................326 Tworzenie przej(cid:321)(cid:240) .................................................................................327 Kontrola czasu wykonywania animacji .................................................328 Opó(cid:351)nianie pocz(cid:238)tku przej(cid:321)cia ..............................................................331 W(cid:298)asno(cid:321)(cid:240) zbiorcza przej(cid:321)(cid:240) .....................................................................332 Animacje ................................................................................................333 Definiowanie klatek kluczowych ..........................................................334 Przypisywanie animacji do elementów ..................................................337 Kontrola przebiegu animacji .................................................................339 Ko(cid:300)czenie animacji ..............................................................................340 W(cid:298)asno(cid:321)(cid:240) zbiorcza do definiowania animacji .........................................342 Wstrzymywanie wykonywania animacji ...............................................343 Animacje i pseudoklasa :hover ..............................................................344 Kurs ........................................................................................................344 Dodawanie animacji .............................................................................346 Rozdzia(cid:281) 11. Formatowanie tabel i formularzy ..............................................351 W(cid:298)a(cid:321)ciwy sposób u(cid:353)ywania tabel ..............................................................351 Stylizowanie tabel ....................................................................................353 Dodawanie dope(cid:298)nienia ........................................................................354 Ustawianie wyrównania w pionie i w poziomie .....................................354 Tworzenie obramowania ......................................................................356 Stylizowanie wierszy i kolumn ..............................................................357 Stylizowanie formularzy ..........................................................................359 Elementy HTML formularzy ................................................................361 Rozmieszczanie elementów formularza za pomoc(cid:238) CSS ........................362 Kurs: stylizowanie tabeli ..........................................................................364 Kurs: stylizowanie formularza ..................................................................369 Cze(cid:316)(cid:235) III. Tworzenie uk(cid:293)adu strony za pomoc(cid:233) CSS .................. 375 Rozdzia(cid:281) 12. Wprowadzenie do uk(cid:281)adów stron .............................................377 Typy uk(cid:298)adów stron WWW ......................................................................377 Jak dzia(cid:298)a uk(cid:298)ad w CSS? ...........................................................................380 Znacznik div ..................................................................................380 Elementy sekcyjne HTML5 ..................................................................382 Techniki rozmieszczania elementów na stronie ....................................383 Strategie planowania uk(cid:298)adu ....................................................................384 Zacznij od tre(cid:321)ci ...................................................................................384 Przede wszystkim mobilno(cid:321)(cid:240) ................................................................384 Rozpocznij od nakre(cid:321)lenia szkicu ..........................................................385 Zidentyfikuj pola tre(cid:321)ci .........................................................................386 P(cid:298)y(cid:300) z pr(cid:238)dem .......................................................................................387 Pami(cid:258)taj o obrazach w tle .....................................................................387 8 S P I S T R E (cid:285) C I Poleć książkęKup książkę Fragmenty uk(cid:298)adanki ........................................................................... 388 Rozmieszczanie elementów warstwowo ............................................... 388 Pami(cid:258)taj o marginesach i dope(cid:298)nieniu .................................................. 388 Rozdzia(cid:281) 13. Tworzenie uk(cid:281)adów opartych na elementach p(cid:281)ywaj(cid:221)cych .... 389 Stosowanie elementów p(cid:298)ywaj(cid:238)cych w uk(cid:298)adach ...................................... 392 U(cid:353)ywanie w(cid:298)a(cid:321)ciwo(cid:321)ci float dla wszystkich kolumn .............................. 393 Elementy p(cid:298)ywaj(cid:238)ce wewn(cid:238)trz elementów p(cid:298)ywaj(cid:238)cych ......................... 395 Rozwi(cid:238)zywanie problemów z elementami p(cid:298)ywaj(cid:238)cymi ............................ 395 Czyszczenie i obejmowanie elementów p(cid:298)ywaj(cid:238)cych ............................. 397 Tworzenie kolumn o pe(cid:298)nej wysoko(cid:321)ci ................................................. 401 Zapobieganie upadaniu elementów p(cid:298)ywaj(cid:238)cych ................................... 407 Zastosowanie w(cid:298)asno(cid:321)ci box-sizing ...................................................... 409 Kurs: uk(cid:298)ady wielokolumnowe ................................................................ 410 Strukturyzowanie HTML-a .................................................................. 411 Tworzenie stylów uk(cid:298)adu ..................................................................... 412 Dodawanie kolejnej kolumny ............................................................... 413 Dodawanie wolnej przestrzeni .............................................................. 415 Ustawianie sta(cid:298)ej szeroko(cid:321)ci ................................................................. 417 Mieszanie uk(cid:298)adu p(cid:298)ynnego ze sta(cid:298)ym ................................................... 418 Rozdzia(cid:281) 14. Projektowanie elastycznych witryn (RWD) ............................. 423 Podstawy techniki RWD ......................................................................... 423 Przystosowywanie strony do techniki RWD ............................................. 425 Zapytania o media ................................................................................... 427 Strategie u(cid:353)ycia zapyta(cid:300) o media .......................................................... 427 Definiowanie stopni uk(cid:298)adu ................................................................. 429 Od czego zacz(cid:238)(cid:240) ................................................................................... 430 Tworzenie zapyta(cid:300) o media .................................................................. 431 Zapytania o media wewn(cid:238)trz arkuszy stylów ........................................ 432 Podstawowa struktura arkusza stylów .................................................. 433 Najpierw urz(cid:238)dzenia przeno(cid:321)ne ............................................................ 434 Elastyczne siatki ..................................................................................... 434 Jak wa(cid:353)na jest kolejno(cid:321)(cid:240) elementów w kodzie HTML ........................... 436 Resetowanie modelu polowego ............................................................. 436 Zamienianie uk(cid:298)adu sztywnego w elastyczn(cid:238) siatk(cid:258) .............................. 437 P(cid:298)ynne obrazy .......................................................................................... 439 Wady stosowania p(cid:298)ynnych obrazów ..................................................... 441 Filmy i animacje Flash ......................................................................... 442 Kurs stosowania techniki RWD ............................................................... 443 Zmiana kolejno(cid:321)ci elementów HTML .................................................. 443 P(cid:298)ynne obrazy ....................................................................................... 446 Definiowanie stylów dla tabletów ......................................................... 448 Definiowanie stylów dla telefonów ....................................................... 450 S P I S T R E (cid:285) C I 9 Poleć książkęKup książkę Rozdzia(cid:281) 15. Pozycjonowanie elementów na stronie WWW ....................... 455 Jak dzia(cid:298)aj(cid:238) w(cid:298)a(cid:321)ciwo(cid:321)ci pozycjonuj(cid:238)ce? ...................................................456 Ustawianie warto(cid:321)ci pozycjonuj(cid:238)cych ...................................................458 Gdy pozycjonowanie bezwzgl(cid:258)dne jest wzgl(cid:258)dne ...................................461 Kiedy (i gdzie) u(cid:353)ywa(cid:240) pozycjonowania wzgl(cid:258)dnego? .............................462 Stos elementów ....................................................................................464 Ukrywanie fragmentów strony ..............................................................466 U(cid:353)yteczne strategie pozycjonowania ........................................................469 Pozycjonowanie wewn(cid:238)trz elementu .....................................................469 Wy(cid:298)amywanie elementu poza blok ........................................................470 U(cid:353)ycie sta(cid:298)ego pozycjonowania do tworzenia ramek za pomoc(cid:238) stylów CSS ...471 Kurs: pozycjonowanie elementów strony .................................................473 Wzbogacanie banera strony ..................................................................474 Dodawanie podpisu do zdj(cid:258)cia ..............................................................477 Cze(cid:316)(cid:235) IV. Zaawansowany CSS .....................................................481 Rozdzia(cid:281) 16. CSS dla strony przeznaczonej do wydruku .............................. 483 Jak dzia(cid:298)aj(cid:238) arkusze stylów dla mediów? ...................................................483 Jak dodawa(cid:240) arkusze stylów przeznaczone dla mediów? ...........................485 Okre(cid:321)lanie typu medium dla zewn(cid:258)trznego arkusza stylów ...................486 Okre(cid:321)lanie typu medium w arkuszu stylów ...........................................486 Tworzenie stylów dla wydruku ....................................................................... 487 U(cid:353)ywanie deklaracji !important do przes(cid:298)oni(cid:258)cia stylów ekranowych .........488 Zmiana stylów tekstu ...........................................................................488 Stylizowanie t(cid:298)a dla wydruków ..............................................................490 Ukrywanie niepotrzebnych obszarów strony .........................................491 Wstawianie podzia(cid:298)ów stron w wydrukach ............................................493 Kurs: tworzenie arkusza stylów przeznaczonego dla wydruków .................494 Usuwanie niepotrzebnych elementów strony ........................................494 Dostosowywanie uk(cid:298)adu .......................................................................496 Zmiana formatowania tekstu ...............................................................498 Wy(cid:321)wietlanie URL ...............................................................................499 Rozdzia(cid:281) 17. Dobre nawyki w CSS ...................................................................501 Wstawianie komentarzy ..........................................................................501 Porz(cid:238)dkowanie stylów i arkuszy stylów ....................................................502 Jasno nazywaj style ...............................................................................503 U(cid:353)ywanie kilku klas dla zaoszcz(cid:258)dzenia czasu ......................................504 Grupuj style, aby utrzyma(cid:240) porz(cid:238)dek w plikach .....................................506 Korzystanie z wielu arkuszy stylów .......................................................507 Usuwanie przeszkadzaj(cid:238)cych stylów przegl(cid:238)darki ....................................509 Wykorzystanie selektorów potomka ........................................................513 Dzielenie stron na sekcje ......................................................................514 Zidentyfikuj tre(cid:321)(cid:240) w(cid:298)a(cid:321)ciw(cid:238) dokumentu ................................................515 Dostarczanie kodu CSS tylko dla Internet Explorera .................................518 Komentarze warunkowe dla ró(cid:353)nych wersji Internet Explorera ..............520 10 S P I S T R E (cid:285) C I Poleć książkęKup książkę Dodatki ........................................................................................ 521 Dodatek A. Zestawienie w(cid:281)a(cid:306)ciwo(cid:306)ci CSS .................................................... 523 Warto(cid:321)ci CSS .......................................................................................... 523 Kolory .................................................................................................. 523 D(cid:298)ugo(cid:321)ci i rozmiary .............................................................................. 525 S(cid:298)owa kluczowe .................................................................................... 526 Adresy URL ......................................................................................... 527 W(cid:298)a(cid:321)ciwo(cid:321)ci tekstu .................................................................................. 527 color (dziedziczona) .............................................................................. 528 font (dziedziczona) ............................................................................... 528 font-family (dziedziczona) .................................................................... 528 font-size (dziedziczona) ........................................................................ 529 font-style (dziedziczona) ....................................................................... 529 font-variant (dziedziczona) ................................................................... 529 font-weight (dziedziczona) .................................................................... 530 letter-spacing (dziedziczona) ................................................................. 530 line-height (dziedziczona) ..................................................................... 530 text-align (dziedziczona) ....................................................................... 530 text-decoration ..................................................................................... 530 text-indent (dziedziczona) .................................................................... 531 text-shadow (dziedziczona) ................................................................... 531 text-transform (dziedziczona) ............................................................... 531 vertical-align ........................................................................................ 532 white-space .......................................................................................... 532 word-spacing (dziedziczona) ................................................................. 532 W(cid:298)a(cid:321)ciwo(cid:321)ci list ...................................................................................... 533 list-style (dziedziczona) ........................................................................ 533 list-style-image (dziedziczona) .............................................................. 533 list-style-position (dziedziczona) .......................................................... 533 list-style-type (dziedziczona) ................................................................ 534 Dope(cid:298)nienie, obramowania i marginesy ................................................... 534 box-shadow .......................................................................................... 534 border .................................................................................................. 534 border-radius ....................................................................................... 535 border-top, border-right, border-bottom, border-left .............................. 535 border-color ......................................................................................... 535 border-top-color, border-right-color, border-bottom-color, border-left-color ............................................... 536 border-style .......................................................................................... 536 border-top-style, border-right-style, border-bottom-style, border-left-style ................................................ 536 border-width ........................................................................................ 537 border-top-width, border-right-width, border-bottom-width, border-left-width ............................................. 537 box-sizing ............................................................................................ 537 outline-color ........................................................................................ 538 outline-style ......................................................................................... 538 S P I S T R E (cid:285) C I 11 Poleć książkęKup książkę outline-width .......................................................................................538 padding ................................................................................................538 padding-top ..........................................................................................539 padding-right ........................................................................................539 padding-bottom ....................................................................................539 padding-left ..........................................................................................539 margin .................................................................................................539 margin-top ...........................................................................................540 margin-right .........................................................................................540 margin-bottom .....................................................................................540 margin-left ...........................................................................................540 T(cid:298)a ..........................................................................................................540 background ..........................................................................................541 background-attachment .......................................................................541 background-clip ....................................................................................541 background-color ..................................................................................542 background-image ................................................................................542 background-origin ................................................................................542 background-position .............................................................................543 background-repeat ................................................................................543 background-size ...................................................................................544 W(cid:298)a(cid:321)ciwo(cid:321)ci uk(cid:298)adu strony ......................................................................544 bottom .................................................................................................544 clear .....................................................................................................544 clip .......................................................................................................545 display ..................................................................................................545 float .....................................................................................................546 height ...................................................................................................546 left .......................................................................................................547 max-height ...........................................................................................547 max-width ............................................................................................547 min-height ...........................................................................................548 min-width ............................................................................................548 overflow ...............................................................................................548 position ................................................................................................549 right .....................................................................................................549 top .......................................................................................................549 visibility ...............................................................................................550 width ...................................................................................................550 z-index .................................................................................................551 W(cid:298)asno(cid:321)ci animacji, przekszta(cid:298)ce(cid:300) i przej(cid:321)(cid:240) .............................................551 @keyframes .........................................................................................551 animation ............................................................................................552 animation-name ..................................................................................552 animation-duration ..............................................................................553 animation-timing-function ..................................................................553 animation-delay ...................................................................................553 animation-iteration-count ....................................................................553 animation-direction .............................................................................554 12 S P I S T R E (cid:285) C I Poleć książkęKup książkę animation-fill-mode ............................................................................. 554 animation-play-state ............................................................................ 554 transform ............................................................................................. 554 transform-origin .................................................................................. 555 transition ............................................................................................. 555 transition-property ............................................................................... 555 transition-duration .............................................................................. 556 transition-timing-function ................................................................... 556 transition-delay .................................................................................... 556 W(cid:298)a(cid:321)ciwo(cid:321)ci tabel .................................................................................... 556 border-collapse ..................................................................................... 557 border-spacing ..................................................................................... 557 caption-side ......................................................................................... 557 empty-cells .......................................................................................... 558 table-layout .......................................................................................... 558 Pozosta(cid:298)e w(cid:298)a(cid:321)ciwo(cid:321)ci .............................................................................. 558 content ................................................................................................. 558 cursor ................................................................................................... 559 opacity ................................................................................................. 559 orphans („sieroty”) ............................................................................... 560 page-break-after ................................................................................... 560 page-break-before ................................................................................. 560 page-break-inside ................................................................................. 561 widows ................................................................................................ 561 Dodatek B. Zasoby CSS ................................................................................... 563 Podr(cid:258)czniki ............................................................................................. 563 World Wide Web Consortium (W3C) ................................................... 563 Ksi(cid:238)(cid:353)ki ................................................................................................. 564 Inne (cid:351)ród(cid:298)a online ................................................................................ 564 Pomoc dotycz(cid:238)ca CSS .............................................................................. 564 Fora dyskusyjne ................................................................................... 564 Porady, sztuczki i wskazówki ............................................................... 565 Nawigacja z CSS ..................................................................................... 565 Kursy ................................................................................................... 565 Przyk(cid:298)ady ............................................................................................. 566 Uk(cid:298)ady oparte na CSS .............................................................................. 566 Informacje o modelu polowym ............................................................. 566 Przyk(cid:298)ady uk(cid:298)adów ............................................................................... 567 Inne zasoby z uk(cid:298)adami ........................................................................ 567 Witryny pokazowe ................................................................................... 568 Ksi(cid:238)(cid:353)ki na temat CSS .............................................................................. 568 Edytory CSS ............................................................................................ 568 Windows i Macintosh .......................................................................... 569 Tylko Windows .................................................................................... 569 Tylko Macintosh ................................................................................. 569 Skorowidz ........................................................................................................ 571 S P I S T R E (cid:285) C I 13 Poleć książkęKup książkę 14 S P I S T R E (cid:285) C I Poleć książkęKup książkę 7 ROZDZIA(cid:224) Marginesy, dope(cid:298)nienie i obramowanie W ygl(cid:238)d ka(cid:353)dego znacznika HTML w przegl(cid:238)darce jest zdeterminowany przez mnóstwo w(cid:298)a(cid:321)ciwo(cid:321)ci. Niektóre z nich — jak obramowanie i kolory t(cid:298)a — wida(cid:240) ju(cid:353) na pierwszy rzut oka. Inne za(cid:321) s(cid:238) niewidoczne — jak dope(cid:298)nienie i marginesy, które dodaj(cid:238) nieco pustej przestrzeni z jednej lub kilku stron znacznika. Dzi(cid:258)ki wiedzy o sposobie funkcjonowania tych w(cid:298)a(cid:321)ciwo(cid:321)ci mo(cid:353)na tworzy(cid:240) przyci(cid:238)gaj(cid:238)ce wzrok kolumny czy dekoracyjne paski boczne i kontrolowa(cid:240) woln(cid:238) przestrze(cid:300) (ang. white space) wokó(cid:298) nich. To z kolei pomaga uzyska(cid:240) upo- rz(cid:238)dkowany i lekko wygl(cid:238)daj(cid:238)cy projekt, który daje wra(cid:353)enie profesjonalizmu. Wszystkie w(cid:298)a(cid:321)ciwo(cid:321)ci opisane w tym rozdziale wzi(cid:258)te razem sk(cid:298)adaj(cid:238) si(cid:258) na jedn(cid:238) z najwa(cid:353)niejszych koncepcji w CSS — model polowy (zwany te(cid:353) modelem blo- kowym lub pude(cid:298)kowym). Istota modelu polowego Mówi(cid:238)c o akapicie lub nag(cid:298)ówku, zawsze mamy na my(cid:321)li litery, s(cid:298)owa i zdania. Prawdopodobnie wi(cid:258)c mówi(cid:238)c o znaczniku img / , mamy na my(cid:321)li zdj(cid:258)cie, logo albo jeszcze jaki(cid:321) inny rodzaj obrazu. Przegl(cid:238)darka jednak traktuje je (i wszystkie inne znaczniki) inaczej — jako ma(cid:298)e pola. Dla przegl(cid:238)darki ka(cid:353)dy znacznik to pole, na którym co(cid:321) si(cid:258) znajduje — obraz, tekst lub inne znaczniki zawieraj(cid:238)ce jeszcze co(cid:321) innego, jak wida(cid:240) na rysunku 7.1. Tre(cid:321)(cid:240) jest otoczona ró(cid:353)nymi w(cid:298)a(cid:321)ciwo(cid:321)ciami, które sk(cid:298)adaj(cid:238) si(cid:258) na pole: (cid:120) Dope(cid:298)nienie (padding) to przestrze(cid:300) pomi(cid:258)dzy tre(cid:321)ci(cid:238) a jej obramowaniem. Jest to odst(cid:258)p znajduj(cid:238)cy si(cid:258) pomi(cid:258)dzy zdj(cid:258)ciem a jego obramowaniem. (cid:120) Obramowanie (border) to linia rysowana wokó(cid:298) wszystkich kraw(cid:258)dzi pola. Mo(cid:353)na j(cid:238) zastosowa(cid:240) do dowolnej liczby kraw(cid:258)dzi pola w wybranym uk(cid:298)adzie. Poleć książkęKup książkę Istota modelu polowego Rysunek 7.1. Model polowy CSS przewiduje, (cid:348)e w jednym znaczniku mo(cid:348)e znajdowa(cid:235) si(cid:253) w(cid:293)a(cid:316)ciwa tre(cid:316)(cid:235) (np. kilka zda(cid:295)) plus dope(cid:293)nienie, obramowanie i marginesy. Obszar w obr(cid:253)bie ramek, który zawiera tre(cid:316)(cid:235) i dope(cid:293)nienie, mo(cid:348)e mie(cid:235) równie(cid:348) jaki(cid:316) kolor. W rzeczywisto(cid:316)ci kolor t(cid:293)a jest nak(cid:293)adany pod obramowa- niem, dzi(cid:253)ki czemu je(cid:316)li obramowanie jest przerywane, to w przerwach pomi(cid:253)dzy kropkami lub kreskami go wida(cid:235) (cid:120) Kolor t(cid:298)a (background-color) wype(cid:298)nia powierzchni(cid:258) wewn(cid:238)trz ramek, w(cid:298)(cid:238)cz- nie z obszarem zajmowanym przez dope(cid:298)nienie. (cid:120) Margines (margin) to przestrze(cid:300) oddzielaj(cid:238)ca od siebie poszczególne znaczniki. Na przyk(cid:298)ad marginesem jest powszechnie spotykany odst(cid:258)p mi(cid:258)dzy górn(cid:238) a doln(cid:238) kraw(cid:258)dzi(cid:238) akapitów na stronach. W(cid:298)a(cid:321)ciwo(cid:321)ci te mo(cid:353)na stosowa(cid:240) w dowolnych kombinacjach do okre(cid:321)lonych znaczników. Znacznikowi mo(cid:353)na ustawi(cid:240) tylko margines lub nada(cid:240) mu obramo- wanie, marginesy i dope(cid:298)nienie. Nic nie stoi na przeszkodzie, aby zastosowa(cid:240) tylko margines, bez dope(cid:298)nienia itd. Je(cid:321)li nie zdefiniujemy której(cid:321) z tych w(cid:298)a(cid:321)ciwo(cid:321)ci, to przegl(cid:238)darka zastosuje swoje ustawienia domy(cid:321)lne, które nie musz(cid:238) nam si(cid:258) po- doba(cid:240). Przyk(cid:298)adowo, mimo (cid:353)e przegl(cid:238)darki z regu(cid:298)y nie stosuj(cid:238) dope(cid:298)nienia ani obramowania do znaczników domy(cid:321)lnie, niektóre znaczniki, takie jak nag(cid:298)ówki i akapity, maj(cid:238) ustawione domy(cid:321)lne warto(cid:321)ci marginesów górnego i dolnego. Uwaga: Ka(cid:348)da przegl(cid:233)darka ma inne domy(cid:316)lne ustawienia dope(cid:293)nienia i marginesów dla poszczególnych znaczników i dlatego najlepiej jest wyzerowa(cid:235) je wszystkie, a nast(cid:253)pnie zdefiniowa(cid:235) od nowa (wi(cid:253)cej na ten temat znajdziesz w rozdziale 17.). Innymi s(cid:293)owy, nale(cid:348)y za pomoc(cid:233) zestawu prostych stylów — zwanych resetem CSS — ca(cid:293)kowicie usun(cid:233)(cid:235) marginesy i dope(cid:293)nienie z elementów. Dzi(cid:253)ki temu po zdefi- niowaniu w(cid:293)asnych ustawie(cid:295) mo(cid:348)na mie(cid:235) pewno(cid:316)(cid:235), (cid:348)e nasze strony w ka(cid:348)dej przegl(cid:233)darce b(cid:253)d(cid:233) wy- gl(cid:233)da(cid:235) jednakowo. 196 C Z (cid:265) (cid:285) (cid:251) I I (cid:105) S T O S O W A N I E C S S Poleć książkęKup książkę Marginesy i dope(cid:298)nienie Marginesy i dope(cid:298)nienie Zarówno marginesy, jak i dope(cid:298)nienie tworz(cid:238) przestrze(cid:300) wokó(cid:298) tre(cid:321)ci strony. Stosuje si(cid:258) je w celu oddzielenia od siebie poszczególnych jej elementów — na przyk(cid:298)ad menu nawigacyjnego po lewej stronie od g(cid:298)ównej tre(cid:321)ci strony po prawej — lub do ustawienia odst(cid:258)pu pomi(cid:258)dzy kraw(cid:258)dzi(cid:238) a tre(cid:321)ci(cid:238). Mo(cid:353)emy na przyk(cid:298)ad zechcie(cid:240) odsun(cid:238)(cid:240) obramowanie od kraw(cid:258)dzi zdj(cid:258)(cid:240) (rysunek 7.2). Rysunek 7.2. Ka(cid:348)de ze zdj(cid:253)(cid:235) na tym rysunku ma usta- wiony dziesi(cid:253)ciopikselowy margines, a wi(cid:253)c przestrze(cid:295) mi(cid:253)dzy nimi wynosi 20 pikseli. Dope(cid:293)nienie oddziela obra- zy od ich ramek, ukazuj(cid:233)c szare t(cid:293)o. W(cid:293)a(cid:316)ciwo(cid:316)ci ramek, marginesów i dope(cid:293)nienia mo(cid:348)na ustawia(cid:235) niezale(cid:348)nie dla ka(cid:348)dej kraw(cid:253)dzi. Zwró(cid:235) uwag(cid:253) na powi(cid:253)kszone do- pe(cid:293)nienie na dole ka(cid:348)dego zdj(cid:253)cia Marginesy i dope(cid:298)nienie funkcjonuj(cid:238) w podobny sposób i je(cid:321)li nie zostanie zdefi- niowane obramowanie albo jaki(cid:321) kolor t(cid:298)a, nie da si(cid:258) rozró(cid:353)ni(cid:240), czy dany odst(cid:258)p to margines, czy dope(cid:298)nienie. Je(cid:321)li jednak wokó(cid:298) elementu jest obramowanie albo ma on t(cid:298)o, to ró(cid:353)nica pomi(cid:258)dzy tymi dwiema w(cid:298)a(cid:321)ciwo(cid:321)ciami jest dobrze widoczna. Dope(cid:298)nienie to odst(cid:258)p pomi(cid:258)dzy tre(cid:321)ci(cid:238) a obramowaniem, zapobiega ono wra(cid:353)eniu st(cid:298)oczenia tre(cid:321)ci w polu. W obszarze dope(cid:298)nienia widoczne jest t(cid:298)o, a wi(cid:258)c mimo (cid:353)e obszar ten jest pusty, mo(cid:353)e mie(cid:240) nawet jaki(cid:321) kolor lub wzór w tle. Marginesy na- tomiast tworz(cid:238) odst(cid:258)p pomi(cid:258)dzy elementami, nadaj(cid:238)c stronie wra(cid:353)enie lekko(cid:321)ci. Margines i dope(cid:298)nienie mo(cid:353)na ustawia(cid:240) z ka(cid:353)dej strony oddzielnie. W(cid:298)a(cid:321)ciwo(cid:321)ci s(cid:298)u(cid:353)(cid:238)ce do kontrolowania marginesów to: margin-top (margines górny), margin (cid:180)-right (margines prawy), margin-bottom (margines dolny) i margin-left (margines lewy). Dla dope(cid:298)nienia s(cid:238) cztery podobne w(cid:298)a(cid:321)ciwo(cid:321)ci: padding-top (do- pe(cid:298)nienie górne), padding-right (dope(cid:298)nienie prawe), padding-bottom (dope(cid:298)- nienie dolne) i padding-left (dope(cid:298)nienie lewe). Rozmiar marginesów i dope(cid:298)- nienia mo(cid:353)na okre(cid:321)la(cid:240) za pomoc(cid:238) wszystkich jednostek dost(cid:258)pnych w CSS: margin-right: 20px; padding-top: 3em; margin-left: 10 ; Powszechnie stosowane s(cid:238) piksele i jednostki em, które w tym przypadku funkcjo- nuj(cid:238) tak samo jak z tekstem. Dwudziestopikselowy margines tworzy odst(cid:258)p o szero- ko(cid:321)ci 20 pikseli, a dope(cid:298)nienie o szeroko(cid:321)ci 3 em tworzy odst(cid:258)p o szeroko(cid:321)ci równej trzykrotnemu rozmiarowi tekstu stylizowanego elementu. Mo(cid:353)na te(cid:353) u(cid:353)ywa(cid:240) warto(cid:321)ci procentowych, ale jest to ryzykowne (szczegó(cid:298)y w ramce poni(cid:353)ej). R O Z D Z I A (cid:224) 7 . (cid:105) M A R G I N E S Y , D O P E(cid:224) N I E N I E I O B R A M O W A N I E 197 Poleć książkęKup książkę Marginesy i dope(cid:298)nienie P O R A D N I K I N (cid:352) Y N I E R A Marginesy i dope(cid:298)nienie a warto(cid:321)ci procentowe Je(cid:316)li u(cid:348)yjemy jednostek procentowych, to przegl(cid:233)darka b(cid:253)dzie oblicza(cid:235) szeroko(cid:316)(cid:235) odst(cid:253)pu na podstawie szero- ko(cid:316)ci elementu rodzica. W przypadku prostych stron elementem tym jest cia(cid:293)o strony, które wype(cid:293)nia ca(cid:293)e okno przegl(cid:233)darki. W takiej sytuacji warto(cid:316)ci procentowe obliczane s(cid:233) na podstawie szeroko(cid:316)ci okna przegl(cid:233)darki w okre(cid:316)lonym czasie. Za(cid:293)ó(cid:348)my, (cid:348)e okno ma 760 pikseli szeroko(cid:316)ci, a zatem dzieci(cid:253)cioprocentowy margines oznacza(cid:293)by odst(cid:253)p o szeroko(cid:316)ci 76 pikseli. Ale je(cid:316)li zmie- nimy rozmiar okna, to warto(cid:316)(cid:235) ta ulegnie zmianie. Zmiana szeroko(cid:316)ci na 600 pikseli spowoduje zmniejszenie margi- nesu do 60 pikseli (10 procent z 600). Jednak element rodzica nie zawsze ma szeroko(cid:316)(cid:235) równ(cid:233) szeroko(cid:316)ci okna przegl(cid:233)darki. Jak zobaczymy w nast(cid:253)p- nych rozdzia(cid:293)ach, w których b(cid:253)dziemy tworzy(cid:235) bardziej wyrafinowane uk(cid:293)ady stron, mo(cid:348)na wprowadza(cid:235) nowe elementy pomagaj(cid:233)ce w organizacji strony. Mo(cid:348)na przyk(cid:293)adowo wstawi(cid:235) dodatkowy znacznik div grupuj(cid:233)cy powi(cid:233)zan(cid:233) ze sob(cid:233) tre(cid:316)(cid:235) w jednym pasku bocznym (przyk(cid:293)ad tego mo(cid:348)na obejrze(cid:235) w kursie w rozdziale 8.). Niech ma on szeroko(cid:316)(cid:235) 300 pikseli. Znacznik ten jest rodzicem elementów w nim zawar- tych, a wi(cid:253)c je(cid:316)li znajdzie si(cid:253) w nim znacznik o margi- nesie ustawionym na 10 procent, to rzeczywista jego szeroko(cid:316)(cid:235) wyniesie 30 pikseli. Aby jeszcze bardziej utrudni(cid:235) nam (cid:348)ycie, marginesy gór- ny i dolny wyra(cid:348)one w procentach równie(cid:348) obliczane s(cid:233) na podstawie szeroko(cid:316)ci, a nie wysoko(cid:316)ci elementu nadrz(cid:253)dnego. A wi(cid:253)c margines górny znacznika usta- wiony na 20 procent b(cid:253)dzie mia(cid:293) szeroko(cid:316)(cid:235) równ(cid:233) 20 procentom szeroko(cid:316)ci elementu go zawieraj(cid:233)cego. Wskazówka: Aby ca(cid:293)kiem pozby(cid:235) si(cid:253) marginesu lub dope(cid:293)nienia, nale(cid:348)y zastosowa(cid:235) warto(cid:316)(cid:235) 0 (np. margin-top: 0 lub padding-bottom: 0). Aby usun(cid:233)(cid:235) odst(cid:253)p oddzielaj(cid:233)cy od elementów strony wszystkie cztery kraw(cid:253)dzie okna przegl(cid:233)darki — tak (cid:348)eby na przyk(cid:293)ad baner lub logo przylega(cid:293)y bezpo(cid:316)rednio do kraw(cid:253)dzi okna — nale(cid:348)y marginesy i dope(cid:293)nienie znacznika body ustawi(cid:235) na ze- ro: margin: 0; i padding:0;. Zapis skrótowy marginesów i dope(cid:298)nienia Cz(cid:258)sto chcemy ustawi(cid:240) marginesy lub dope(cid:298)nienie z wszystkich czterech stron ele- mentu, ale wpisywanie wszystkich czterech w(cid:298)a(cid:321)ciwo(cid:321)ci (margin-right, margin-left itd.) dla ka(cid:353)dego stylu jest bardzo pracoch(cid:298)onne. Jest na to rada: w takich sytuacjach mo(cid:353)na stosowa(cid:240) zapis skrócony w(cid:298)a(cid:321)ciwo(cid:321)ci w postaci margin i padding, za pomoc(cid:238) którego ustawia si(cid:258) wszystkie cztery w(cid:298)a(cid:321)ciwo(cid:321)ci za jednym razem: margin: 0 10px 10px 20px; padding: 10px 5px 5px 10px; Wskazówka: Je(cid:316)li warto(cid:316)(cid:235) w(cid:293
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS3. Nieoficjalny podręcznik. Wydanie III
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ą: