Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00542 010078 11029969 na godz. na dobę w sumie
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II - książka
CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II - książka
Autor: Liczba stron: 320
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1756-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Wykorzystaj potężne narzędzia CSS, aby tworzyć nowoczesne i powszechnie dostępne witryny internetowe

Technologia CSS, czyli kaskadowych arkuszy stylów, powstała w celu odseparowania struktury dokumentu od formy jego prezentacji. Wykorzystanie kaskadowych arkuszy stylów przyspiesza tworzenie stron internetowych, a zgromadzenie wszystkich informacji dotyczących wyglądu tekstu i układu elementów w jednym miejscu ułatwia ich modyfikację oraz aktualizację. Ponadto technologia ta daje możliwość zdefiniowania wyglądu strony dla różnych mediów, takich jak ekran, palmtop, dokument w druku, czytnik ekranowy czy drukarki Braille'a. Krótko mówiąc, CSS umożliwia budowanie nowoczesnych, wygodnych i powszechnie dostępnych witryn internetowych.

W książce tej znajdziesz mnóstwo inspirujących technik i przypadków zaczerpniętych z prawdziwych projektów, a także bibliotekę szablonów stron, formularzy, menu, list oraz tabel, dzięki którym nauka i tworzenie własnych stron będzie przebiegać znacznie efektywniej. Korzystając z tego podręcznika, nauczysz się precyzyjnie pozycjonować elementy przy użyciu własności pływania, marginesów ujemnych, dopełnienia oraz pozycjonowania bezwzględnego. Dowiesz się, jak tworzyć układ strony automatycznie dopasowujący się do rozmiaru okna oraz jak ustawiać obrazy tła.

Poznasz wszystkie reguły, które pozwolą Ci kreować wyjątkowe projekty zgodne z obowiązującymi standardami.

Wykorzystaj CSS i zrób wrażenie na użytkownikach Twojej witryny!

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

Darmowy fragment publikacji:

CSS. Witryny internetowe szyte na miarŒ. Autorytety informatyki. Wydanie II Autor: Charles Wyke-Smith T‡umaczenie: £ukasz Piwko ISBN: 978-83-246-1756-2 Tytu‡ orygina‡u: Stylin with CSS: A Designers Guide (2nd Edition) (Voices That Matter) Format: 168x237, stron: 320 Wykorzystaj potŒ¿ne narzŒdzia CSS, aby tworzy(cid:230) nowoczesne i powszechnie dostŒpne witryny internetowe (cid:149) Jak zbudowa(cid:230) wielokolumnowy uk‡ad strony bez pomocy tabeli? (cid:149) Jak utworzy(cid:230) menu rozwijalne? (cid:149) Jak formatowa(cid:230) tekst za pomoc„ CSS? Technologia CSS, czyli kaskadowych arkuszy styl(cid:243)w, powsta‡a w celu odseparowania struktury dokumentu od formy jego prezentacji. Wykorzystanie kaskadowych arkuszy styl(cid:243)w przyspiesza tworzenie stron internetowych, a zgromadzenie wszystkich informacji dotycz„cych wygl„du tekstu i uk‡adu element(cid:243)w w jednym miejscu u‡atwia ich modyfikacjŒ oraz aktualizacjŒ. Ponadto technologia ta daje mo¿liwo(cid:156)(cid:230) zdefiniowania wygl„du strony dla r(cid:243)¿nych medi(cid:243)w, takich jak ekran, palmtop, dokument w druku, czytnik ekranowy czy drukarki Braille(cid:146)a. Kr(cid:243)tko m(cid:243)wi„c, CSS umo¿liwia budowanie nowoczesnych, wygodnych i powszechnie dostŒpnych witryn internetowych. W ksi„¿ce tej znajdziesz mn(cid:243)stwo inspiruj„cych technik i przypadk(cid:243)w zaczerpniŒtych z prawdziwych projekt(cid:243)w, a tak¿e bibliotekŒ szablon(cid:243)w stron, formularzy, menu, list oraz tabel, dziŒki kt(cid:243)rym nauka i tworzenie w‡asnych stron bŒdzie przebiega(cid:230) znacznie efektywniej. Korzystaj„c z tego podrŒcznika, nauczysz siŒ precyzyjnie pozycjonowa(cid:230) elementy przy u¿yciu w‡asno(cid:156)ci p‡ywania, margines(cid:243)w ujemnych, dope‡nienia oraz pozycjonowania bezwzglŒdnego. Dowiesz siŒ, jak tworzy(cid:230) uk‡ad strony automatycznie dopasowuj„cy siŒ do rozmiaru okna oraz jak ustawia(cid:230) obrazy t‡a. Poznasz wszystkie regu‡y, kt(cid:243)re pozwol„ Ci kreowa(cid:230) wyj„tkowe projekty zgodne z obowi„zuj„cymi standardami. (cid:149) XHTML (cid:150) strukturalizacja tre(cid:156)ci (cid:149) Podstawy CSS (cid:149) Style lokalne, osadzone i zewnŒtrzne (cid:149) Klasy i identyfikatory (cid:149) Selektory i deklaracje (cid:149) Formatowanie tekstu (cid:149) Pozycjonowanie element(cid:243)w (cid:149) Projektowanie komponent(cid:243)w interfejsu (cid:149) Formularze, listy i menu (cid:149) Tworzenie kompletnych witryn internetowych (cid:149) Architektura witryny Wykorzystaj CSS i zr(cid:243)b wra¿enie na u¿ytkownikach Twojej witryny! Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści Wstęp • 12 ROzdział 1. XHTML: STRukTuRaLizacja TReści • 16 Standardy sieciowe • 18 To nie działa w przeglądarce Microsoft Internet Explorer 6 • 18 Treść, struktura i prezentacja 19 Czas na zmiany • 21 Oto przykład starej szkoły projektowania stron • 21 U progu nowej ery • 23 XHTML • 24 Zasady XHTML • 25 Szablon XHTML • 30 Znakowanie treści • 32 Układ elementów — elementy blokowe i liniowe • 32 Hierarchia dokumentu, czyli zapoznanie z rodziną XHTML • 38 ROzdział 2. POdSTawy cSS • 40 Trzy sposoby dołączania arkuszy stylów • 42 Style lokalne • 42 Style osadzone • 43 Style zewnętrzne • 44 Anatomia reguły CSS • 46 Pisanie reguł CSS • 47 Selekcja znaczników w obrębie hierarchii dokumentu • 48 Selektor potomka • 48 Selektor dziecka • 52 Klasy i identyfikatory • 53 Wprowadzenie do identyfikatorów • 57 Identyfikatory a klasy • 58 Selektory do zadań specjalnych • 59 Podsumowanie wiadomości o selektorach • 62 Pseudoklasy • 63 Pseudoklasy odnośników • 63 Inne przydatne pseudoklasy • 65 sPis treśCi  Pseudoelementy • 66 Dziedziczenie • 68 Kaskadowość • 69 Źródła stylów • 69 Zasady kaskadowości • 70 Deklaracje • 74 Wartości liczbowe • 74 Wartości kolorów • 77 ROzdział 3. FORMaTOwanie TekSTu • 80 Definiowanie czcionki • 82 Kolekcje czcionek • 83 Rodziny fontów • 85 Tymczasowe użycie stylów osadzonych • 87 Ustawianie czcionki dla całej strony • 88 Ustawianie rozmiaru pisma • 90 Style dziedziczone w elementach zagnieżdżonych • 93 Własności pisma • 95 Własność font-style • 95 Własność font-weight • 96 Własność font-variant • 97 Skrócony zapis własności czcionek • 98 Własności tekstu • 99 Własność text-indent • 100 Własność letter-spacing • 102 Własność word-spacing • 103 Własność text-decoration • 104 Własność text-align • 105 Własność line-height • 106 Własność text-transform • 107 Własność vertical-align • 108 Używanie stylów czcionek i tekstu • 110 10 Css. witryny internetowe szyte na miarę. autorytety informatyki ROzdział 4. POzycjOnOwanie eLeMenTów • 114 Model blokowy • 116 Obramowanie • 117 Dopełnienie • 120 Marginesy • 120 Scalanie marginesów • 122 Rozmiary bloku • 123 Tworzenie pojedynczej kolumny • 125 Elementy pływające i ich czyszczenie • 128 Własność float • 128 Własność clear • 130 Własność position • 134 Pozycjonowanie statyczne • 134 Pozycjonowanie względne • 135 Pozycjonowanie bezwzględne • 136 Pozycjonowanie stałe • 137 Kontekst pozycjonowania • 138 Własność display • 141 Praktyczne użycie własności position i display • 142 ROzdział . TwORzenie układu STROny • 148 Przykłady układów wielokolumnowych • 150 Poznajemy bibliotekę Stylib • 153 Szerokość ma znaczenie • 153 Elementy pływające a pozycjonowane bezwzględnie • 154 Prosty układ dwukolumnowy ze stałą szerokością kolumn • 155 Poznaj swoje wewnętrzne elementy div • 160 Zapobieganie przepełnieniu • 160 Formatuj do woli wewnętrzne elementy div • 161 Formatowanie tekstu • 161 Prosty płynny układ dwukolumnowy • 161 Nakładamy ograniczenia • 163 Pływać czy nie pływać • 164 Trzykolumnowy układ o stałej szerokości • 165 Płynny układ trzykolumnowy • 169 sPis treśCi 11 Ustawianie takiej samej długości wszystkich kolumn • 173 Fałszywe kolumny • 174 Wydłużanie kolumn za pomocą JavaScript (oraz zaokrąglanie rogów!) • 178 Układ pozycjonowany bezwzględnie • 182 ROzdział 6. PROjekTOwanie kOMPOnenTów inTeRFejSu • 188 Tabele • 190 Formularze • 203 Zasada działania formularzy • 203 Znaczniki tworzące formularz • 204 Formatowanie formularza • 212 Listy i menu • 219 Listy • 219 Menu rozwijalne • 231 ROzdział 7. TwORzenie kOMPLeTnycH wiTRyn inTeRneTOwycH • 244 Strona Stylin’ with CSS • 246 Struktura katalogów • 248 Architektura witryny • 250 Kopiowanie potrzebnych plików CSS z biblioteki • 253 Reguła @import • 253 Style kolorów i tekstu • 257 Kod źródłowy strony • 262 Obrazy w tle • 265 Menu rozwijalne • 268 Przezroczysty pasek boczny • 271 Dodawanie formularza rejestracji • 276 Formatowanie tekstu • 279 Podsumowanie • 285 dOdaTek a. znaczniki XHTML • 286 dOdaTek B. właSnOści cSS • 20 SkOROwidz • 304 R O Z D Z I A Ł 4 (cid:58)(cid:89)(cid:100)(cid:99)(cid:77)(cid:84)(cid:89)(cid:88)(cid:89)(cid:97)(cid:75)(cid:88)(cid:83)(cid:79)(cid:10)(cid:10) (cid:79)(cid:86)(cid:79)(cid:87)(cid:79)(cid:88)(cid:94)(cid:156)(cid:97) ROZDZIAŁ 4. POZYCJONOWANIE ELEMENTÓW (cid:27)(cid:27)(cid:31) Jedną z kluczowych zmian związanych z wprowadzeniem stan- dardów sieciowych była rezygnacja z tabel jako szkieletu strony. Tabele tak naprawdę nigdy nie były do tego przeznaczone. Ich funkcją było przechowywanie danych w podobny sposób, jak przechowuje się dane w Excelu. Jednak przed opracowaniem kaskadowych arkuszy stylów układ strony opierano na tabelach, które tworzyły siatkę utrzymującą poszczególne kolumny ele- mentów. Wymuszało to stosowanie różnych sztuczek, jak puste obrazy GIF, złamania wiersza i twarde spacje. Za pomocą CSS można z dużą precyzją rozmieścić elementy na stronie bez po- trzeby stosowania żadnych elementów prezentacyjnych. Przy użyciu własności CSS, jak marginesy, dopełnienie i obramo - wanie, oraz takich technik, jak elementy pływające i własność clear, można uzyskać takie same, a nawet lepsze efekty jak kie- dyś. Wszystko to jest możliwe przy zachowaniu czystości kodu XHTML oraz współdzieleniu reguł stylistycznych przez te same elementy na różnych stronach. Dzięki temu powstają lekkie i ła- twe w modyfikowaniu strony. 116 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Sukces twórcy strony używającego wymienionych technik jest cał- kowicie uzależniony od tego, jak dobrze pozna i zrozumie model blokowy (ang. box model) oraz własności position i display. Na model blokowy składają się narzędzia służące do kontroli położenia elementów na stronie. Własność position służy do określania wza- jemnych relacji położenia elementów. Własność display pozwala określić, czy elementy mają układać się jeden pod drugim, jeden obok drugiego lub czy w ogóle mają być widoczne. Zaczniemy od modelu blokowego. Model blokowy Każdy element użyty w kodzie XHTML tworzy na stronie blok. W związku z tym strona XHTML w rzeczywistości składa się z pewnej liczby wzajemnie ułożonych bloków. Domyślnie obramowanie każdego bloku jest niewidoczne, a tło prze- zroczyste, dlatego niektórzy mogli się zastanawiać, gdzie są te bloki. W CSS włączenie obramowania i pokolorowanie tła jest banalnie proste. Pozwala to na zobaczenie struktury strony w całej krasie. Na przykład rysunek 4.1 przedstawia tę samą stronę, którą zajmo- waliśmy się pod koniec poprzedniego rozdziału, tylko z pokazanymi ramkami wokół elementów. RySunek 4.1. dzięki pokazaniu ramek widać, że elementy liniowe łączy ciasno otaczają swoją zawar- tość, natomiast elementy blokowe, jak elementy listy, rozciągają się na całą szerokość strony (z wyjątkiem tych, które mają ustawione margi- nesy). należy również zauważyć, że ujemne marginesy akapitów wychodzą poza blok elementu W tym przypadku pozwalamy przeglądarce automatycznie ustawić elementy na stronie. Aby tworzyć bardziej interesujące układy stro- ny niż domyślny, zaprezentowany na powyższym rysunku, trzeba nauczyć się sterować wyglądem i położeniem bloków elementów. Pierwszym krokiem w tym kierunku jest poznanie modelu blokowe- go (rysunek 4.2), który definiuje własności każdego bloku. Rozdział 4. Pozycjonowanie elementów 117 Za pomocą CSS można zmienić trzy cechy bloku: • Obramowanie: można ustawić grubość, styl oraz kolor ramki. • Margines: można ustawić odstęp oddzielający blok od innych sąsiadujących z nim elementów. • Dopełnienie: można ustawić odległość między treścią bloku a jego krawędziami. Mówiąc prościej, marginesy odpychają wszystko, co znajduje się wokół elementu, a dopełnienie odpycha w stronę środka wszystko, co znajduje się wewnątrz elementu. Ponieważ blok ma cztery kra- wędzie, własności definiujące margines i dopełnienie mają cztery rodzaje ustawień: top, right, bottom i left. Obramowanie Z własnością border są związane trzy inne własności: • width (szerokość): przyjmuje wartości thin, medium, thick oraz wszystkie jednostki miary (em, px, itd.); • style (styl): przyjmuje wartości none, hidden, dotted, dashed, solid, double, groove, ridge, inset oraz outset; • color: przyjmuje wszystkie wartości reprezentujące kolory (na przykład w formacie RGB, szesnastkowym i jako słowa kluczowe). RySunek 4.2. Rysunek ten przed- stawia relacje między marginesami, obramowaniem i dopełnieniem w elemencie XHtml. w modelu blokowym elementy frontowe, naj- częściej tekst i grafika, dodawane są za pomocą kodu XHtml, nato- miast kolory i obrazy w tle ustawia się za pomocą cSS Należy pamiętać, że rzeczywiste gru- bości reprezentowane przez słowa kluczowe thin, medium i thick nie są zdefiniowane w specyfikacji CSS, przez co mogą występować w tym zakresie różnice między prze- glądarkami. Style linii, poza solid, także nie są określone w specyfikacji CSS. Na przykład linia przerywana (dashed) może w różnych przeglą- darkach mieć inne odstępy między kreskami, a i same kreski również mogą się różnić. 118 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Dodałem też dwa piksele dopełnie- nia z wszystkich stron, aby tekst nie stykał się z krawędziami. Obramowanie bloku często ustawia się z wszystkich stron na ten sam kolor, styl i grubość. Można każdą z tych własności ustawić osobno, w następujący sposób: p.warning {border-width:4px} p.warning {border-style:solid} p.warning {border-color:#F33;} W takim przypadku lepiej jednak jest użyć skróconego zapisu włas- ności border: p.warning {border:4px solid #F33; padding:2px} Bez względu na to, którego z przedstawionych sposobów użyjemy, każdy akapit należący do klasy warning będzie otoczony ciągłą czerwoną ramką o grubości czterech pikseli, która mocno przykuwa uwagę (rysunek 4.3). Skrócona własność border pozwala zastosować to samo formatowa- nie do wszystkich czterech krawędzi obramowania elementu. Jeśli jednak chcemy, aby poszczególne krawędzie różniły się, możemy to zrobić z łatwością. Chcemy, aby obramowanie było ciągłą czerwoną linią z wszystkich czterech stron, ale dla stworzenia lepszego efektu wizualnego chcemy też, aby krawędzie prawa i dolna były nieco cieńsze. Do uzyskania tego efektu potrzebne są dwie reguły styli- styczne. Pierwsza będzie ustawiać własności wspólne wszystkim czterem krawędziom, a druga ustawi za pomocą własności border- width inną grubość dwóch wybranych krawędzi. p.warning {border:solid #F33; padding:2px;} p.warning {border-width:4px 2px 2px 4px;} Rezultat przedstawia rysunek 4.4. RySunek 4.3. Ponieważ wszystkie cztery krawę- dzie mają być takie same, można użyć skróconego zapisu własności border. dopełnienie zapobiega stykaniu się tekstu z obramowaniem RySunek 4.4. dzięki rozdzieleniu stylów na dwie reguły, krawędzie bloku mogą mieć zarówno wspólne cechy formatowania (kolor i dopełnienie), jak i osobne (grubość linii) Rozdział 4. Pozycjonowanie elementów 119 Podczas pracy nad stroną pomocne jest tymczasowe wyświetlenie ramki elementu, dzięki czemu wyraźniej widać efekt formatowania marginesów i dopełnienia. Domyślne ustawienia bloków są następu- jące: border-width: medium, border-style: none i border-color: black. Ponieważ własność border-style jest ustawiona na none, obramowania nie widać. Dlatego aby szybko wyświetlić obramowa- nie akapitu, można napisać następującą regułę: p {border:solid;} Ustawia ona styl obramowania na linię ciągłą, dzięki czemu ram- ka staje się widoczna — kolor i grubość są ustawione domyślnie. Należy jednak pamiętać, że dodanie krawędzi może mieć wpływ na układ strony, ponieważ grubość obramowania jest dodawana do roz- miaru całego bloku. Może to mieć znaczenie w zależności od tego, w którym miejscu strony znajduje się element. Innym sposobem na wyświetlenie ramki wokół elementu jest ustawienie koloru tła, dzięki czemu widać powierzchnię bloku. W tym przypadku blok nie zmienia rozmiaru. Skrócony zapis własności wpisywanie za każdym razem wszystkich czterech wartości podczas definiowania marginesów, dopełnienia lub ramki elementu bywa nużące. dlatego w cSS można używać skróconego zapisu, pozwalającego na zdefiniowa- nie wszystkich czterech wartości w jednej deklaracji. kolejność wpisywania wartości w takich deklaracjach jest zawsze następująca: góra, prawa, dół, lewa, czyli zgodna z ruchem wskazówek zegara, zaczynając od godziny 12. w związku z tym, aby ustawić marginesy dla elementu, poniższy zapis: {margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;} można zastąpić następującym: {margin:5px 10px 12px 8px;} Poszczególne wartości są oddzielane pojedynczą spacją. nie stosuje się żadnego znaku rozdzielającego, jak prze- cinek. nie ma konieczności definiowania wszystkich czterech wartości. jeśli któraś wartość zostanie pominięta, przeglądarka użyje wartości z przeciwnej strony. {margin:12px 10px 6px;} w powyższym przykładzie brakuje ostatniej wartości (lewa krawędź). dlatego w jej miejscu zostanie użyta war- tość zdefiniowana dla prawej strony (10px). w poniższym przykładzie zostały ustawione tylko dwie wartości top i right (góra i prawa). zatem wartości bottom i left (dół i lewa) będą wynosić odpowiednio 12 i 10 pikseli. {margin:12px 10px;} w końcu, jeśli będzie podana tylko jedna wartość, zostanie ona odniesiona do wszystkich czterech stron: {margin:12px;} za pomocą tej skróconej notacji nie da się tylko zdefiniować dolnej i lewej krawędzi bez podawania wartości dla prawej i górnej, nawet jeśli wynoszą one zero. w takim przypadku można napisać 0 bez żadnej jednostki: {border:0 0 2px 4px;} 120 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Dopełnienie Dopełnienie to przestrzeń między treścią bloku a jego krawędziami. Ponieważ stanowi wewnętrzną część bloku, przyjmuje jego kolor tła. Rysunek 4.5 przedstawia dwa akapity — jeden z dopełnieniem i jeden bez. RySunek 4.5. w elementach z widoczną ramką prawie zawsze stosuje się dopełnienie, mające na celu odsunąć treść od ramki W miejscach, w których kiedyś projektanci musieli stosować dopeł- nienie tabeli i puste GIF-y, co wymagało dużej ilości dodatkowego kodu prezentacyjnego, dziś wystarczy tylko niewielka ilość kodu CSS. Marginesy Marginesy są nieco bardziej skomplikowane niż obramowanie i do- pełnienie. Po pierwsze, większość elementów blokowych (akapity, nagłówki, listy itp.) mają domyślne marginesy, o czym pisałem już wcześniej. Rysunek 4.6 przedstawia trzy zestawy złożone z nagłówka i dwóch akapitów. Pierwszy z nich pokazuje domyślne formatowanie przeglądarki. W drugim przypadku zastosowano marginesy i po- kolorowano tło, dzięki czemu widać, jak marginesy tworzą pustą przestrzeń. Trzeci przykład pokazuje, co się dzieje, kiedy marginesy zostaną ustawione na zero — elementy się stykają. Do dobrych zwyczajów należy umieszczenie poniższej deklaracji na początku każdego arkusza stylów: * {margin:0; padding:0;} Rozdział 4. Pozycjonowanie elementów 121 RySunek 4.6. kontrolowanie marginesów jest kluczową umiejęt- nością — nie można zapominać, że prawie każdy element ma ustawio- ne marginesy domyślne Reguła ta ustawia marginesy i dopełnienie wszystkich elementów na zero. Dzięki temu nie trzeba pamiętać, które elementy mają te własności ustawione domyślnie, a które nie. Po wstawieniu tej reguły do arkusza stylów wszystkie domyślne marginesy i dopeł- nienia znikną. Teraz można niniejsze własności określić osobno, tylko dla wybranych elementów. Później dowiemy się, że różne przeglądarki stosują odmienne domyślne wartości marginesów i dopełnienia dla poszczególnych grup elementów, jak formularze czy listy. Dzięki usunięciu domyślnych ustawień i zastosowaniu własnych można uzyskać bardziej jednolity efekt we wszystkich przeglądarkach. Często w ustawieniach marginesów dla elementów tekstowych stosuje się mieszane jednostki miary. Na przykład lewy i prawy margines akapitu można zdefiniować w pikselach, aby tekst zawsze znajdował się w tej samej odległości od bocznego menu. Natomiast marginesy górny i dolny można ustawić w jednostkach em, dzięki czemu odległość między akapitami w pionie będzie zależała od rozmiaru tekstu, na przykład: p {font-size:1em; margin:.75em 30px;} 122 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki W tym przypadku odległość między akapitami będzie zawsze równa trzem czwartym wysokości pisma. Jeśli ogólny rozmiar teks- tu w znaczniku body zostanie zwiększony, zwiększą się nie tylko akapity, ale także proporcjonalnie odstępy między. Marginesy lewy i prawy pozostaną bez zmian, ponieważ zostały zdefiniowane w pik- selach. Bliżej przyjrzymy się temu zagadnieniu w rozdziale 5, kiedy zaczniemy projektować układy stron. Scalanie marginesów Powiedz to zdanie na głos: „Marginesy sąsiadujące w pionie są scalane”. Koniecznie trzeba o tym pamiętać. Już wyjaśniam, co to znaczy i dlaczego jest takie ważne. Wyobraźmy sobie, że mamy trzy akapity, jeden pod drugim. Każdy z nich formatuje poniższa reguła: p {width:400px; height:50px; border:1px solid #000; margin-top:50px; margin-bottom:30px; background-color:#CCC;} Ponieważ dolny margines pierwszego akapitu styka się z górnym marginesem drugiego akapitu, można by się spodziewać, że odstęp między nimi wyniesie 80 pikseli (50+30). Nie jest to jednak prawda. Kiedy górny i dolny margines stykają się, nachodzą na siebie, aż je- den z nich sięgnie krawędzi drugiego elementu. W tym przypadku większy jest margines górny drugiego elementu, dzięki czemu właśnie on określa odstęp między elementami — 50 pikseli (rysunek 4.7). Efekt ten nazywa się scalaniem marginesów (ang. margin collapsing). Wprawdzie marginesy sąsiadujące w pionie scalają się, jednak margine- sy poziome nie. Te drugie zachowują się zgodnie z oczekiwaniami, czyli tworzą odstęp równy ich sumie. RySunek 4.7. marginesy sąsiadują- ce w pionie ulegają scaleniu Rozdział 4. Pozycjonowanie elementów 123 Efekt scalania marginesów pozwala na utrzymanie pierwszego i ostatniego elementu z grupy takich elementów jak nagłówki, aka- pity czy listy w odpowiedniej odległości od górnej lub dolnej części strony. Kiedy takie same elementy pojawiają się między innymi elementami, oba marginesy nie są potrzebne i zostają scalone w taki sposób, że odstęp określa większy z nich. Rozmiary bloku Zasada działania modelu blokowego należy do najtrudniejszych aspektów CSS zarówno dla ,początkujących jak i zaawansowanych użytkowników. Należy pamiętać, że poniższe informacje doty- czą elementów blokowych, takich jak nagłówki, akapity czy listy. Elementy liniowe zachowują się nieco inaczej. Przeanalizujemy model blokowy szczegółowo, krok po kroku. Omówimy metody ustawiania szerokości bloków, które mają kluczo- we znaczenie w tworzeniu układów kolumnowych. Te same zasady dotyczą także ustawiania wysokości bloku. Szerokość elementu blokowego (dalej zwanego blokiem) ustawia własność width: p {width:400px;} Aby zobaczyć blok, nie zmieniając ustalonego powyżej rozmiaru, można pokolorować jego tło: p {width:400px; background-color:#EEE;} Rysunek 4.8 przedstawia element o szerokości 400 pikseli z pokolo- rowanym tłem. RySunek 4.8. dzięki ustawieniu własności width element nie zaj- muje całego dostępnego miejsca. w tym przypadku element znajduje się w elemencie body, czyli rozcią- gałby się od lewej do prawej krawę- dzi okna przeglądarki Ponieważ nie ustawiono dopełnienia, treść niniejszego elementu również ma szerokość 400 pikseli i styka się z krawędziami swojego 124 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki kontenera. Jest to jak najbardziej zrozumiałe, ale po zastosowaniu dopełnienia i obramowania coś zaczyna szwankować. Po lewej i pra- wej stronie elementu ustawimy 20-pikselowe dopełnienie: p {width:400px; background-color:#EEE; padding:0 20px;} Można by się spodziewać, że po zastosowaniu 40 pikselowego do- pełnienia w bloku o szerokości 400 pikseli na treść pozostanie 360 pikseli. Jest jednak inaczej. W zamian cały blok zostaje powiększony o 40 pikseli (rysunek 4.9). RySunek 4.9. dopełnienie rozszerza blok Jeśli po lewej i prawej stronie elementu ustawimy obramowanie o grubości 6 pikseli: p {width:400px; margin: 0; padding:0 20px; border:#000 solid; border-width: 0 6px 0 6px; background-color:#CCC;} blok poszerzy się o kolejne 12 pikseli (rysunek 4.10). Teraz całkowita szerokość bloku wynosi 452 piksele (6+20+400+20+6). RySunek 4.10. obramowanie rozszerza blok jeszcze bardziej Dodamy jeszcze lewy i prawy margines, aby utworzyć pustą prze- strzeń wokół elementu (rysunek 4.11): p {width:400px; margin: 0 30px; padding:0 20px; border:#000 solid; border-width: 0 6px 0 6px; background-color:#CCC;} Rozdział 4. Pozycjonowanie elementów 125 RySunek 4.11. marginesy tworzą wokół elementu pustą przestrzeń Uwaga nr 1 na temat modelu bloko- wego: Bloki o zdefiniowanych roz- miarach rozszerzają się w poziomie w wyniku dodawania do nich margi- nesów, dopełnienia i obramowania. Własność width ustawia szerokość treści bloku, a nie szerokość samego bloku. Dodanie marginesów, w tym przypadku po 30 pikseli z lewej i pra- wej strony, zwiększa zajmowaną przez element powierzchnię, ponie- waż znajdują się one na zewnątrz bloku. Mimo iż można by ocze- kwać, że obramowanie i dopełnienie, które znajdują się wewnątrz bloku, nie zwiększają jego szerokości, prawda jest inna. Może to mieć duże znaczenie w przypadku układów kolumnowych, w których kolumny muszą mieć określoną szerokość. Układ złożony z elementów pływających (sposoby tworzenia takich układów opiszę w kolejnym rozdziale) może zostać zburzony, jeśli szerokość kolum- ny zostanie nieuważnie zmieniona przez zmianę szerokości dopeł- nienia, marginesu lub obramowania. Kolumnę zazwyczaj tworzy się za pomocą elementu div o odpowiednich rozmiarach. W elemencie tym następnie zagnieżdżane są elementy treści kolumny, jak nagłów- ki, akapity, listy nawigacyjne itd. Tworzenie pojedynczej kolumny Jako ilustrację podstaw techniki tworzenia układów kolumnowych przedstawiam poniższy element div o szerokości 170 pikseli, zawie- rający nagłówek i akapit: div id=”column” h4 Nagłówek h4 /h4 p Nagłówek ten i akapit... /p /div Reguła CSS dla tego elementu div: div#column {width:170px;} Wzdłuż górnej krawędzi okna dodałem linijkę, aby było widać, jak zmienia się szerokość wraz ze zmianami wprowadzanymi w CSS (rysunek 4.12). 126 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Pokolorowałem tło nagłówka i akapitu, aby pokazać, że całkowicie wypełniają kolumnę w poziomie. Domyślny rozmiar elementów blo- kowych to auto, co oznacza: najwięcej, jak to możliwe. To prowadzi do sformułowania drugiej uwagi. Widząc tekst stykający się z krawędziami kontenera, jak na powyższym rysunku, powinniśmy natychmiast poczuć chęć ustawienia dopełnienia dla elementu div, aby dodać nieco przestrzeni (rysunek 4.13). div#column {width:170px; padding:10px;} Uwaga nr 2 na temat modelu blo- kowego: Elementy, które nie mają zdefiniowanej szerokości, rozciągają się na całą szerokość zawierające- go je elementu. Dlatego dodanie poziomego marginesu, dopełnienia i obramowania powoduje zmianę szerokości treści. RySunek 4.12. jeśli kontener nie ma ustawionego dopeł- nienia, elementy blokowe — nagłówek i akapit — roz- ciągają się od lewej do prawej krawędzi zawierającego je elementu RySunek 4.13. dodanie dopeł- nienia do kontenera powoduje jego rozszerzenie. teraz konte- ner ma 192 piksele szerokości. dzięki pokolorowaniu tła ele- mentu div na różowo wyraźniej widać dopełnienie Jak widać na linijce u góry, dopełnienie o szerokości 10 pikseli spo- wodowało rozszerzenie elementu do szerokości 190 pikseli. Dzięki temu treść elementu została odsunięta od krawędzi, jednak aby za- chować jego początkową szerokość 170 pikseli, musimy odpowiednio zmniejszyć wartość własności width elementu div. Ustawimy ją na 150 pikseli. Takie modyfikowanie szerokości kolumn po każdej zmianie szerokości dopełnienia bywa męczące. Zwłaszcza kiedy mamy kilka kolumn. Ewentualnie można zastosować jednakowe marginesy do wszystkich elementów w kolumnie, ale to oznaczałoby konieczność dostosowa- nia wielu elementów, gdybyśmy zdecydowali się zmienić odległość kolumny od treści. Rozdział 4. Pozycjonowanie elementów 127 Proste rozwiązanie polega na dodaniu jeszcze jednego elementu div wewnątrz elementu div tworzącego kolumnę. div id=”column” �di�� id��col�mn�inner�� �di�� id��col�mn�inner�� h4 Nagłówek h4 /h4 p Nagłówek ten i akapit... /p ��di��� ��di��� /div Dopełnienie ustawiamy dla wewnętrznego elementu div: di��#col�mn {width:170px; padding:10px;} di��#inner�col�mn {padding:10px;} Dzięki temu można kontrolować dopełnienie kolumny za pomocą jednego stylu, unikając przy tym problemów ze zmianą szerokości kolumny (rysunek 4.14). Wewnętrzny element div nie ma określonego rozmiaru, a więc uwa- ga nr 2 na temat modelu blokowego jest prawdziwa. Treść została ściśnięta. Teraz zmieniając jedno ustawienie marginesu, możemy odsunąć wszystkie elementy kolumny od jej krawędzi. Rozmiar kolumny pozostanie bez zmian. Techniki dwóch elementów div będę używał w wielu układach stron prezentowanych w kolejnym rozdziale. Dlatego przed przejściem do dalszej części należy dobrze zrozumieć jej ideę. Wniosek z dotychczasowych rozważań jest następujący: we wszyst- kich zgodnych ze standardami przeglądarkach własność CSS width ustawia nie szerokość elementu, a znajdującej się w jego wnętrzu treści. Dopełnienie, marginesy i obramowanie są dodawane do całko- witego rozmiaru elementu, który ma zdefiniowaną szerokość. Teraz przyjrzymy się dwóm pozostałym kluczowym technikom w zakresie projektowania układów stron za pomocą CSS. Są to ele- menty pływające (własność float) i własność clear. Po wszystkich moich wywodach na temat zalet unikania prezentacyjnego kodu XHTML może wydać się dziwne, że byłem skłonny użyć dodatkowego znacznika, aby uzyskać efekt wizualny. Jednak elementy div, w przeciwieństwie do tabel, nie zmieniają w żaden sposób efektu wizualnego, chyba że zostaną celowo sfor- matowane. Dlatego wydaje mi się, że jest to wart uwagi kompromis, zwłaszcza dla początkujących użytkowników, którzy i tak muszą pamiętać o wielu innych rzeczach. Dzięki temu nie trzeba przy każdej zmianie dopełnienia lub marginesu wyciągać kalkulatora i na nowo obliczać szerokości kolumn. RySunek 4.14. dzięki za- stosowaniu dopełnienia dla wewnętrznego elementu div szerokość kolumny zdefi- niowanej przez zewnętrzny element div nie ulega zmianie 128 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Elementy pływające i ich czyszczenie Kolejną niezwykle przydatną techniką pomagającą w organizacji układu strony jest użycie elementów pływających w połączeniu z własnością clear. Element pływający pozostaje poza standardo- wym układem elementów na stronie. Elementy znajdujące się za elementem pływającym przesuwają się do góry, układając się obok niego, jeśli jest tam wystarczająco dużo miejsca. Własność clear pozwala określić, czy elementy znajdujące się za elementem pływa- jącym mają przesuwać się do góry czy nie. Jeśli na przykład mamy dwa akapity i chcemy, aby tylko pierwszy z nich pojawił się obok elementu pływającego, możemy ten drugi zatrzymać pod elementem pływającym za pomocą własności clear. Przyjrzymy się uważniej obu tym własnościom. Własność float Jednym z zastosowań własności float jest otaczanie obrazów teks- tem. Należy ona jednak także do fundamentów układów wieloko- lumnowych. Zaczniemy od otaczania obrazów tekstem. img {float:left; margin:0 4px 4px 0;} Powyższa reguła spycha obraz na lewo, dzięki czemu tekst będzie znajdował się z jego prawej strony (rysunek 4.15). RySunek 4.15. obraz pływający znajduje się poza standardowym układem strony. jeśli za nim znajdu- je się element tekstowy, tworzący go tekst będzie otaczał ten obraz Rozdział 4. Pozycjonowanie elementów 129 Aby własność float zadziałała poprawnie, kod XHTML musi wyglą- dać następująco: img .../ p ...tekst akapitu... /p Innymi słowy, używając własności float, żądamy, aby element został przesunięty jak najdalej w lewo (lub prawo w przypadku deklaracji float: right) w obrębie zawierającego go elementu — w tym przy- padku body. Akapit (na powyższym rysunku ma czerwoną ramkę) nie traktuje elementu pływającego jako bloku znajdującego się przed nim i dlatego również przesuwa się do lewego górnego rogu swojego ro- dzica. Jednak jego treść (tekst) zawija się wokół pływającego obrazu. Od tego już tylko krok do tworzenia pływających kolumn (rysu- nek 4.16). p {float:left; width:200px; margin:0;} img {float:left; margin:0 4px 4px 0;} RySunek 4.16. kiedy akapit o sta- łej szerokości zostaje ustawiony za pomocą własności float obok pły- wającego obrazu, tworzy kolumnę, a jego tekst nie otacza już obrazu Zasad dotyczących elementów pływa- jących jest wiele więcej. Można o nich przeczytać w książce Erica Meyera pod tytułem Cascading Style Sheets 2.0 Programmer’s Reference (McGraw- Hill Osborne Media, 2001). Cytując za tym autorem, „Kiedy do elementu zastosuje się własność float, zasady te powodują wyniesienie tego ele- mentu tak daleko w lewo i do góry, jak to tylko możliwe”. Mimo iż od wy- dania tej książki minęło kilka lat, jest ona doskonałym źródłem wiedzy na temat wewnętrznych mechanizmów rządzących CSS, której znalezienie gdzie indziej graniczy z cudem. Zastosowanie własności float zarówno do obrazu, jak i akapitu (o usta- lonych szerokościach) powoduje, że tekst przestaje owijać się wokół obrazu. Jest to jedna z głównych zasad tworzenia układów kolumno- wych przy użyciu elementów pływających. Elementy ustawiają się obok siebie jak kolumny, jeśli mają ustaloną szerokość i jest dla nich wystarczająco miejsca (obrazy zawsze mają określony rozmiar i nie trzeba ustawiać im rozmiaru w CSS, aby pływały). Jeśli ustalimy sze- rokość trzech elementów div i zastosujemy do nich własność float, otrzymamy trzy kontenery, do których można wstawiać inne elementy (które także mogą pływać). Praktyczne przykłady opisywanych technik przedstawione zostały w rozdziale 5. 130 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Własność clear Z własnością float zazwyczaj współwystępuje własność clear. Jeśli jeden element jest pływający, inny — jeśli starczy dla niego miejsca — ustawi się obok niego. Czasami jednak nie chcemy, aby tak się stało. Wolimy, aby ten drugi element pozostał pod elementem pły- wającym. Rysunek 4.17 przedstawia stronę zbudowaną z elementów złożonych z obrazu i tekstu otaczającego go z prawej strony. Efekt ten uzyskano dzięki zastosowaniu pływających obrazów. Jest to iden- tyczna sytuacja, jak na rysunku 4.16, tylko powtórzona trzy razy. RySunek 4.17. dzięki temu, że obok drugiego obrazu jest miejsce, trzeci obraz pływa obok niego — efekt ten nie był zamierzony Oto kod XHTML powyższej strony (nieco skrócony dla oszczędze- nia miejsca) img src=”../images/dartmoor-view.jpg” / p Oto piękny obraz okolicy Dartmoor... /p img src=”../images/english-cottage.jpg” / Rozdział 4. Pozycjonowanie elementów 131 p Do niedawna moja siostra mieszkała w tym pięknym domu... /p img src=”../images/windsor-castle_walls.jpg” / p Królowa Anglii... /p Kod CSS: p {margin:0 0 10px 0;} img {float:left; margin:0 4px 4px 0;} Każdy obraz powinien pływać po lewej stronie opisującego go teks- tu. Jeśli jednak tekst jest zbyt krótki i nie zajmuje całego miejsca dostępnego po prawej stronie obrazu, jak w przypadku drugiego akapitu na rysunku 4.17, następna para obraz – tekst zostanie pod- ciągnięta do góry, w to wolne miejsce. Układ ten jest poprawnie interpretowany przez przeglądarkę. Trzeci element ma wystarczająco miejsca, aby przenieść się obok drugiego, więc to robi. Nie jest to oczywiście zamierzony przez nasz efekt wizualny. Rozwiązaniem w tym przypadku jest dodanie niepływają- cego elementu do kodu XHTML i ustawienie jego własności clear w celu zatrzymania ostatniego elementu na dole. Poniżej znajduje się potrzebny kod XHTML z dodanym elementem div oraz odpowied- ni kod CSS: img src=”../images/dartmoor-view.jpg” / p Oto piękny obraz okolicy Dartmoor... /p img src=”../images/english-cottage.jpg” / p Do niedawna moja siostra mieszkała w tym pięknym domu... /p div class=”clearthefloats” /div img src=”../images/windsor-castle_walls.jpg” / p Królowa Anglii... /p W kodzie CSS musimy tylko dodać klasę clearthefloats: p {margin:0 0 10px 0;} img {float:left; margin:0 4px 4px 0;} .clearthefloats {clear:both;} Po wstawieniu dodatkowego elementu XHTML i klasy czyszczącej w CSS (która czyści elementy pływające z obu stron), strona wyglą- da tak, jak oczekiwaliśmy (rysunek 4.18). 132 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki RySunek 4.18. dzięki zastosowa- niu dodatkowego elementu układ strony prezentuje się bez zarzutów Nowy element dodany między drugim a trzecim akapitem znajduje się teraz (mimo że go nie widać, ponieważ nie zawiera żadnej treści) pod drugim obrazem. Dzięki temu, że trzeci obraz i akapit znajdują się za tym elementem w kodzie XHTML, są ustawione pod nim i pożądany efekt został osiągnięty. Prawidłowe posługiwanie się własnością clear jest bardzo ważną umiejętnością przy tworzeniu układów kolumnowych. W ramce „Metoda czyszczenia Asletta” opisałem technikę czyszczenia ele- mentów pływających przy użyciu tylko kodu CSS i jednej klasy w kodzie XHTML. Elementami pływającymi i własnością clear zajmiemy się później. Zaprezentowane do tej pory informacje wy- starczą początkującemu twórcy układów stron opartych na elemen- tach pływających. Teraz przejdziemy do własności position. Wartość both własności clear po- woduje, że element zostaje przenie- siony pod elementy pływające i prze- sunięty zarówno do prawej, jak i do lewej. Można było w tym przypadku zastosować wartość left, ale dzięki wartości both strona będzie dobrze wyglądać także wtedy, gdy obrazy będą pływać do prawej. Rozdział 4. Pozycjonowanie elementów 133 Metoda czyszczenia Asletta nazwa tej metody pochodzi od jej twórcy, tony’ego asletta (www.csscreator.com). Pozwala ona zmusić kontener, na przykład div, aby otaczał zagnieżdżoną w nim pływającą treść, czego normalnie nie robi. technika ta wyko- rzystuje pseudoelement cSS :after do wstawiania ukrytego fragmentu niepływającej treści (kropki z wysokoś- cią równą zero) za pozostałą treścią znajdującą się w kontenerze. dodatkowo do tej wstawianej treści zastoso- wana jest własność clear, przez co kontener musi ją otaczać. oto cały kod: oto cały kod: .clearfix:after { content: ”.”; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} /* Lewy ukośnik ukrywa kod przed przeglądarką IE dla komputerów Mac */ * html .clearfix {height: ��;} fix {height: ��;} x {height: 1 ;} .clearfix {display: block;} fix {display: block;} x {display: block;} /* koniec hacka */ można ten kod dodać na końcu arkusza stylów, aby był dostępny na każdej stronie (wstawiłem go na końcu pli- ku text_n_colors.css, który znajdziesz na FtP). od tej pory, aby utworzyć kontener zamykający w sobie pływającą treść, wystarczy zastosować do niego klasę clearfix, na przykład: div class=”clearfix” niektóre z zastosowań tej techniki: 1. utrzymanie stopki pod pływającymi kolumnami (układy złożone z pływających kolumn opisuję w utrzymanie stopki pod pływającymi kolumnami (układy złożone z pływających kolumn opisuję w rozdziale 5). klasę clearfix należy zastosować do elementu div zawierającego kolumny, dzięki czemu kontener ten zawsze będzie się rozszerzał w pionie na długość wystarczającą do pomieszczenia wszystkich kolumn. element div reprezentujący stopkę znajdujący się za elementem zawierającym kolumny będzie dzięki temu znajdował się zawsze pod najdłuższą kolumną. dodanie obramowania wokół kilku pływających elementów. elementy pływające należy umieścić w jednym 2. dodanie obramowania wokół kilku pływających elementów. elementy pływające należy umieścić w jednym kontenerze div i zastosować do tego kontenera klasę clearfix. dzięki temu elementy pływające pozostaną w kontenerze i wystarczy nadać odpowiedni styl jego ramce. jest to jedna z tych technik, o których nie wiadomo, do czego mogą się przydać, dopóki się ich nie potrzebuje. z pewnością jest to lepsze rozwiązanie niż wstawianie dodatkowych elementów div do źródła strony. należy pamiętać, że w przeglądarce ie 6 elementy pływające są niesłusznie zamykane w elementach div. jest to jeszcze jeden powód, aby najpierw sprawdzać stronę w przeglądarkach zgodnych ze standardami, a dopiero potem testować w ie 6. więcej informacji na temat opisywanej metody można znaleźć pod adresem www.positioniseverything.net/easycle aring.html. 134 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Własność position Sercem układu kolumnowego w CSS jest własność position. Pozwala ona zdefiniować punkt odniesienia, względem którego ele- ment ma być pozycjonowany na stronie. Zobaczmy, co to oznacza. Własność position może przyjmować jedną z czterech wartości: static, absolute, fixed i relative. Domyślna jest pierwsza z wymie- nionych. Miałem nieco problemów ze zrozumieniem działania tych wartości, kiedy po raz pierwszy natknąłem się na nie. Aby pomóc czytelnikowi uniknąć takich samych rozterek jak moje, przyjrzymy się tym czterem wartościom na czterech przykładach dokumentu złożonego z czterech akapitów. Zmianie będzie ulegać tylko war- tość własności position trzeciego akapitu. Pozostałe akapity cały czas będą miały tę własność ustawioną na wartość domyślną. Aby ułatwić sobie zadanie, trzeciemu akapitowi nadałem identyfikator o nazwie specialpara. Pozycjonowanie statyczne Najpierw przyjrzymy się naszym akapitom z własnością position ustawioną na static (rysunek 4.19). RySunek 4.19. jeśli wszystkie cztery akapity mają zdefiniowaną własność position jako static, ukła- dają się jeden pod drugim zgodnie ze standardowym rozkładem ele- mentów na stronie Rozdział 4. Pozycjonowanie elementów 135 Pozycjonowanie statyczne polega na ułożeniu elementów jeden pod drugim. Odległość między nimi jest równa ich domyślnym margi- nesom. Aby zmienić ten sekwencyjny układ elementów pozycjonowania statycznego na stronie, trzeba użyć jednej z pozostałych trzech war- tości własności position. Pozycjonowanie względne Ustawiamy własność position trzeciego akapitu na wartość rela- tive. Dzięki temu możemy przesuwać ten element względem jego domyślnego położenia za pomocą własności top, right, bottom i left. Zazwyczaj wystarczą tylko wartości top i left. Poniższa re- guła stylistyczna: p#specialpara {position:relative; top:30px; left:20px;} wywoła efekt widoczny na rysunku 4.20. RySunek 4.20. element pozycjo- nowany względnie można przesu- wać w stosunku do jego domyślne- go położenia za pomocą własności top, right, bottom i left Lewy górny róg akapitu został przesunięty o 30 pikseli w dół i 20 pikseli w prawo. Jak widać, mimo że trzeci akapit został przesunięty, nic więcej na stronie się nie zmieniło. Miejsce zajmowane przez ten akapit, kiedy był pozycjonowany statycznie, nie zostało zwolnione. Podobnie pozostałe elementy — nadal są na swoich pierwotnych miejscach. 136 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Należy pamiętać, że przesuwając element w ten sposób, trzeba wcześniej wygospodarować dla niego miejsce. W dokumencie za- prezentowanym na rysunku 4.19 należało przesunąć czwarty akapit w dół o 30 pikseli lub więcej. To pozwoliłoby uniknąć nałożenia się na niego trzeciego akapitu po zmianie jego położenia. Pozycjonowanie bezwzględne Pozycjonowanie bezwzględne to zupełnie inna bajka niż pozycjo- nowanie statyczne i względne. Pozwala całkowicie wytrącić element z normalnego układu dokumentu. Zmodyfikujemy kod z poprzed- niego przykładu, zmieniając tylko wartość własności position z relative na absolute. p#specialpara {position:absolute; top:30px; left:20px;} Rezultat tego działania przedstawia rysunek 4.21. Aby przesunąć element do góry i w lewo, należy użyć wartości ujemnych. RySunek 4.21. Pozycjonowanie bezwzględne polega na całkowi- tym wytrąceniu elementu z normal- nego układu strony i położeniu go względem innego elementu — w tym przypadku elementu body Jak widać na rysunku 4.21, miejsce wcześniej zajmowane przez trzeci akapit zostało zajęte przez kolejny. Element pozycjonowany bezwzględnie jest całkowicie niezależny od innych otaczających go w kodzie XHTML elementów. Jego położenie jest obliczane względem elementu najwyższego poziomu, czyli body. W ten sposób dobrnęliśmy do etapu, kiedy musimy zapoznać się z pojęciem kon- tekstu pozycjonowania, które będzie jeszcze wielokrotnie powracać w tym rozdziale. Zacznijmy od tego, że domyślnym kontekstem pozycjonowania elementu pozycjonowanego bezwzględnie jest element body. Jak widać na rysunku 4.21, własności top i left przesunęły aka- Rozdział 4. Pozycjonowanie elementów 137 pit względem elementu body — elementu najwyższego poziomu w naszym dokumencie, zamiast względem jego domyślnej pozycji w dokumencie. Ponieważ kontekstem pozycjonowania elementu pozycjonowanego bezwzględnie jest element body, pozycjonowany element przesuwa się w miarę przewijania strony, aby cały czas pozostać w tym samym miejscu. Element body także przesuwa się w miarę przewijania strony. Zanim nauczymy się pozycjonować bezwzględnie elementy w od- niesieniu do innych niż body elementów, przyjrzymy się ostatniej z wartości własności position. Pozycjonowanie stałe Pozycjonowanie stałe (fixed) jest podobne do bezwzględnego. Różnica polega na tym, że element jest pozycjonowany w odniesie- niu do okna przeglądarki. Dzięki temu dany element nie przesuwa się w miarę przewijania strony. Rysunki 4.22 i 4.23 przedstawiają efekt pozycjonowania stałego. RySunek 4.22. Pozycjonowanie stałe jest podobne do pozycjono- wania bezwzględnego RySunek 4.23. Różnica między pozycjo- nowaniem stałym a bezwzględnym staje się widoczna po przewinięciu strony 138 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Dzięki „przykuciu” elementu do okna przeglądarki można symu- lować odradzane ramki. Można na przykład utworzyć element na- wigacyjny, który będzie cały czas w tym samym miejscu, unikając jednocześnie problemów z wieloma dokumentami składającymi się na jedną stronę. Pozycjonowanie stałe nie działa jednak w przeglą- darce IE 6, ale działa w IE 7. Elegancki sposób obejścia problemu z pozycjonowaniem stałym w przeglądarce IE 6 został opisany na stronie http://tagsoup.com/cookbook/css/fixed/. Kontekst pozycjonowania Ponieważ kontekst pozycjonowania jest bardzo ważny dla tych, którzy chcą zrezygnować z tabel jako szkieletu strony, omówimy to zagadnienie szerzej. Zasada jest prosta — pozycjonowanie konteks- towe polega na przesuwaniu danego elementu względem innego za pomocą własności top, right, left i bottom. Ten drugi element jest właśnie kontekstem pozycjonowania. Jak wiemy z podrozdziału „Pozycjonowanie bezwzględne”, kontekstem pozycjonowania ele- mentów pozycjonowanych bezwzględnie jest element body — chyba że go zmienimy. Na przykład element body zawiera wszystkie inne elementy strony. Kontekstem pozycjonowania może być jednak do- wolny element będący przodkiem innego elementu, jeśli jego włas- ności position nada się wartość relative. Przyjrzyjmy się poniższemu kodowi: body div id=”outer” Zewnętrzny element div div id=”inner” Trochę tekstu... /div /div /body Kod CSS: div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;} div#inner_div {top:10px; left:20px; background:#AAA;} RySunek 4.24. dwa zagnieżdżone akapity. Górna krawędź zewnętrz- nego elementu div jest czerwona, a wewnętrzny element div jest szary. Ponieważ wewnętrzny div jest statyczny, własności top i left są ignorowane Aby spełnić wymagania dotyczące składni dokumentów, tekst powi- nien znajdować się w znaczniku p. Dla uproszczenia jednak użyłem znacznika div. Rozdział 4. Pozycjonowanie elementów 139 Po dokładniejszym przeanalizowaniu tego kodu nasuwa się pytanie: dlaczego wewnętrzny element div nie jest odsunięty o 10 pikseli w dół i 20 pikseli w lewo względem zewnętrznego elementu div? Zamiast tego górne lewe rogi obu tych elementów znajdują się w tym samym punkcie. Powodem jest pozycjonowanie statyczne obu elementów. Oznacza to, że elementy te wpasowują się w domyślny rozkład elemen- tów na stronie. Ponieważ zewnętrzny element nie ma żadnej treści, ele- ment wewnętrzny zaczyna się w tym samym miejscu. Własności top, right, bottom i left działają tylko, jeśli element jest pozycjonowany względnie, bezwzględnie lub w sposób stały. Zobaczmy, co się stanie, kiedy zmienimy pozycjonowanie na bezwzględne (absolute). div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;} div#inner_div {position:absol�te; top:10px; left:20px; background:#AAA;} W odniesieniu do czego jest pozycjonowany ten element? Ponieważ nie ma żadnego innego elementu pozycjonowanego względnie, element ten będzie pozycjonowany bezwzględnie w odniesieniu do elementu body. Górna krawędź zewnętrznego elementu div jest czerwona, dzięki czemu widać, gdzie się znajduje. Marginesy odsuwają ją 50 pikseli w dół i 40 pikseli w prawo względem górnego rogu okna prze- glądarki. Ponieważ wewnętrzny element div jest pozycjonowany bezwzględnie, jego położenie jest określane w odniesieniu do ele- mentu body, ponieważ element body jest domyślnym kontekstem pozycjonowania. Element ten ignoruje swojego rodzica (zewnętrzny element div) i ustawia się zgodnie z wartościami własności top i left względem elementu body, co widać na rysunku 4.25. 140 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki RySunek 4.25. mimo że we- wnętrzny element div (szare tło) znajduje się w kodzie XHtml we- wnątrz zewnętrznego elementu div (z czerwoną górną krawędzią), dzięki deklaracji position: absolute ustawia się względem elementu body Sprawnie posługując się marginesa- mi i dopełnieniem, można w więk- szości przypadków przy projekto- waniu układu strony poradzić sobie tylko za pomocą pozycjonowania statycznego. Wielu początkujących użytkowników CSS zmienia rodzaj pozycjonowania prawie wszystkich elementów, przez co trudno jest im nad nimi potem zapanować. Nie należy zmieniać domyślnego pozy- cjonowania elementu, jeśli nie jest to absolutnie konieczne. RySunek 4.26. dzięki nadaniu zewnętrznemu elementowi div pozycjonowania względnego jego pozycjonowani bezwzględnie po- tomkowie są rozmieszczani wzglę- dem niego zgodnie z wartościami własności top i left Jeśli teraz zmienimy pozycjonowanie zewnętrznego elementu div na względne (relative), to kontekstem pozycjonowania pozycjonowa- nego bezwzględnie wewnętrznego elementu div będzie zewnętrzny div, co widać na rysunku 4.26. Teraz własności top i left we- wnętrznego elementu div ustawiają go w odniesieniu do zewnętrz- nego elementu div. Gdybyśmy obecnie zdefiniowali własności top i left zewnętrznego elementu div na wartości inne niż zero, we- wnętrzny element div przesunąłby się wraz z nim, ponieważ to jest jego kontekst pozycjonowania. Jasne? Teraz przejdziemy do omawiania własności display, a później prze- analizujemy praktyczny przykład zastosowania własności position. Rozdział 4. Pozycjonowanie elementów 141 Własność display domyślnie element blokowy domyślnie element liniowy Poza własnością position każdy element ma także własność dis- play. Mimo iż własność ta może przyjmować kilka wartości, naj- częściej używane są dwie: block i inline. Tym, którzy przespali poprzednie rozdziały, przypominam różnicę między elementami blokowymi (block) a liniowymi (inline): • Elementy blokowe, na przykład akapity, nagłówki czy listy, ukła- dają się jeden nad drugim w oknie przeglądarki. • Elementy liniowe, na przykład a, span czy img, układają się jeden obok drugiego w oknie przeglądarki. Przechodzą do nowej linii dopiero wówczas, gdy w aktualnej nie ma dla nich wystarczająco dużo miejsca. Możliwość zamiany elementów blokowych w liniowe i odwrotnie, jak poniżej: p {display:inline;} — domyślnie element blokowy a {display:block} — domyślnie element liniowy bywa bardzo przydatna, ponieważ pozwala zmusić element liniowy do tego, aby zapełnił zawierający go element. Zastosujemy tę funkcję później do odnośników przy tworzeniu rozwijalnych menu. Jeszcze jedną wartością własności display, o której warto wspo- mnieć, jest none. Powoduje ona, że element i wszystkie zagnieżdżone w nim elementy stają się niewidoczne na stronie. Miejsce normalnie zajmowane przez ten element nie jest wtedy przez niego zajmowane. Wygląda to tak, jakby kod XHTML tego elementu w ogóle nie ist- niał (jest jeszcze własność visibility, której wartość hidden powo- duje, że element jest niewidoczny, ale nadal zajmuje przeznaczone dla niego miejsce). Dalej nauczymy się przełączać własność display elementów pomiędzy wartościami none i block w odpowiedzi na na- jechanie na te elementy kursorem myszy lub opuszczenie ich. Dzięki temu będziemy w stanie utworzyć menu rozwijalne. Także język JavaScript pozwala zmieniać wartość tej własności w odpowiedzi na działania użytkownika. Zobaczmy przykładową stronę wykorzystu- jącą poznane ostatnio własności position i display. 142 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Praktyczne użycie własności position i display Latem 2007 roku pisałem arkusze stylów dla icyou.com, witryny, na której można obejrzeć filmy wideo dotyczące tematyki zdrowotnej. Jej właścicielem jest firma, w której pracuję: Benefitfocus.com. Prawie na każdej stronie tej witryny można znaleźć zestaw miniatur, któ- rych kliknięcie powoduje odtworzenie filmu. Aby zaoszczędzić nie- co miejsca w oknie przeglądarki, opisy filmów zdecydowaliśmy się umieścić w chmurkach, które pojawiają się po najechaniu na minia- turę kursorem (rysunek 4.27). RySunek 4.27. Po najechaniu kursorem na miniaturę w witrynie icyou.com wyświetla się chmurka z informacją o filmie Oto jak to zrobiliśmy. Najpierw przedstawiam kod XHTML jednej miniatury: div class=”video_selection” a href=”#” img src=”../images/23_diabetes_testimonial- �.jpg” alt=”Blood pressure video” / /a Rozdział 4. Pozycjonowanie elementów 143 p Bobby is a #2 Diabetic who weighed 274 pounds. After a change in diet he is no longer on medication. Runtime: 46 sec. /p h2 a href=”#” Living with Diabetes; Bobby’s story /a /h2 /div Kod ten pozbawiony reguł stylistycznych daje w przeglądarce na- stępujący efekt (rysunek 4.28). RySunek 4.28. wszystkie elementy potrzebne do utworzenia miejsca na miniaturę i związaną z nią chmurkę Dodajemy podstawowe style dla powyższego kodu XHTML: div {width:92px; border:2px solid #069; padding:5px;} h2, p {font-size:.7em; font-family:Arial, sans-serif; margin:0;} p {width:80px; border:1px solid gray; padding:.3em; background-color:#FFD;} RySunek 4.29. Pierwszy krok to odpowiednie sformatowanie wyglądu i szerokości elementów 144 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Elementowi div, który pełni funkcję kontenera, ustawiliśmy obra- mowanie oraz dodaliśmy dopełnienie, aby odsunąć tekst od krawę- dzi (oczywiście zwiększając równocześnie jego pierwotną szero- kość). Teraz element ten ma szerokość 106 pikseli (92+2+2+5+5). Dodatkowo zmieniliśmy własności czcionki w elementach h2 i p oraz usunęliśmy ich domyślne marginesy. Podobnie sformatowaliśmy akapit, ustawiając mu dopełnienie i obra- mowanie. Element ten będzie naszą chmurką. Teraz zaczyna się zabawa. Wyjmiemy nasz akapit z normalnego układu elementów na stronie, zmieniając jego własność position na absolute. Jednocześnie ustawimy tę samą własność elementu div na relative, aby stał się kontekstem pozycjonowania akapitu. Należy pamiętać, że przodkiem elementu pozycjonowanego bezwzględnie musi być element pozycjonowany względnie. W tym przypadku ele- ment div jest rodzicem elementu p, a więc wszystko jest w porządku (rysunek 4.30). div {position:relati��e; width:92px; border:2px solid #069; padding:5px;} h2, p {font-size:.7em; font-family:Arial, sans-serif;} p {position:absolute; left:96px; top:15px; width:80px; border:�px solid gray; padding:.3em; background-color:#FFD;} Własności left i top akapitu przesunęły go nieco w prawo i w dół, dzięki czemu znajduje się on po prawej stronie obrazka. Ostatni krok to ukrycie chmurki dopóki użytkownik nie najedzie kursorem na element div. Do tego celu użyjemy pseudoklasy (rysunki 4.31a i b). Do tego celu użyjemy pseudoklasy :hover RySunek 4.30. teraz bezwzględ- nie pozycjonowany element re- prezentujący chmurkę znajduje się względem elementu div w takiej pozycji, jak chcemy Rozdział 4. Pozycjonowanie elementów 145 div {position:relative; width:92px; border:2px solid #069; padding:5px;} h2, p {font-size:.7em; font-family:Arial, sans-serif; margin:0;} p {position:absolute; display:none; width:80px; left:96px; top:15px; border:1px solid gray; padding:.3em; background- color:#FFD;} di��:ho��er p, p:ho��er {display:block;} RySunki 4.31a i b. dzięki użyciu pseudoklasy :hover w połączeniu z własnością display uzyskaliśmy efekt chmurki pojawiającej się w wyniku najechania kursorem na obszar zajmowany przez element div Teraz akapit z opisem jest ukryty, ponieważ jego własność display została ustawiona na wartość none. Jednak ostatni wiersz wyróż- nionego kodu mówi: jeśli kursor znajdzie się nad elementem div, wyświetl akapit; dodatkowo jeśli kursor znajdzie się nad akapitem (co może się zdarzyć, kiedy użytkownik przesunie kursor z elemen- tu div na akapit), nie ukrywaj tego akapitu. Gdy użytkownik usunie kursor znad elementu div lub wyświetlonego akapitu, reguła prze- staje działać i akapit znika. W ten sposób utworzyliśmy prosty efekt chmurki przy użyciu samego kodu CSS. Jest jednak pewien problem z przeglądarką IE 6. Obsługuje ona pseudoklasę :hover tylko dla elementu a. 146 cSS. witRyny inteRnetowe Szyte na miaRę. autoRytety inFoRmatyki Dlatego aby przeglądarka ta działała zgodnie z naszymi oczekiwa- niami, musimy dołączyć plik JavaScript csshover.htc (zobacz ramkę „Pseudoklasa :hover w przeglądarce IE 6”). body {behavior:url(csshover.htc);} Należy zauważyć, że powyższa reguła przyjmuje, iż plik csshover.htc znajduje się w tym samym folderze co plik XHTML. Zazwyczaj plik ten umieszcza się w osobnym folderze, razem z innymi plikami zawierającymi kod JavaScript dołączanymi do strony za pomocą adresów względnych. Pseudoklasa :hover w przeglądarce IE 6 Przed powstaniem cSS 2 funkcję reagowania na najechanie kursorem miały tylko odnośniki. Pseudoklasa :hover pozwala na określenie zachowania dowolnego elementu w chwili najechania na niego kursorem. na przykład poniższe reguły cSS powodują, że niebieskie tło elementu po najechaniu na niego kursorem zmieni się w czerwone. div#respond {background-color:blue;} div#respond:hover {background-color:red;} jest to bardzo przydatna funkcja, która stanowi podstawę menu rozwija- nych opartych na cSS. niestety, ie 6 obsługuje tę pseudoklasę tylko dla ele- mentu a. na szczęście bystry programista Peter nederlof wpadł na pomysł, jak rozwiązać ten problem. utworzył plik o nazwie csshover.htc, który trzeba dołączyć do arkusza stylów za pomocą specjalnej własności behavior (www.xs4all.nl/~peterned/hovercraft.html): body {font:1em verdana, arial, sans-serif; behavior: url(css/csshover.htc);} w tym przypadku, jak wskazuje adres uRl podany w regule, utworzyłem nowy folder o nazwie css i w nim umieściłem plik csshover.htc. aby umieścić ten plik w innym miejscu, należy zmodyfikować odpowiednio adres uRl. Po dołączeniu pliku csshover.htc do arkusza stylów przeglądarka IE 6 poprawnie obsługuje pseudoklasę :hover . Dzięki temu rozdziałowi czytelnik powinien opanować następujące umiejętności: • Tworzenie kolumny z wewnętrznym elementem div i zagnież- dżonymi elementami. • Czyszczenie elementów pływających (własność clear). • Pozycjonowanie i wyświetlanie elementów za pomocą własności position i display. Techniki te są podstawą tworzenia układów stron w CSS, co jest tematem kolejnego rozdziału. Plik csshover.htc znajduje się wśród plików dotyczących tego rozdziału na FTP oraz w katalogu Stylib CSS w folderze JavaScript.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS. Witryny internetowe szyte na miarę. Autorytety informatyki. Wydanie II
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ą: