Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00254 004836 14835087 na godz. na dobę w sumie
HTML5 i CSS3. Zaawansowane wzorce projektowe - książka
HTML5 i CSS3. Zaawansowane wzorce projektowe - książka
Autor: , , Liczba stron: 512
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4471-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Zwiększ wydajność swojej pracy!
Wykorzystaj gotowe rozwiązania w HTML5 i CSS3

Oszałamiające możliwości HTML5 pozwoliły projektantom na tworzenie zaawansowanych stron oraz aplikacji internetowych. Jednak wszędzie tam, gdzie realizowane są rozbudowane projekty, zaczynają się problemy ze złożonością struktury tworzonego rozwiązania. W typowych językach programowania zostało to już zauważone dawno temu, a antidotum na te bolączki stały się wzorce projektowe. Teraz przyszedł czas na HTML - najwyższa pora poznać najlepsze rozwiązania typowych problemów!

Książka 'HTML5 i CSS3. Zaawansowane wzorce projektowe' zawiera opis ponad 350 wzorców projektowych w językach HTML5 i CSS3, przeznaczonych do budowy nowoczesnych stron internetowych. Każdy wzorzec można stosować w połączeniu z innymi, co daje nieskończoną liczbę możliwości udoskonalania produktów. Dzięki przedstawionym tu technikom nie trzeba stosować żadnych sztuczek i można uniknąć testowania w nieskończoność aplikacji w różnych przeglądarkach internetowych. Autorzy szczegółowo opisują wszystkie przydatne własności CSS3 oraz pokazują, jak połączyć je z kodem HTML5, aby uzyskać praktyczne rezultaty. Z książką tą nauczysz się tworzyć płynne układy stron, inicjały, uwagi na marginesie, cytaty i alerty. Ponadto poznasz wiele nowych technik, takich jak zaokrąglanie rogów i sprawdzanie danych wprowadzanych do formularzy.

Dzięki tej książce:

Przejrzysty, czytelny kod to oszczędność czasu i pieniędzy!

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

Darmowy fragment publikacji:

Tytuł oryginału: Pro HTML5 and CSS3 Design Patterns Tłumaczenie: Łukasz Piwko ISBN: 978-83-246-4471-1 Original edition copyright © 2011 by Michael Bowers, Dionysios Synodinos, and Victor Sumner. All rights reserved. Polish edition copyright © 2012 by HELION S.A. All rights reserved. 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/html5z Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treĂci O autorach .............................................................................................................13 O korektorze merytorycznym .................................................................................15 PodziÚkowania ......................................................................................................17 WstÚp ....................................................................................................................19 Adresaci ................................................................................................................................................. 19 Innowacje .............................................................................................................................................. 20 Konwencje ............................................................................................................................................ 23 Korzystanie z tej książki ...................................................................................................................... 25 Jak podzielona jest książka ................................................................................................................. 25 Kod źródłowy ....................................................................................................................................... 27 Używanie kodu źródłowego ............................................................................................................... 27 Kontakt z autorami .............................................................................................................................. 27 Rozdziaï 1. Wzorce projektowe, czyli koniec problemów z CSS ...............................................29 Wzorce projektowe — przepisy strukturalne .................................................................................. 30 Używanie wzorców projektowych ..................................................................................................... 30 Używanie arkuszy stylów .................................................................................................................... 35 Składnia CSS ......................................................................................................................................... 36 Kaskadowość ........................................................................................................................................ 40 Upraszczanie kaskady ......................................................................................................................... 42 Przydatne adresy .................................................................................................................................. 43 Często używane własności CSS .......................................................................................................... 44 Własności i wartości CSS: ogólne ...................................................................................................... 45 Własności i wartości CSS: treść ......................................................................................................... 45 Własności i wartości CSS: układ ........................................................................................................ 46 Własności i wartości CSS: specjalne .................................................................................................. 47 Selektory ................................................................................................................................................ 47 Zapytania o media ............................................................................................................................... 48 Elastyczne jednostki miary ................................................................................................................. 49 Stałe jednostki miary ........................................................................................................................... 50 Przeliczniki jednostek dla 96 dpi ....................................................................................................... 50 Typowe rozmiary pisma przy 96 dpi ................................................................................................ 50 SPIS TRE¥CI Rozdziaï 3. Przejścia, animacje i przekształcenia dwuwymiarowe ................................................................... 51 Rozwiązywanie problemów z CSS ..................................................................................................... 52 Znormalizowany arkusz stylów ......................................................................................................... 53 Rozdziaï 2. Wzorce projektowe HTML ......................................................................................57 Streszczenie ........................................................................................................................................... 57 Struktura HTML .................................................................................................................................. 58 Struktura HTML .................................................................................................................................. 60 XHTML ................................................................................................................................................. 64 DOCTYPE ............................................................................................................................................ 66 DOCTYPE ............................................................................................................................................ 67 Elementy Nagłówka ............................................................................................................................. 69 Arkusz Warunkowy ............................................................................................................................ 71 Strukturalne Elementy Blokowe ........................................................................................................ 73 Terminalne Elementy Blokowe ......................................................................................................... 75 Wszechstronne Elementy Blokowe ................................................................................................... 77 Elementy Śródliniowe ......................................................................................................................... 79 Atrybuty Klasy i Identyfikatora ......................................................................................................... 81 Białe Znaki w HTML ........................................................................................................................... 83 Selektory i dziedziczenie w CSS .............................................................................87 Streszczenie ........................................................................................................................................... 87 Selektory Typu, Klasy i Identyfikatora ............................................................................................. 88 Selektory Pozycji i Grupowanie Selektorów .................................................................................... 90 Selektory Atrybutów ............................................................................................................................ 92 Selektory Pseudoelementów ............................................................................................................... 95 Selektory Pseudoklas ........................................................................................................................... 97 Selektor Podklasy ................................................................................................................................. 99 Dziedziczenie ...................................................................................................................................... 101 Dziedziczenie Wizualne .................................................................................................................... 103 Rozdziaï 4. Modele polowe ...................................................................................................105 Streszczenie ......................................................................................................................................... 105 Rodzaje Pól ......................................................................................................................................... 106 Model Polowy ..................................................................................................................................... 108 Pole Śródliniowe ................................................................................................................................ 110 Pole Śródliniowo-Blokowe ............................................................................................................... 112 Pole Blokowe ...................................................................................................................................... 114 Pole Tabeli .......................................................................................................................................... 116 Pole Pozycjonowane Bezwzględnie ................................................................................................. 118 Pole Pływające .................................................................................................................................... 120 Rozdziaï 5. OkreĂlanie wymiarów pól ....................................................................................123 Streszczenie ......................................................................................................................................... 123 Szerokość ............................................................................................................................................. 124 Wysokość ............................................................................................................................................ 126 Konkretny Rozmiar ........................................................................................................................... 128 Kurczliwy ............................................................................................................................................ 130 Rozciągnięty ........................................................................................................................................ 132 6 SPIS TRE¥CI Rozdziaï 6. WïasnoĂci modelu polowego ...............................................................................135 Streszczenie ......................................................................................................................................... 135 Margines .............................................................................................................................................. 136 Obramowanie ..................................................................................................................................... 138 Dopełnienie ........................................................................................................................................ 141 Tło ........................................................................................................................................................ 143 Przepełnienie ...................................................................................................................................... 145 Widoczność ........................................................................................................................................ 147 Łamanie Stron .................................................................................................................................... 149 Rozdziaï 7. Modele pozycjonowania ......................................................................................151 Streszczenie ......................................................................................................................................... 151 Modele Pozycjonowania ................................................................................................................... 152 Pozycjonowany .................................................................................................................................. 154 Najbliższy Pozycjonowany Przodek ................................................................................................ 156 Kontekst Stosowy ............................................................................................................................... 158 Wewnętrzny ....................................................................................................................................... 160 Statyczny ............................................................................................................................................. 162 Pozycjonowanie Bezwzględne ......................................................................................................... 164 Pozycjonowanie Stałe ........................................................................................................................ 166 Pozycjonowanie Względne .............................................................................................................. 168 Elementy Pływające ........................................................................................................................... 170 Względny Element Pływający .......................................................................................................... 172 Rozdziaï 8. Pozycjonowanie: wcinanie, przesuwanie i wyrównywanie elementów ..............175 Streszczenie ......................................................................................................................................... 175 Wcięcia ................................................................................................................................................ 176 Przesuwanie Elementów Statycznych ............................................................................................. 178 Przesuwanie i Wcinanie Statycznych Tabel ................................................................................... 180 Przesuwanie Elementów Pływających ............................................................................................ 182 Przesuwanie Elementów Bezwzględnych i Stałych ...................................................................... 184 Przesuwanie Elementów Względnych ............................................................................................ 186 Wyrównywanie Statycznych Elementów Śródliniowych ............................................................ 188 Wyrównywanie i Przesuwanie Statycznych Bloków .................................................................... 190 Wyrównywanie i Przesuwanie Statycznych Tabel ........................................................................ 192 Wyrównywanie i Przesuwanie Elementów Bezwzględnych ....................................................... 194 Środkowanie Elementów Bezwzględnych ...................................................................................... 196 Wyrównanie Zewnętrzne ................................................................................................................. 198 Rozdziaï 9. Pozycjonowanie — techniki zaawansowane .......................................................201 Streszczenie ......................................................................................................................................... 201 Wyrównanie do Lewej ...................................................................................................................... 202 Przesuwanie Elementów Wyrównanych do Lewej ....................................................................... 204 Wyrównanie do Prawej ..................................................................................................................... 206 Przesuwanie Elementów Wyrównanych do Prawej ..................................................................... 208 Wyrównanie do Środka ..................................................................................................................... 210 Przesuwanie Elementów Wyrównanych do Środka ..................................................................... 212 Wyrównanie do Góry ........................................................................................................................ 214 Przesuwanie Elementów Wyrównanych do Góry ........................................................................ 216 7 SPIS TRE¥CI Wyrównanie do Dołu ........................................................................................................................ 218 Przesuwanie Elementów Wyrównanych do Dołu ........................................................................ 220 Wyśrodkowanie Pionowe ................................................................................................................. 222 Przesuwanie Elementów Wyśrodkowanych Pionowo ................................................................. 224 Rozdziaï 10. Formatowanie tekstu ...........................................................................................227 Streszczenie ......................................................................................................................................... 227 Font ...................................................................................................................................................... 228 Wyróżnienie ....................................................................................................................................... 230 Ozdoby Tekstu ................................................................................................................................... 232 Cień Tekstu ......................................................................................................................................... 234 Zastępowanie Tekstu Grafiką .......................................................................................................... 236 Zastępowanie Tekstu Kanwą i Obiektami VML ........................................................................... 238 Osadzanie Fontów ............................................................................................................................. 240 Niewidoczny Tekst ............................................................................................................................ 241 Tylko dla Czytników Ekranu ........................................................................................................... 242 Rozdziaï 11. Stosowanie odstÚpów .........................................................................................245 Odstępy ............................................................................................................................................... 246 Blokowy ............................................................................................................................................... 248 Bez Zawijania ...................................................................................................................................... 250 Zatrzymanie Białych Znaków .......................................................................................................... 251 Kod ....................................................................................................................................................... 253 Dopełnienie Treści ............................................................................................................................. 255 Dystans Śródliniowy .......................................................................................................................... 257 Ozdoby Śródliniowe .......................................................................................................................... 259 Złamanie Wiersza .............................................................................................................................. 261 Śródliniowa Linia Pozioma .............................................................................................................. 263 Rozdziaï 12. Wyrównywanie treĂci ..........................................................................................265 Wcięcie Tekstu ................................................................................................................................... 266 Wysunięcie Tekstu ............................................................................................................................ 267 Wyrównanie Treści w Poziomie ...................................................................................................... 269 Pionowe Wyrównanie Treści ........................................................................................................... 271 Przesuwanie Treści w Pionie ............................................................................................................ 273 Indeks Górny i Dolny ........................................................................................................................ 275 Zagnieżdżanie Kontekstów Wyrównywania ................................................................................. 277 Zaawansowany Przykład Wyrównywania ..................................................................................... 279 Rozdziaï 13. Bloki ....................................................................................................................281 Streszczenie ......................................................................................................................................... 281 Znaczenie Strukturalne ..................................................................................................................... 282 Struktura Wizualna ........................................................................................................................... 284 Sekcja ................................................................................................................................................... 286 Listy ...................................................................................................................................................... 288 Punktory Graficzne ........................................................................................................................... 290 Śródliniowy ......................................................................................................................................... 292 Scalanie Marginesów ......................................................................................................................... 294 Wsuwany ............................................................................................................................................. 296 Pozioma Kreska ................................................................................................................................. 298 8 SPIS TRE¥CI Odstęp między Blokami .................................................................................................................... 300 Redukcja Odstępu między Blokami ................................................................................................ 301 Lewy Margines ................................................................................................................................... 303 Prawy Margines ................................................................................................................................. 305 Rozdziaï 14. Obrazy .................................................................................................................309 Streszczenie ......................................................................................................................................... 309 Grafika ................................................................................................................................................. 310 Mapa Obrazkowa ............................................................................................................................... 312 Gradient .............................................................................................................................................. 314 Półprzezroczysty ................................................................................................................................ 316 Tekst Zastępowany ............................................................................................................................ 318 Treść nad Obrazem ........................................................................................................................... 319 Treść nad Obrazem Tła ..................................................................................................................... 321 Sprite’y CSS ......................................................................................................................................... 323 Sprite’y CSS, kontynuacja ................................................................................................................. 325 Obraz z Prostym Cieniem ................................................................................................................ 327 Cień Obrazu ........................................................................................................................................ 329 Cień Obrazu, kontynuacja ................................................................................................................ 331 Cień Obrazu, kontynuacja ................................................................................................................ 332 Zaokrąglone Rogi ............................................................................................................................... 334 Zaokrąglone Rogi, kontynuacja ....................................................................................................... 336 Przykładowy Obraz ........................................................................................................................... 338 Rozdziaï 15. Tabele ..................................................................................................................341 Streszczenie ......................................................................................................................................... 341 Tabela .................................................................................................................................................. 342 Grupowanie Wierszy i Kolumn ....................................................................................................... 344 Selektory Tabel ................................................................................................................................... 346 Oddzielanie Krawędzi ....................................................................................................................... 348 Scalanie Krawędzi .............................................................................................................................. 350 Formatowanie Scalanych Krawędzi ................................................................................................ 351 Ukrywanie i Usuwanie Komórek .................................................................................................... 353 Ukrywanie i Usuwanie Wierszy i Komórek .................................................................................. 355 Pionowe Wyrównanie Danych ........................................................................................................ 357 Tabela w Paski .................................................................................................................................... 359 Tabelowy, Wierszowy i Komórkowy .............................................................................................. 361 Układ Tabeli ....................................................................................................................................... 363 Rozdziaï 16. Ukïady kolumn tabel ...........................................................................................365 Modele układu tabel .......................................................................................................................... 365 Korzystanie z układów kolumn ....................................................................................................... 366 Streszczenie ......................................................................................................................................... 366 Szerokość Kolumny ........................................................................................................................... 368 Kurczliwe Kolumny ........................................................................................................................... 370 Kolumny o Stałej Szerokości ............................................................................................................ 372 Kolumny Proporcjonalne do Treści ............................................................................................... 374 Kolumny Proporcjonalne do Innych Kolumn .............................................................................. 376 Kolumny o Rozmiarach Procentowych .......................................................................................... 378 Kolumny o Odwróconych Proporcjach ......................................................................................... 380 Jednakowe Kolumny o Rozmiarze Treści ...................................................................................... 382 9 SPIS TRE¥CI Kolumny o Takich Samych Rozmiarach ........................................................................................ 384 Niewyrośnięte Kolumny ................................................................................................................... 386 Sprężyste Kolumny ............................................................................................................................ 388 Mieszane Układy Kolumn ................................................................................................................ 390 Rozdziaï 17. Ukïady stron ........................................................................................................393 Streszczenie ......................................................................................................................................... 393 Układy Płynne — Informacje Ogólne ............................................................................................ 394 Szerokość Zewnętrzna Pola .............................................................................................................. 396 Projektowanie do wewnątrz, a projektowanie na zewnątrz ........................................................ 398 Pływająca Sekcja ................................................................................................................................. 400 Odstępy między Elementami Pływającymi .................................................................................... 402 Układ Płynny ...................................................................................................................................... 404 Naprzeciwległe Elementy Pływające ............................................................................................... 406 Formatowanie Zdarzeń ..................................................................................................................... 408 Sekcje Rozwijane ................................................................................................................................ 410 Menu z Zakładkami ........................................................................................................................... 413 Zakładki ............................................................................................................................................... 417 Menu Rozwijane ................................................................................................................................ 421 Przycisk ............................................................................................................................................... 425 Łącza Układowe ................................................................................................................................. 429 Układ Wielokolumnowy .................................................................................................................. 431 Szablon ................................................................................................................................................ 432 Przykładowy Układ ........................................................................................................................... 434 Rozdziaï 18. Inicjaïy .................................................................................................................439 Streszczenie ......................................................................................................................................... 439 Wyrównany Inicjał ............................................................................................................................ 440 Inicjał ................................................................................................................................................... 442 Wysunięty Inicjał ............................................................................................................................... 444 Inicjał z Grafiką i Dopełnieniem ..................................................................................................... 446 Pływający Inicjał ................................................................................................................................ 448 Pływający Inicjał z Grafiką ............................................................................................................... 450 Inicjał na Marginesie ......................................................................................................................... 452 Graficzny Inicjał na Marginesie ....................................................................................................... 453 Rozdziaï 19. MyĂli przewodnie i cytaty ....................................................................................457 Streszczenie ......................................................................................................................................... 457 Myśl Przewodnia Spływająca w Lewo ............................................................................................. 458 Myśl Przewodnia Spływająca w Prawo ........................................................................................... 460 Wyśrodkowana Myśl Przewodnia ................................................................................................... 462 Myśl Przewodnia na Lewym Marginesie ........................................................................................ 464 Myśl Przewodnia na Prawym Marginesie ...................................................................................... 466 Cytat Blokowy .................................................................................................................................... 468 Śródliniowy Cytat Blokowy .............................................................................................................. 470 Cytat Śródliniowy .............................................................................................................................. 472 10 SPIS TRE¥CI Rozdziaï 20. Alerty ...................................................................................................................475 Streszczenie ......................................................................................................................................... 475 Alert w JavaScript .............................................................................................................................. 476 Alert w Chmurce ................................................................................................................................ 478 Wyskakujący Alert ............................................................................................................................. 479 Wyskakujący Alert ............................................................................................................................. 481 Alert ..................................................................................................................................................... 483 Alert Śródliniowy ............................................................................................................................... 485 Wysunięty Alert ................................................................................................................................. 487 Alert Graficzny ................................................................................................................................... 489 Wsuwany Alert ................................................................................................................................... 491 Pływający Alert ................................................................................................................................... 493 Alert na Lewym Marginesie ............................................................................................................. 495 Alert na Prawym Marginesie ........................................................................................................... 497 Sprawdzanie Poprawności Formularzy .......................................................................................... 499 Skorowidz ...........................................................................................................501 11 SPIS TRE¥CI 12 R O Z D Z I A ’ 7 „ „ „ Modele pozycjonowania Jest to pierwszy z trzech rozdziałów o pozycjonowaniu elementów na stronie. W tym rozdziale poznasz ogólne modele pozycjonowania CSS, w rozdziale 8. — nauczysz się wcinać, przesuwać oraz wyrównywać elementy, a w rozdziale 9. dowiesz się, jak korzystając z wiedzy zdobytej w dwóch poprzednich rozdziałach, tworzyć zaawansowane wzorce projektowe układu. Streszczenie x Wzorzec Modele Pozycjonowania zawiera opis i przykłady zastosowania sześciu modeli pozycjonowania elementów na stronie. x We wzorcu Pozycjonowany objaśniamy zastosowania czterech ustawień własności position: static, absolute, fixed oraz relative. x We wzorcu Najbliższy Pozycjonowany Przodek pokazujemy, jak ustawiać położenie bezwzględnie pozycjonowanych pól w odniesieniu do dowolnego przodka, a nie tylko ich rodzica. x Na przykładzie wzorca Kontekst Stosowy pokazujemy, jak sprawić, aby pozycjonowane elementy znajdowały się nad lub pod innymi elementami pozycjonowanymi i statycznymi. x Wzorzec Wewnętrzny zawiera objaśnienie, jak sprawić, aby treść śródliniowa była wyświetlana x We wzorcu Pozycjonowanie Bezwzględne pokazujemy, jak wyjąć dowolny element z układu normalnego i określić jego położenie w odniesieniu do wewnętrznej strony obramowania jego najbliższego pozycjonowanego przodka. x Wzorzec Pozycjonowanie Stałe pokazuje, jak wyjąć dowolny element z normalnego układu elementów i określić jego położenie w odniesieniu do obszaru roboczego. x We wzorcu Pozycjonowanie Względne pokazujemy, jak za pomocą własności pozycjonowania względnego kontrolować rozmieszczenie elementów na osi pionowej oraz jak przesuwać pozycjonowane elementy, nie naruszając ich stanu ani położenia innych elementów. x Na przykładzie wzorca Elementy Pływające pokazujemy, jak sprawić, aby wybrany element automatycznie ustawiał się przy lewej lub prawej krawędzi swojego rodzica oraz aby sąsiednie elementy znajdowały się po jednej z jego stron, po obu jego stronach albo pod nim. x Wzorzec Względny Element Pływający zawiera objaśnienie technik względnego pozycjonowania elementów pływających. x We wzorcu Statyczny przedstawiamy podstawowe wiadomości na temat tzw. układu normalnego wewnątrz bloku, a nie na nim. elementów. HTML5 I CSS3. ZAAWANSOWANE WZORCE PROJEKTOWE Modele Pozycjonowania HTML h1 Modele Pozycjonowania /h1 div class= section h2 Przed /h2 p span static /span span absolute /span span fixed /span span relative /span span float /span span relative float /span /p /div div class= section h2 Za /h2 p class= static centered span class= static centered static /span span class= absolute absolute /span span class= fixed fixed /span span class= relative relative /span span class= float float /span span class= relative float relative float /span /p /div CSS *.centered { width:380px; margin-left:auto; margin-right:auto; } *.static { position:static; } *.absolute { position:absolute; top:20px; left:215px; } *.fixed { position:fixed; bottom:20px; right:5px; } *.relative { position:relative; top:20px; left:30px; } *.float { float:right; } 152 Modele Pozycjonowania Wprowadzenie ROZDZIA’ 7. „ MODELE POZYCJONOWANIA To nie jest wzorzec projektowy, lecz wprowadzenie do technik pozycjonowania. W CSS elementy można pozycjonować na sześć sposobów: statycznie, bezwzględnie, na stałe, względnie, pływająco oraz względnie pływająco. Modele pozycjonowania są powiązane z sześcioma rodzajami pól, ale nie są im równoważne. Statycznie można pozycjonować elementy śródliniowe, śródliniowo-blokowe, blokowe i tabele. Modele pozycjonowania bezwzględnego i stałego mają zastosowanie do elementów pozycjonowanych bezwzględnie, które mogą być dowolnego typu. Model pozycjonowania pływającego ma zastosowanie do elementów pływających, które również mogą być dowolnego typu. Pozycjonowanie względne można stosować do wszystkich typów pól oprócz pól pozycjonowanych bezwzględnie. Model pozycjonowania względnego elementów pływających można stosować tylko do pól pływających. W każdym modelu pozycjonowania używa się kombinacji tych samych własności: display, width, height oraz margin. Mimo iż używa się tych samych własności, w każdym modelu działają one w inny sposób. Na przykład ustawienie width:auto powoduje rozciągnięcie bloku statycznego, ale obkurczenie do rozmiaru treści elementu pozycjonowanego bezwzględnie. Widać to w przedstawionym przykładzie, gdzie pierwszy akapit jest rozciągnięty, a bezwzględnie pozycjonowany element span jest obkurczony. W modelach pozycjonowania używa się także pewnych dodatkowych własności, których zastosowanie różni się w zależności od modelu. W pozycjonowaniu bezwzględnym i stałym położenie pola bezwzględnego kontroluje się za pomocą własności left, right, top, bottom oraz z-index. W pozycjonowaniu względnym używa się własności left, top i z-index, a w pozycjonowaniu elementów pływających — float i clear. Ponieważ podstawowy zestaw własności we wszystkich modelach jest taki sam, konkretne efekty pozycjonowania uzyskuje się poprzez zastosowanie odpowiedniej kombinacji typu elementu, rodzaju pola oraz wartości tych własności. W opisie każdego wzorca znajduje się szczegółowy opis warunków, jakie należy spełnić, aby uzyskać określony rodzaj pozycjonowania. Na przykład ustawienie własności width na konkretną wartość oraz własności margin-left i margin-right na auto powoduje wyśrodkowanie statycznego elementu blokowego, ale nie statycznego elementu śródliniowego. Aby natomiast wyśrodkować element pozycjonowany bezwzględnie, należy dodatkowo ustawić jego własności left i right na 0. Istnieje ponad 50 różnych kombinacji wzorców projektowych pozwalających otrzymać różne rodzaje układu elementów. Wzorce te zostały opisane w rozdziałach 7. – 9. Łatwo jest je sobie przyswoić, ponieważ na wszystkie składają się modele polowe, techniki określania rozmiarów, marginesy oraz własności pozycjonowania. Innymi słowy, wszystkie sześć modeli polowych (śródliniowy, śródliniowo-blokowy, blokowy, tabelowy, bezwzględny i pływający) można łączyć z trzema modelami określania rozmiaru elementów (konkretna wartość, rozciągnięcie i obkurczenie) oraz trzema typami marginesów (wcięcie, przesunięcie oraz wyrównanie). Dodatkowo wszystkie rodzaje pól oprócz bezwzględnych można pozycjonować względnie. Opisy modeli polowych, sposobów określania wymiarów pól oraz techniki definiowania marginesów znajdują się w rozdziałach 4. – 6. Modele pozycjonowania są opisane w tym rozdziale. Sposoby wcinania, przesuwania i wyrównywania elementów opisaliśmy w rozdziale 8. Natomiast w rozdziale 9. prezentujemy ponad 50 różnych układów utworzonych z kombinacji wzorców opisanych w rozdziałach 7. i 8. Pozycjonowany, Statyczny, Pozycjonowanie Bezwzględne, Pozycjonowanie Stałe, Pozycjonowanie Względne, Elementy Pływające, Względny Element Pływający 153 Podobne HTML5 I CSS3. ZAAWANSOWANE WZORCE PROJEKTOWE Pozycjonowany HTML h1 Pozycjonowany /h1 div class= relative id= canvas p class= static Pozycjonowanie statyczne /p p class= static Ten tekst zawiera wzglÚdnie pozycjonowany element lt;span gt;, który jest span class= relative offset przesuniÚty /span wzglÚdem swojego normalnego poïoĝenia. /p em class= absolute Pozycjonowanie bezwzglÚdne /em img class= fixed1 src= star.gif alt= star / p class= fixed2 Pozycjonowanie staïe /p /div CSS div,p,em { margin:10px; padding:10px; background-color:white; border-left:1px solid gray; border-right:2px solid black; border-top:1px solid gray; border-bottom:2px solid black; } *.static { position:static; } *.relative { position:relative; left:auto; top:auto; bottom:auto; right:auto; } *.absolute { position:absolute; left:35 ; top:-40px; } *.fixed1 { position:fixed; z-index:20; right:5px; bottom:35px; } *.fixed2 { position:fixed; z-index:10; right:0px; bottom:0; width:190px; margin:0;} *.offset { bottom:-15px; left:-20px; } #canvas { background-color:gold; } /* Mniej ważne style nie zostały pokazane. */ 154 ROZDZIA’ 7. „ MODELE POZYCJONOWANIA Pozycjonowany Problem Chcemy utworzyć element pozycjonowany, aby móc pozycjonować względem niego jego elementy potomne. Dodatkowo możemy chcieć przesunąć ten element względem jego aktualnego położenia, najbliższego pozycjonowanego przodka lub obszaru roboczego, przenieść go na osobną warstwę, wyjąć go z normalnego układu elementów albo zdefiniować, które elementy ma on zakrywać lub które mają zakrywać jego. Aby anulować pozycjonowanie elementu, należy mu zastosować ustawienie position:static. Wartość static jest domyślną wartością własności position. Aby przesunąć element względem jego normalnego położenia w układzie elementów na stronie, należy użyć ustawienia position:relative. Aby przesunąć element względem jego normalnego położenia w układzie elementów na stronie lub jego najbliższego pozycjonowanego przodka, należy użyć ustawienia position:absolute. Aby określić położenie elementu w odniesieniu do obszaru roboczego, należy mu zdefiniować ustawienie position:fixed. Za pomocą własności left można przesunąć lewy bok elementu względem lewej krawędzi jego pola odniesienia. Dodatnie wartości powodują przesunięcie w prawo, a ujemne — w lewo. Za pomocą własności right można przesunąć prawy bok elementu względem prawej krawędzi jego pola odniesienia. Dodatnie wartości powodują przesunięcie w lewo, a ujemne — w prawo. Za pomocą własności top można przesunąć górny bok elementu względem górnej krawędzi jego pola odniesienia. Dodatnie wartości powodują przesunięcie w dół, a ujemne — do góry. Za pomocą własności bottom można przesunąć dolny bok elementu względem dolnej krawędzi jego pola odniesienia. Dodatnie wartości powodują przesunięcie do góry, a ujemne — w dół. Za pomocą własności z-index można określić pozycję elementu na osi pionowej. Im większa wartość, tym bliżej frontu znajduje się element. Elementy można przesuwać względem ich aktualnego położenia za pomocą własności margin. SELEKTOR { position:ABSOLUTE_FIXED_RELATIVE; z-index:+WARTO¥m; left:±WARTO¥m; right:±WARTO¥m; margin-left:±WARTO¥m; margin-right:±WARTO¥m; top:±WARTO¥m; bottom:±WARTO¥m; margin-top:±WARTO¥m; margin-bottom:±WARTO¥m; } Ten wzorzec projektowy ma zastosowanie do wszystkich elementów Pozycjonowanie stałe (position:fixed) nie działa w przeglądarce Internet Explorer 6, ale działa już we wszystkich nowszych wersjach tego programu Elementowi div zdefiniowaliśmy pozycjonowanie position:relative, aby zamienić go w element pozycjonowany. Element jest pozycjonowany, gdy ma przypisane jedno z następujących ustawień: position:relative, position:absolute oraz position:fixed. Elementy pływające można pozycjonować przy użyciu techniki position:relative. Element pozycjonowany jest punktem odniesienia dla swoich najbliższych pozycjonowanych bezwzględnie potomków. W kodzie źródłowym rysunek gwiazdki znajduje się przed ostatnim akapitem. Normalnie akapit ten byłby wyświetlony na tej gwiazdce, ale dzięki nadaniu jej wyższego numeru z-index znajduje się ona na wierzchu. Najbliższy Pozycjonowany Przodek, Statyczny, Pozycjonowanie Bezwzględne, Pozycjonowanie Stałe, Pozycjonowanie Względne, Elementy Pływające Rozwiązanie Wzorzec Zastosowanie Ograniczenia Przykład Podobne 155 HTML5 I CSS3. ZAAWANSOWANE WZORCE PROJEKTOWE Najbliĝszy Pozycjonowany Przodek HTML h1 Najbliĝszy Pozycjonowany Przodek /h1 div class= static ggp Niepozycjonowany pradziadek div class= absolute sized bottom-right box1 BezwzglÚdny nr 1, bottom right em class= absolute offset box2 Zagnieĝdĝony bezwzglÚdny /em /div div class= relative gp Pozycjonowany dziadek div class= static parent Niepozycjonowany rodzic span class= absolute sized bottom-right box1 BezwzglÚdny nr 2, bottom right em class= absolute offset box2 Zagnieĝdĝony bezwzglÚdny /em /span /div /div /div /body CSS *.static { position:static; } *.relative { position:relative; } *.absolute { position:absolute; } *.sized { width:230px; height:70px; } *.bottom-right { bottom:0; right:0; } *.offset { left:45px; top:30px; } /* Mniej ważne style nie zostały pokazane. */ 156 ROZDZIA’ 7. „ MODELE POZYCJONOWANIA Najbliższy Pozycjonowany Przodek Problem Rozwiązanie Wzorzec Zastosowanie Ograniczenia Zalety Wady Wskazówka Podobne Chcemy wypozycjonować element, aby móc w odniesieniu do niego pozycjonować inne elementy. Element taki jest najbliższym pozycjonowanym przodkiem swoich potomków. Aby element był pozycjonowany, należy mu przypisać jedno z następujących ustawień: position:relative, position:absolute lub position:fixed. Położenie elementów pozycjonowanych jest wyznaczane względem położenia ich najbliższego pozycjonowanego przodka. Dzięki temu można wyjąć elementy z normalnego układu elementów na stronie i przenieść je w dowolne inne miejsce. Zwróć uwagę, jak w przedstawionym przykładzie bezwzględnie pozycjonowany element span (Bezwzględny nr 2) został wyjęty z niepozycjonowanego elementu rodzica i ustawiony w dolnym prawym rogu (bottom right) pozycjonowanego dziadka, który jest jego najbliższym pozycjonowanym przodkiem. Jeśli pozycjonowany element nie ma pozycjonowanego przodka, jego położenie ustala się w odniesieniu do elementu body , co oznacza, że element ten jest pozycjonowany domyślnie. Zwróć uwagę, jak w przedstawionym przykładzie bezwzględnie pozycjonowany element div (Bezwzględny nr 1) został wyjęty ze swojego niepozycjonowanego rodzica i ustawiony w prawym dolnym rogu elementu body . Wyznaczenie położenia elementów pozycjonowanych w odniesieniu do ich najbliższych pozycjonowanych przodków pozwala na tworzenie zamkniętych struktur układu. Strukturę taką można przenosić w różne miejsca, a rozmieszczenie jej zawartości — zarówno elementów pozycjonowanych, jak i niepozycjonowanych — zawsze pozostanie bez zmian. Zwróć uwagę, jak w przedstawionym przykładzie bezwzględnie pozycjonowane elementy em zostały rozmieszczone w odniesieniu do ich najbliższych pozycjonowanych przodków, którzy z kolei są przeniesieni do dolnego prawego rogu ich najbliższych pozycjonowanych przodków. SELEKTOR { position:relative; } lub SELEKTOR { position:absolute; } lub SELEKTOR { position:fixed; } Ten wzorzec projektowy ma zastosowanie do wszystkich elementów. Elementy mogą być pozycjonowane tylko w odniesieniu do elementów, w których rzeczywiście się znajdują, tzn. nie ma możliwości pozycjonowania wg dowolnego elementu. Byłoby to bardzo przydatne, ale na razie tylko rzeczywisty przodek może stanowić kontekst pozycjonowania elementu pozycjonowanego. Zamknięte struktury pozycjonowanych elementów można zagnieżdżać na dowolną głębokość. Jest to bardzo przydatne przy tworzeniu projektów do wielokrotnego użytku. Pozycjonowanie to bardzo przydatna technika, ale jej największą wadą jest to, że elementy pozycjonowane muszą mieć konkretnie określone wymiary. Tak zaprojektowane układy mogą źle się prezentować przy innych ustawieniach rozmiaru pisma lub na wyświetlaczach innej wielkości, niż przewidział projektant. Zastosowanie ustawienia position:relative jest bardzo dobrym sposobem na utworzenie pozycjonowanego przodka, ponieważ nie powoduje ono wyjęcia pozycjonowanego elementu z normalnego układu elementów na stronie. Dzięki temu można w projektach używać mieszaniny elementów pozycjonowanych normalnie i bezwzględnie. Pozycjonowany, Kontekst Stosowy, Wewnętrzny, Pozycjonowanie Bezwzględne, Pozycjonowanie Stałe, Pozycjonowanie Względne, Względny Element Pływający 157 HTML5 I CSS3. ZAAWANSOWANE WZORCE PROJEKTOWE Kontekst Stosowy HTML h1 Kontekst Stosowy /h1 div class= stacking-context1 box div class= caption 1. Tïo i obramowanie kontekstu stosowego 1 br / code z-index:2 /code /div span class= level2 box 2. BezwzglÚdny code z-index:-999 /code /span div class= level3 box 3. Blok stat. br / span class= level4 box 4. Pïywak statyczny /span span class= level5 box 5. Statyczny lt;span gt; /span br / br / p class= clear /p span class= level6 box 6. WzglÚdny lt;span gt; code z-index:0 /code /span span class= level7 box 7. BezwzglÚdny code z-index:999 /code /span /div /div div class= stacking-context2 box !-- Dalszy kod jest taki sam, jak powyżej -- CSS *.stacking-context1 { z-index:2; position:absolute; left:10px; top:70px; } *.stacking-context2 { z-index:1; position:absolute; left:223px; top:120px; } *.level2 { z-index:-999; position:absolute; } *.level3 { position:static; } *.level4 { float:left; } *.level5 { position:static; } *.level6 { z-index:0; position:relative; } *.level7 { z-index:999; position:absolute; } /* Mniej ważne style nie zostały pokazane. */ 158 ROZDZIA’ 7. „ MODELE POZYCJONOWANIA Kontekst Stosowy Inne nazwy Problem Rozwiązanie W języku CSS istnieje możliwość kontrolowania kolejności elementów względem powierzchni kolejność na stosie, poziom stosu, z-index, warstwy, kolejność rysowania, kolejność na osi z Chcemy mieć wpływ na kolejność rozmieszczenia elementów na osi pionowej ekranu. Elementy statyczne są ustawiane od dołu do góry w takiej kolejności, w jakiej znajdują się w kodzie źródłowym dokumentu. O kolejności elementów pozycjonowanych decyduje wartość ich własności z-index — im wyższa, tym bliżej ekranu znajduje się dany element. Elementy pozycjonowane, których własność z-index ma wartość ujemną, są umieszczane pod elementami statycznymi i niepozycjonowanymi elementami pływającymi. Numerowanie elementów we własności z-index nie musi być ciągłe. Domyślnie własność ta ma wartość auto. Pozycjonowany element mający przypisaną własność z-index o liczbowej wartości stanowi samodzielny kontekst stosowy, w którym prezentowane są wszystkie jego elementy potomne (statyczne, pływające i pozycjonowane). Kontekst stosowy nie jest tworzony, gdy własność z-index zostanie ustawiona na auto lub zostanie zdefiniowana dla niepozycjonowanego elementu. Następujące wartości powodują powstanie kontekstu stosowego: z-index:0, z-index:-1 oraz z-index:9999. Każdy kontekst stosowy jest niezależną zamkniętą strukturą, do której nie mogą przenikać elementy przodki ani siostrzane. Każdy lokalny kontekst stosowy jest przypisany do wewnętrznego poziomu stosowego 0 i jego elementy potomne są ustawiane na stosie względem tego poziomu. Jest to bardzo ważne. Własność z-index nie jest globalna, lecz odnosi się do najbliższego pozycjonowanego przodka, któremu została przypisana własność z-index z wartością liczbową. Główny kontekst stosowy reprezentuje element html . Kontekst stosowy jest prezentowany na ekranie warstwowo w następujący sposób (od najniżej położonej warstwy): Tło i obramowanie elementu wyznaczającego kontekst stosowy. Pozycjonowane elementy potomne mające przypisaną własność z-index o ujemnej wartości. Potomne niepozycjonowane elementy blokowe. Potomne niepozycjonowane elementy pływające. Potomne niepozycjonowane elementy śródliniowe. Potomne elementy pozycjonowane z ustawieniami z-index:auto i z-index:0. Potomne elementy pozycjonowane z własnością z-index o dodatniej wartości. Elementy opisane w punktach 2, 6 i 7 rekurencyjnie tworzą konteksty stosowe, ponieważ każdy pozycjonowany element mający własność z-index o wartości liczbowej tworzy lokalny kontekst stosowy. Zanim zostanie wyświetlona zawartość elementu, przeglądarka najpierw wyświetla jego pole z kolorem i obrazem oraz obramowaniem. Dopiero później następuje wydruk treści na wcześniej przygotowanym polu. SELEKTOR { z-index:±WARTO¥m; position:ABSOLUTE_FIXED_RELATIVE; } Ten wzorzec projektowy ma zastosowanie do wszystkich elementów. Przeglądarka Firefox miesza punkty 1 i 2, przez co ujemne potomne konteksty stosowe są w niej umieszczane pod tłem i obramowaniem kontekstu nadrzędnego! W nowszych wersjach programu błąd ten jest już poprawiony. 159 Wzorzec Zastosowanie Ograniczenia HTML5 I CSS3. ZAAWANSOWANE WZORCE PROJEKTOWE Kontekst Stosowy — ciąg dalszy Przykład W przykładzie zostało przedstawionych wszystkie siedem poziomów stosowych w dwóch kontekstach. Zwróć uwagę, jak poziomy stosowe odnoszą się do każdego z kontekstów stosowych. Pozycjonowany, Najbliższy Pozycjonowany Przodek, Pozycjonowanie Bezwzględne, Pozycjonowanie Względne, Względny Element Pływający Podobne WewnÚtrzny HTML h1 WewnÚtrzny /h1 div Warstwowy p class= static Statyczny blok nakïadajÈcy siÚ na inny element /p p class= static overlap Statyczny blok nakïadajÈcy siÚ na inny element /p table class= static overlap tr td Tabela nakïadajÈca siÚ na inny element /td /tr /table /div div WewnÚtrzny p class= relative WzglÚdny blok nakïadajÈcy siÚ na inny element /p p class= fixed Staïy blok nakïadajÈcy siÚ na inny element /p p class= absolute BezwzglÚdny blok nakïadajÈcy siÚ na inny element /p /div CSS *.static { position:static; } *.overlap { margin-top:-22px; } *.relative { position:relative; } *.fixed { position:fixed; margin-top:-16px; } *.absolute { position:absolute; top:65px; } /* Mniej ważne style nie zostały pokazane. */ 160 ROZDZIA’ 7. „ MODELE POZYCJONOWANIA Wewnętrzny Inne nazwy Problem Rozwiązanie hasLayout, grupowanie Chcemy, aby treść bloku była rysowana wewnątrz niego, a nie na nim. Innymi słowy, chcemy, aby tekst i pozostała treść śródliniowa były rysowane jako część bloku, do którego należą, dzięki czemu jeśli na element ten zostanie nałożony jakiś inny element, to przesłoni go wraz z tą treścią. Problem polega na tym, że przeglądarki statyczną treść śródliniową rysują na osobnej warstwie nad tłem statycznych elementów blokowych. Gdy dwa statyczne elementy blokowe nałożą się na siebie, tło jednego przesłoni tło drugiego, ale z treścią śródliniową już tak się nie stanie! Spójrz na pierwszą część rysunku, gdzie widać, że obramowanie i tło elementów znajdujących się pod spodem są zasłonięte, natomiast tekst nie. To samo zobaczymy we wszystkich najważniejszych przeglądarkach, ponieważ zgodnie z zasadami kontekstu stosowego najpierw rysowane są tła i obramowania wszystkich bloków, a dopiero potem ich elementy śródliniowe i treść. Z tego powodu tła i obramowania bloków zostają umieszczone na warstwie znajdującej się pod elementami pływającymi i treścią śródliniową. Może Ci się to wydawać sprzeczne z intuicją, ponieważ zazwyczaj myślimy, że treść śródliniowa znajduje się wewnątrz zawierających ją bloków, a nie na nich. Jednak elementy śródliniowe powinny znajdować się na blokach, ponieważ treść śródliniowa może w przypadku przepełnienia wystawać poza blok. Elementy pozycjonowane są niepodzielne, tzn. między ich tło, statycznych potomków oraz treść śródliniową nie
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5 i CSS3. Zaawansowane wzorce projektowe
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ą: