Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
01268 012731 11048843 na godz. na dobę w sumie
CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny - książka
CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny - książka
Autor: Liczba stron: 440
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-520-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).
Jest to najnowsza książka z serii przewodników encyklopedycznych O'Reilly o tworzeniu stron internetowych, w skład której wchodzą również takie pozycje, jak: 'HTML: The Definitive Guide', 'JavaScript: The Definitive Guide', 'Dynamic HTML: The Definitive Guide', 'Web Design in a Nutshell'

Kaskadowe arkusze stylów (CSS) z pewnością zaznaczą swoje istnienie w Internecie. Przy dobrych implementacjach w Internet Explorerze 5.0 i Operze 3.6 i obsłudze CSS1 w przeglądarce Netscape Mozilla, CSS szybko stanie się użytecznym, niezawodnym i mocnym narzędziem dla autorów stron WWW.

CSS jest zaakceptowaną przez W3C metodą wzbogacania wyglądu witryn. Książka zawiera pełny, szczegółowy przegląd aspektów CSS1 i pozycjonowania CSS, a także przedstawia pokrótce CSS2. Dokładnie zbadano każdą właściwość i opisano jej współdziałanie z innymi właściwościami; podano także informacje o tym, jak uniknąć częstych pomyłek interpretacyjnych.

Jest to pierwsza pozycja, w której opisano obsługę CSS w poszczególnych przeglądarkach, nie poprzestając na ogólnych i teoretycznych wyjaśnieniach. Zarówno dla autorów stron, jak i programistów książka ta jest pełnym przewodnikiem efektywnego stosowania CSS.

Książka jest także adresowana do początkujących autorów stron, którzy już rozpoczęli naukę znaczników i atrybutów HTML. Pozwoli im nie powtarzać błędów poprzedników i osiągnąć wymierne korzyści z poprawnego implementowania CSS.

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

Darmowy fragment publikacji:

CSS. Kaskadowe arkusze styl(cid:243)w. Przewodnik encyklopedyczny Autor: Eric A. Meyer ISBN: 83-7197-520-1 Tytu‡ orygina‡u: Cascading Style Sheets. The Definitive Guide Jest to najnowsza ksi„¿ka z serii przewodnik(cid:243)w encyklopedycznych O(cid:146)Reilly o(cid:160) tworzeniu stron internetowych, w sk‡ad kt(cid:243)rej wchodz„ r(cid:243)wnie¿ takie pozycje, jak: (cid:132)HTML: The Definitive Guide(cid:148), (cid:132)JavaScript: The Definitive Guide(cid:148), (cid:132)Dynamic HTML: The Definitive Guide(cid:148), (cid:132)Web Design in a Nutshell(cid:148) Kaskadowe arkusze styl(cid:243)w (CSS) z pewno(cid:156)ci„ zaznacz„ swoje istnienie w Internecie. Przy dobrych implementacjach w Internet Explorerze 5.0 i Operze 3.6 i obs‡udze CSS1 w przegl„darce Netscape Mozilla, CSS szybko stanie siŒ u¿ytecznym, niezawodnym i(cid:160) mocnym narzŒdziem dla autor(cid:243)w stron WWW. CSS jest zaakceptowan„ przez W3C metod„ wzbogacania wygl„du witryn. Ksi„¿ka zawiera pe‡ny, szczeg(cid:243)‡owy przegl„d aspekt(cid:243)w CSS1 i pozycjonowania CSS, a tak¿e przedstawia pokr(cid:243)tce CSS2. Dok‡adnie zbadano ka¿d„ w‡a(cid:156)ciwo(cid:156)(cid:230) i opisano jej wsp(cid:243)‡dzia‡anie z innymi w‡a(cid:156)ciwo(cid:156)ciami; podano tak¿e informacje o tym, jak unikn„(cid:230) czŒstych pomy‡ek interpretacyjnych. Jest to pierwsza pozycja, w kt(cid:243)rej opisano obs‡ugŒ CSS w poszczeg(cid:243)lnych przegl„darkach, nie poprzestaj„c na og(cid:243)lnych i teoretycznych wyja(cid:156)nieniach. Zar(cid:243)wno dla autor(cid:243)w stron, jak i programist(cid:243)w ksi„¿ka ta jest pe‡nym przewodnikiem efektywnego stosowania CSS. Ksi„¿ka jest tak¿e adresowana do pocz„tkuj„cych autor(cid:243)w stron, kt(cid:243)rzy ju¿ rozpoczŒli naukŒ znacznik(cid:243)w i atrybut(cid:243)w HTML. Pozwoli im nie powtarza(cid:230) b‡Œd(cid:243)w poprzednik(cid:243)w i osi„gn„(cid:230) wymierne korzy(cid:156)ci z poprawnego implementowania CSS. IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl 6/.3;+ 3.+o  $##  Upadek chwały Sieci ............................................................................................................... 13 CSS na ratunek......................................................................................................................... 15 Ograniczenia CSS .................................................................................................................... 19 Łączne użycie CSS i HTML.................................................................................................... 21 Podsumowanie ......................................................................................................................... 28 3.+o  #//8367869896+  Podstawowe reguły .................................................................................................................. 32 Grupowanie.............................................................................................................................. 35 Selektory klasy i identyfikatora ............................................................................................... 41 Pseudoklasy i pseudoelementy ................................................................................................ 45 Struktura................................................................................................................................... 51 Dziedziczenie........................................................................................................................... 55 Specyficzność .......................................................................................................................... 57 Kaskada.................................................................................................................................... 61 Klasyfikacja elementów........................................................................................................... 64 Podsumowanie ......................................................................................................................... 68 3.+o  /.2378;+683-  Kolory ...................................................................................................................................... 69 Jednostki długości.................................................................................................................... 78 Wartości procentowe ............................................................................................................... 84 URL ......................................................................................................................................... 84   6/.3;+ Jednostki CSS2 ........................................................................................................................ 86 Podsumowanie ......................................................................................................................... 87 3.+o  o+-;3-8/789  Manipulowanie tekstem........................................................................................................... 89 Podsumowanie ....................................................................................................................... 123 3.+o -32  Rodziny czcionek................................................................................................................... 126 Waga czcionki........................................................................................................................ 132 Wielkość czcionki.................................................................................................................. 139 Style i warianty ...................................................................................................................... 145 Skrócony zapis — właściwość font....................................................................................... 149 Dobieranie czcionek .............................................................................................................. 152 Podsumowanie ....................................................................................................................... 154 3.+o 3368o+  Kolory .................................................................................................................................... 156 Złożone tła ............................................................................................................................. 169 Podsumowanie ....................................................................................................................... 197 3.+o 9./o+6+  Pudełka podstawowych elementów....................................................................................... 199 Marginesy czy dopełnienia? .................................................................................................. 202 Marginesy .............................................................................................................................. 203 Ramki..................................................................................................................................... 217 Dopełnienie ............................................................................................................................ 232 Pływanie i tamowanie............................................................................................................ 237 Listy ....................................................................................................................................... 248 Podsumowanie ....................................................................................................................... 254 3.+o 36+83;+2/;9+2/  Podstawowe pudełka ............................................................................................................. 255 Elementy blokowe ................................................................................................................. 256 Elementy pływające............................................................................................................... 271 Elementy wewnętrzne............................................................................................................ 281 Podsumowanie ....................................................................................................................... 295 6/.3;+  3.+o 3-323;+2/  Pojęcia ogólne........................................................................................................................ 297 Pozycjonowanie względne..................................................................................................... 317 Pozycjonowanie bezwzględne ............................................................................................... 320 Pozycjonowanie ustalone....................................................................................................... 324 Zestawianie pozycjonowanych elementów w stos ................................................................ 326 Podsumowanie ....................................................................................................................... 330 3.+o ##7436/2/;467o3  Zmiany w stosunku do CSS1................................................................................................. 331 Selektory CSS2 ...................................................................................................................... 333 Czcionki i tekst ...................................................................................................................... 345 Zawartość generowana .......................................................................................................... 347 Przystosowanie do środowiska .............................................................................................. 351 Ramki..................................................................................................................................... 352 Tabele..................................................................................................................................... 352 Typy mediów i @-reguły....................................................................................................... 353 Podsumowanie ....................................................................................................................... 355 3.+o ##;+-  Projekty przebudowy ............................................................................................................. 359 Sztuczki i kruczki................................................................................................................... 377 3.+8/ +73,##  3.+8/ 697780;$  3.+8/ o+-;3-##  3.+8/ $+,/+3,7o91##   #363;.  Chociaż nasz wysiłek podczas projektowania stron WWW może skupiać się głównie na wybiera- niu właściwych kolorów i nadawaniu stronie najlepszego wyglądu, to jednak najwięcej czasu po- święcamy martwiąc się o wygląd i rozmieszczenie tekstu. Obawy te spowodowały wprowadzenie do HTML, znaczników takich jak FONT i CENTER , które pozwalają na pewną formę kon- troli tego, jak tekst będzie wyglądał i jak będzie rozmieszczony. Właśnie dlatego duża część CSS dotyczy właściwości wpływających na tekst w taki czy inny spo- sób. Właściwości w CSS1 podzielone są na dwie części: właściwości tekstu i właściwości czcio- nek. Ten rozdział poświęcony jest pierwszej grupie. W następnym rozdziale podejmiemy temat czcionek — są one na swój sposób dosyć skomplikowane, więc zasługują na osobne omówienie. Można zastanawiać się, jaka jest różnica pomiędzy tekstem a czcionkami. Ujmując to prosto — tekst jest treścią. Czcionka użyta do jego wyświetlenia jest tylko jednym ze sposobów na zmia- nę wyglądu tekstu. Zanim zajmiemy się w czcionkami, powinniśmy omówić kilka prostszych spo- sobów wpływania na wygląd tekstu. Poza tym pewne rzeczy, którymi zajmiemy się tutaj, przyda- dzą się przy omawianiu właściwości czcionek, więc większy sens ma omówienie właściwości tekstu w pierwszej kolejności. Dzięki właściwościom tekstu można wpłynąć na pozycję tekstu względem reszty linijki, ustawić indeks górny, podkreślenie i zmienić wielkość liter. Można nawet w pewnym stopniu symulować użycie klawisza tabulatora z maszyny do pisania. +48;6(cid:11);2+2/433/(cid:17)36328+2/(cid:20) Najlepiej zacząć od tego, jak można wpłynąć na poziome umiejscowienie tekstu w linii. Nie jest to tym samym, czym jest rzeczywiste pozycjonowanie, w którym tekst ustawiany jest względem sa- mej strony. O tych właściwościach myślmy raczej jak o sposobach wpłynięcia na rozmieszczenie linii tekstu, tak jak robimy to pisząc raport lub tworząc biuletyn.  -(cid:4)-+  3.+o  o+-;3-8/789 Przy formatowaniu tekstu w Internecie jednym z najbardziej poszukiwanych efektów jest wcinanie pierwszej linii akapitu (kolejnym jest chęć wyeliminowania pustej linii pomiędzy akapitami, co omówimy w rozdziale 7.). Niektórzy autorzy stron rozwiązują ten problem poprzez wstawienie małego przezroczystego obrazka przed pierwszą literą akapitu (popychając w ten sposób tekst da- lej). Inni używają zupełnie niestandardowego znacznika SPACER. Dzięki CSS istnieje lepszy spo- sób na uzyskanie podobnego efektu. 8/8(cid:4)2./28 +683- długość | procenty +683.32+ /.-32+ .2377(cid:21).3 0 tak elementów blokowych Uwaga: wartości procentowe odnoszą się do szerokości elementu rodzica. Każdy element używający wcięcia tekstu (text-indent) może mieć wciętą pierwszą linię o daną długość (nawet ujemną). Najczęstszym użyciem tej właściwości jest wcięcie pierwszej linii akapitów: P {text-indent: 0.25in;} Powyższa reguła mówi, że wcięcie pierwszej linii każdego akapitu będzie wynosiło ćwierć cala, tak jak to przedstawiono na rysunku 4.1. 792/  -2+2/8/789 Właściwość text-indent może być nadana każdemu elementowi blokowemu, takiemu jak PRE, H1 czy BLOCKQUOTE. Nie można nadać jej elementom stanowiącym część ciągu tekstu (inline elements), takim jak STRONG lub A, tak samo jak nie można używać jej w przypadku ele- mentów podmienianych, takich jak obrazki (co oczywiście ma sens). Jeśli jednak w pierwszej linii elementu blokowego (np. akapitu) znajdzie się obrazek, zostanie on przesunięty razem z tekstem, tak jak to przedstawiono na rysunku 4.2. Można zastosować ujemne wartości wcięcia tekstu, co może zostać użyte na wiele interesujących sposobów. Najbardziej popularnym jest „wiszące wcięcie”, gdzie pierwsza linia jest wysunięta z lewej strony akapitu, tak jak to przedstawiono na rysunku 4.3. P {text-indent: -4em;} +2493;+2/8/78/  792/   -(cid:18)-+8/7893,6+(cid:23); 792/   /2/;-(cid:18)-/8/789 Jak widać na rysunku 4.3, istnieje niebezpieczeństwo przy ustawianiu ujemnych wartości dla wcięcia tekstu. Pierwsze dwa słowa („This is”) zostały obcięte przez lewy brzeg okna przeglądarki. Aby przy wyświetlaniu zapobiec takim problemom, doradza się użycie marginesu, który pomieści ujemne wcięcie, tak jak zrobiono to w kolejnym przykładzie (rysunek 4.4): P {text-indent: -4em; padding-left: 4em;} 792/   +2/2/9/2-;-(cid:18) Ujemne wcięcie czasami może zostać użyte w korzystny sposób. Rozważmy następujący przy- kład, zademonstrowany na rysunku 4.5. Dodajmy obrazek do tej mieszanki: P.hang {text-indent: -30px;} P CLASS= hang IMG SRC= floater.gif WIDTH= 30px HEIGHT= 60px ALIGN= left ALT= Floated This paragraph has a negatively indented first line, which overlaps the floated image which precedes the text. Subsequent lines do not overlap the image, since they are not indented in any way. /P Przy użyciu tej prostej techniki można zrealizować wiele ciekawych projektów. Rysunek 4.6 przedstawia przykład tekstu, w którym pierwsza linia została wcięta o –40px.   3.+o  o+-;3-8/789 792/   o;+-3,6+/9/2/;-(cid:18)-/8/789 792/   /2/;-(cid:18)-+4o;+-/3,6+ Do określenia głębokości wcięcia pierwszej linii akapitu można stosować dowolne jednostki. Do- datkowo można używać wartości procentowych. W takim przypadku procenty odnoszą się do sze- rokości elementu rodzica wcinanego elementu. Jeśli zatem ustawimy wartość wcięcia na 5 , to pierwsza linia odnośnego elementu zostanie wcięta na 5 szerokości elementu rodzica, tak jak to przedstawiono na rysunku 4.7. DIV {width: 400px;} P {text-indent: 5 ;} DIV P This paragraph is contained inside a DIV which is 400px wide, so the first line of the paragraph is indented 20px (400 * 5 = 20). This is because percentages are computed with respect to the width of the parent element. /P /DIV 792/   -(cid:18)-/8/78936/32/+433-463-/28(cid:23); Wcięcia będą nadane jedynie pierwszej linii elementu, nawet jeśli wstawimy znaczniki końca linii (BR). Przedstawia to rysunek 4.8: DIV {width: 400px;} P {text-indent: 5 ;} DIV +2493;+2/8/78/  P This paragraph is contained inside a DIV which is 400px wide, so the first line of the paragraph is indented 20px (400 * 5 = 20). Subsequent lines within the same element are not indented, BR even if they follow a BR line-break. /P P Once again, the first line of this paragraph is indented by 2s0px, but other lines in the same element are not. /P /DIV 792/   -(cid:18)-+2+3q-+2 Ciekawą cechą text-indent jest to, że jest właściwością dziedziczoną, ale dziedziczona jest wyliczona wartość, a nie wartość zadeklarowana. Weźmy za przykład następujący kod: BODY {width: 500px;} DIV {width: 500px; text-indent:10 ;} P {width: 200px;} DIV This first line of the DIV is indented by 50 pixels. P This paragraph is 200px wide, and the first line of the paragraph is indented 50px. This is because computed values for text-indent are inherited, instead of the declared values. /P /DIV Pomimo że akapit ma szerokość tylko 200 pikseli, jego pierwsza linia jest wcięta o 50 pikseli (tak jak na rysunku 4.9), czyli odziedziczoną wartość text-indent. 792/  ./.-32/;-(cid:18)-+   3.+o  o+-;3-8/789 6(cid:8);2;+2/8/789 Jeszcze bardziej podstawową właściwością niż text-indent jest właściwość text-align (wyrównanie tekstu), która określa, w jaki sposób linie tekstu w elemencie mają być wyrównane względem siebie. Istnieją cztery wartości; pierwsze trzy są dość proste, ale czwarta mieści w sobie parę zawiłości. 8/8(cid:4)+12 +683- left | center | right | justify +683.32+ zależy od przeglądarki /.-32+ .2377(cid:21).3 tak elementów blokowych Najszybszym sposobem na zrozumienie tego, jak te wartości działają, jest prześledzenie rysunku 4.10. 792/ +o+2/;o+-;3-8/80+12 Wyrównanie tekstu jest kolejną właściwością nadawaną wyłącznie elementom blokowym, takim jak akapity. Nie można wyśrodkować odnośnika w linii, w której się znajduje, bez wyrównania pozostałej części linii (na czym nam nie zależy). Reguła text-align: center może być użyta do zastąpienia operacji wykonywanych przez znaczniki CENTER, tak jak przedstawiono to na rysunku 4.11. H1 {text-align: center;} 792/  63.3;+2/8/789469 -9;o+-;3-8/80+12 +2493;+2/8/78/  Można także spowodować wyśrodkowanie elementów z umieszczonym wewnątrz nich tekstem i ry- sunkami. Zadziała to dokładnie tak jak znacznik CENTER, w taki sposób, jaki przedstawia nastę- pujący kod i rysunek 4.12: DIV.first {text-align: center;} H1 An Un-centered H1 Element /H1 DIV CLASS= first P This is a paragraph without any alignment styles applied to it. However, it is contained within a DIV element which has alignment set, and this alignment will inherit into the paragraph. This will also affect any images which appear within the DIV, such as this one IMG SRC= star.gif or the next one. /P IMG SRC= floater.gif /DIV 792/   63.3;+2/;o+-;3-8/80+128/789;-3.--;-18/7896792(cid:23); Jeśli jednak chcemy wyśrodkować sam obrazek, text-align nie jest poprawnym sposobem. Mając poniższy kod uzyskamy rezultaty widoczne na rysunku 4.13: IMG {text-align: center;} 792/   o+-;38/80+126792,33;/   3.+o  o+-;3-8/789 Obrazek nie został wyśrodkowany, gdyżnie jest elementem blokowym. Jedynym sposobem na to, aby wyśrodkować obrazek przy użyciu text-align jest objęcie go elementem DIV, który ma ustawione wyśrodkowanie zawartości: DIV STYLE= text-align: center; IMG SRC= blyszczacy.gif ALT= Błyszczący obiekt /DIV Jak widać na rysunku 4.14, taka deklaracja działa poprawnie. 792/  +1+8;+2/;63.3;;+2/6792(cid:23); Dla języków zachodnich (czytanych od lewej do prawej strony) wartością domyślną text-align jest left (z tekstem wyrównanym do lewego marginesu i „postrzępionym” prawym marginesem — inaczej znane jako „tekst z lewej do prawej”). Inne języki, takie jak arabski czy hebrajski, domyślnie będą wyrównane do prawej, ponieważ pisze się w nich z prawej do lewej strony. cen- ter daje oczekiwany efekt — powoduje wyśrodkowanie każdej linii wewnątrz elementu, któremu jest nadane. Przy justify (justowanie) należy rozważyć kilka spraw. Jak to przedstawia rysunek 4.15, wyju- stowany tekst jest tak sformatowany, że końce każdej linii znajdują się na wewnętrznych brzegach elementu rodzica. Jest to osiągnięte poprzez zmianę odstępów pomiędzy słowami i literami w taki sposób, aby każda linia była dokładnie tej samej długości. Efekt ten spotykany jest często w świe- cie druku (np. książkach), ale przy CSS wchodzą w grę jeszcze inne zastosowania. 792/   9783;+28/78 CSS nie określa sposobu rozciągania justowanego tekstu w celu wypełnienia przestrzeni pomiędzy lewym i prawym brzegiem elementu rodzica, dlatego niektóre przeglądarki mogą dodawać odstę- py tylko pomiędzy słowami, a inne mogą dodawać odstępy między literami. Możliwe jest także to, +2493;+2/8/78/  że niektóre przeglądarki zmniejszą odstępy w niektórych liniach i zagęszczą tekst bardziej niż zwykle. Wszystko to może wpłynąć na wygląd elementu i może nawet zmienić jego wysokość — zależy to od tego, na ile linii tekst zostanie podzielony przez przeglądarkę (rysunek 4.16). 792/  3 ;3-9783;+2+ Pojawia się również inny problem — CSS przemilcza sposób dzielenia wyrazów. Dzielenie tekstu, czyli użycie łącznika do podzielenia wyrazu pomiędzy dwie linie, pozwala na zmniejszenie odstę- pów między wyrazami, poprawiając tym samym wygląd linii (rysunek 4.17). 792/  9783;+2/.//2/;6+(cid:23); Dzielenie wyrazów nie jest zdefiniowane w CSS, ponieważ różne języki mają różne zasady dzielenia wyrazów. Zamiast próbować improwizować tworząc zestaw reguł, który byłby zapewne i tak niekompletny, specyfikacja po prostu unika tego problemu. Pozwala to przeglądarkom na używanie własnych reguł dzielenia wyrazów i — z czasem — ulepszanie ich bez przeszkód w postaci specyfikacji CSS.   3.+o  o+-;3-8/789 Skoro w CSS nie ma funkcji odpowiadającej za dzielenie wyrazów, przeglądarki przeważnie nie będą wykonywać automatycznego dzielenia wyrazów. A zatem wyjustowany tekst będzie raczej mniej atrakcyjny w CSS niż w druku. Zwłaszcza wtedy, gdy elementy są tak wąskie, że w każdej linii jest tylko kilka słów, tak jak to przedstawiono na rysunku 4.18. Oczywiście można justować tekst, ale należy pamiętać o wadach tej metody. 792/  9783;+2/;;7++4-/,/.//2+;6+(cid:23); Prawie każda przeglądarka obsługująca CSS poradzi sobie z większością wartości text- align, jednak często zawodzi przy justify. Netscape Navigator 4 obsługuje justowanie, ale popełnia przy tym dość dużo błędów. Najczęściej zawodzi wewnątrz tabelek. Internet Explorer 4.x nie obsługuje justowania, ale Internet Explorer 5 i Opera 3.6 już je obsługują. +4378(cid:4)43;+3.78(cid:4)4+ Aby zmienić tempo, porozmawiajmy o właściwości white-space, która może mieć ogromny wpływ na sposób wyświetlania tekstu. +2493;+2/8/78/  ;8/(cid:4)74+-/ +683- pre | nowrap | normal +683.32+ normal /.-32+ .2377(cid:21).3 nie elementów blokowych Używając tej właściwości można wpłynąć na to, jak przeglądarka traktuje odstępy między słowa- mi i liniami tekstu. HTML robi to w pewnym stopniu — zamienia każdy odstęp na jedną spację. A zatem następujący kod zostanie wyświetlony tak, jak to przedstawiono na rysunku 4.19 (z tylko jedną spacją pomiędzy każdym słowem): P This paragraph has many spaces in it. /P 792/   ;/8+2/++489;/3+74+-+ Takie zachowanie możesz wymusić następującą deklaracją: P {white-space: normal;} Reguła ta „powie” przeglądarce, że ma postępować tak, jak zawsze to robiły przeglądarki (powin- na zignorować dodatkową pustą przestrzeń). Wszystkie zbyteczne spacje i znaki końca wiersza zostaną przez przeglądarkę pominięte. Jeśli jednak zmienimy wartość white-space na pre, pusta przestrzeń będzie traktowana tak, jakby elementy były elementami PRE, w których pusta przestrzeń nie jest ignorowana, jak to przedstawiono na rysunku 4.20. P {white-space: pre;} P This paragraph has many spaces in it. /P 792/  32363;+2/74+-;3./ Z właściwością white-space ustawioną na pre, przeglądarka uwzględni dodatkowe spacje i znaki końca wiersza. Pod tym względem — i tylko pod tym względem — każdy element może zachowywać się jak element PRE.  3.+o  o+-;3-8/789 Istnieje jeszcze wartość nowrap, która chroni tekst wewnątrz elementu blokowego przed zawija- niem do nowej linii (za wyjątkiem użycia znaczników końca linii BR ). Jest to podobne do usta- wienia w komórce tabelki niezawijania wierszy poprzez TD NOWRAP z tym, że właściwość white-space może być nadana każdemu elementowi blokowemu, nie tylko tabelkom. Dlatego możemy uzyskać efekty, takie jak przedstawiono na rysunku 4.21: P STYLE= white-space: nowrap; This paragraph is not allowed to wrap,which means that the only way to end a line is to insert a line- break element. If no such element is inserted, then the line will go forever,forcing the user to scroll horizontally to read whatever can t be initially displayed BR in the browser window. /P 792/   /12+-++;+2+;/67469 -9;o+-;3-;8/074+-/ Właściwie white-space można użyć po to, aby zastąpić atrybut nowrap w komórkach tabel- ki, jak zademonstrowano poniżej (rysunek 4.22): TD {white-space: nowrap;} TABLE TR TD The contents of this cell are not wrapped. /TD TD Neither are the contents of this cell. /TD TD Nor this one, or any after it, or any other cell in this table. /TD TD CSS prevents any wrapping from happening. /TD /TR /TABLE 792/   -/;o+-;3-;8/074+-/23;6+4;-/932(cid:18)-++;+2+;/67;8+,/-/ Chociaż white-space może wydawać się właściwością niesłychanie użyteczną, nie jest obsługiwana przez żadną przeglądarkę poza IE5 dla MacOS i pierwszymi próbnymi wersjami Netscape 6. W innych przeglądarkach nawet nie ma możliwości użycia atrybutu nowrap w komórkach tabelek, pomimo, że wydaje się to zachowaniem bardzo prostym w obsłudze. +2493;+2/8/78/ 7332  W przeciwieństwie do rozmiaru czcionki (zagadnienie to omówimy w rozdziale 5.) wysokość linii (line-height) odnosi się mniej więcej do dystansu występującego między bazowymi liniami pisma. Faktycznie właściwość ta ustala wielkość, o którą zwiększy się lub zmniejszy wysokość pudełka każdego elementu się. W najprostszych przypadkach jest to sposób na zwiększenie (lub zmniejszenie) pionowej przestrzeni występującej pomiędzy liniami tekstu, ale jest to myląco pro- sty sposób widzenia zasad działania właściwości line-height. Jeśli ktoś zna pakiety DTP, to można powiedzieć, że line-height kontroluje interlinię (ang. leading), będącą dodatkową przestrzenią pomiędzy liniami tekstu nad i pod polem czcionki. Różnica pomiędzy wartością line-height i rozmiarem czcionki to interlinia. 2/(cid:4)/18 +683- długość | procenty | liczba | normal +683.32+ normal /.-32+ .2377(cid:21).3 tak wszystkich elementów Uwaga: wartości procentowe obliczane są względem rozmiaru czcionki elementu. Mówiąc językiem technicznym — każdy element w linii generuje obszar elementu (ang. content area), który zależy od rozmiaru czcionki. Obszar elementu generuje także pudełko, które — przy braku innych czynników — powinno być dokładnie równe obszarowi elementu. Jednak interlinia tworzona przez line-height może zwiększyć lub zmniejszyć wysokość pudełka. Wielkość interlinii dzieli się przez 2 i przesuwa górną i dolną granicę pudełka o otrzymaną wartość. W ten sposób otrzymujemy pudełko o nowych wymiarach. Na przykład jeśli obszar elementu ma wyso- kość 14 punktów, a line-height ustawione jest na 18 punktów, wtedy różnica (4 punkty) jest dzielona na pół i dodana na górę i dół pudełka, co zwiększa jego rozmiar do wysokości 18 punk- tów. Brzmi to jak okrężna droga prowadząca do opisania działania wysokości linii, ale istnieją re- alne przyczyny takiego opisu. W rozdziale 8. znajdziemy jeszcze bardziej szczegółowy opis. Jeśli używamy domyślnej wartości normal, ilość przestrzeni rozciągającej się pomiędzy liniami będzie wynikać z ustawień przeglądarki. Zazwyczaj jest to liczba mieszcząca się między 1,0 a 1,2 rozmiaru czcionki, ale może być różna w różnych przeglądarkach. Dozwolone długości inne niż em i ex są zwykłymi wymiarami długości (np. 0.2cm). Występują tu te same problemy, co zawsze: nawet jeśli użyje się poprawnej wartości (np. 4cm), przeglądarka (lub system operacyjny) może niepoprawnie odwzorować rzeczywiste wartości. A zatem wyświe- tlając dokument na ekranie monitora, linijka zapewne nie wskaże, że wysokość linii ma dokładnie cztery centymetry. Żeby dowiedzieć się czegoś więcej, przeczytaj rozdział 3. Wartości procentowe (tak samo jak em i ex) są obliczane w stosunku do wielkości czcionki ele- mentu. Poniższy kod powinien być względnie prosty, a rezultat widoczny jest na rysunku 4.23:   3.+o  o+-;3-8/789 BODY {line-height: 14pt; font-size: 13pt;} P.one {line-height: 1.2em;} P.two {font-size: 10pt; line-height: 150 ;} P.three {line-height: 0.33in;} P This paragraph inherits a line-height of 14pt from the BODY, as well as a font-size of 13pt. /P P CLASS= one This paragraph has a line-height of 16.8pt (14 * 1.2), so it will have slightly more line-height than usual. /P P CLASS= two This paragraph has a line-height of 15pt (10 * 150 ), so it will have slightly more line-height than usual. /P P CLASS= three This paragraph has a line-height of 0.33in, so it will have slightly more line-height than usual. /P 792/   6378/3,-/2+;+2/;o+-;3-2/0/188;73329 Wyniki stają się mniej przewidywalne, kiedy wartość wysokości linii jest dziedziczona z jednego elementu blokowego na inny. Wyliczona wartość wysokości linii jest dziedziczona bez względu na to, jaki rozmiar czcionki może być ustawiony dla potomka. Może się to okazać problemem, tak jak to przedstawiono na rysunku 4.24: BODY {font-size: 10pt;} DIV {line-height: 12pt;} P {font-size: 18pt;} DIV P This paragraph s font-size is 18pt, but the inherited line- height is only 12pt. This may cause the lines of text to overlap each other by a small amount. /P /DIV 792/  +o+;7332:.9 +;/3--32.63,2463,/ +2493;+2/8/78/   Istnieją dwa rozwiązania. Można ustawiać wysokość linii dla każdego elementu, ale nie jest to rozwiązanie zbyt praktyczne tym bardziej, że może być wiele elementów wymagających takiego podejścia. Drugim rozwiązaniem jest ustawienie zwykłej liczby, która w rzeczywistości będzie stanowić współczynnik skalujący: BODY {font-size: 10pt;} DIV {line-height: 1.5;} P {font-size: 18pt;} Jeśli używamy liczby, dziedziczony jest współczynnik skalujący, a nie wyliczona wartość. Współ- czynnik nadany jest elementowi i wszystkim jego potomkom, a więc każdy element ma wysokość linii wyliczoną względem własnego rozmiaru czcionki, jak to przedstawiono na rysunku 4.25: BODY {font-size: 10pt;} DIV {line-height: 1.5;} P {font-size: 18pt;} DIV P This paragraph s font-size is 18pt, and since the line-height set for the parent DIV is 1.5, the line-height for this paragraph is 27pt (18 * 1.5). /P /DIV 792/  ,/-/463,/(cid:23);469 -9;74(cid:23)o-22+7+9-/13 Jak już pisałem wcześniej — chociaż wydaje się, że line-height rozdziela dodatkową prze- strzeń nad i pod każdą linią tekstu — w rzeczywistości dodaje (lub odejmuje) pewną ilość na gó- rze lub na dole obszaru elementu. To prowadzi do „dziwnych” rezultatów, gdy linia zawiera ele- menty z różną wielkością czcionki. Na razie jednak pozostańmy przy prostych przykładach. Załóżmy, że domyślna wielkość czcionki dla akapitu wynosi 12pt i rozważmy następującą regułę: P {line-height: 16pt;} Skoro dziedziczona wysokość linii 12-punktowego tekstu wynosi 12 punktów, powyższa reguła oznajmiać będzie, że wokół każdej linii tekstu w akapicie będą dodatkowe 4 punkty przestrzeni. Te dodatkowe punkty, po podzieleniu na dwa, zostaną dodane nad i pod każda linię tekstu. Wyni- kiem rozdzielenia dodatkowej przestrzeni jest dystans pomiędzy liniami równy 16pt. Teraz przyjrzyjmy się trochę bardziej zawiłemu przypadkowi. Weźmy następujący przykład: BODY {font-size: 10pt;} P {font-size: 18pt; line-height: 23pt;} BIG {font-size: 250 ;}   3.+o  o+-;3-8/789 P This paragraph s font-size is 18pt, and the line-height for this paragraph is 23pt. However, a BIG larger element /BIG within the paragraph does not cause the value of line-height to change, which can lead to some interesting effects. /P Efekt przedstawiony na rysunku 4.26 może wyglądać jak wynik błędu przeglądarki, ale tak nie jest. Jest dokładnie tym, co powinna wyświetlić przeglądarka. 792/   733-2+///28;/;2(cid:18)862/22/1363+69 To jest jedyna dziwaczność wynikająca z użycia wysokości linii. Na rysunku 4.27 wartości li- ne-height są dokładnie takie same dla każdej linii elementu (bez względu na to jak różne mogą się wydawać). Ten fakt zostanie omówiony już niedługo w podrozdziale —Wyrównanie pionowe. 792/   73/67922//2+;733-2 Na rysunku 4.27 rzeczywista wartość wysokości linii jest dla każdej linii taka sama. Można wyko- rzystać fakt, że właściwość line-height może zostać ustawiona dla każdego elementu (nie wy- łączając elementów wewnętrznych). Powróćmy do naszego poprzedniego przykładu i wprowadźmy do niego jedną małą zmianę poprzez dodanie line-height do stylów elementu BIG (zmienimy również wysokość linii dla P na 27pt). Będzie to miało efekt widoczny na rysunku 4.28: BODY {font-size: 10pt;} P {font-size: 18pt; line-height: 27pt;} BIG {font-size: 250 ; line-height: 1em;} +2493;+2/8/78/   P This paragraph s font-size is 18pt, and the line-height for this paragraph is 27pt. A BIG larger element /BIG within the paragraph does not cause the line s height to change, but setting its line-height does, which leads to some interesting effects. /P 792/  +2+2/0/18.+///289;/;2(cid:18)862/13 Ustawienie wysokości linii na 1em dla elementu BIG sprawi, że wysokość linii będzie taka sama jak wysokość tekstu elementu BIG. Da to taki sam efekt, jaki dawały obrazki: zwiększy się wyso- kość całej linii tekstu tak, by poprawnie wyświetlić element w niej zawarty. W tym przypadku efekt w dużym stopniu jest taki sam, ale zawdzięczamy go zwiększeniu wartości line-height wewnętrznego elementu BIG (w przeciwieństwie do optycznej zmiany wysokości linii ze względu na dopasowanie do rzeczywistego rozmiaru obrazka). Powody takiego zachowania są raczej skomplikowane. Więcej informacji na temat sposobu for- matowania elementów umieszczonych wewnątrz tekstu znajdziemy w rozdziale 8.  -+;(cid:4)8/ Jak wynika z poprzedniego podrozdziału, współczynnik skalujący jest najlepszym sposobem na uniknięcie problemów związanych z dziedziczeniem, które mogą pojawić się przy stosowaniu jed- nostek długości w wysokości linii. Dlatego może się wydawać, że użycie samej liczby jest zawsze lepsze. Niestety, niekoniecznie tak jest. Internet Explorer 3 zinterpretuje współczynnik skalujący jako ilość pikseli, a wynik będzie taki, jak to przedstawiono na rysunku 4.29. 792/   74(cid:23)o-227+9-9 82/0/1832+-+.9 /o3438;28/62/8436/6 Zgodnie ze specyfikacją CSS przeglądarki mogą ustawić dowolną wartość, którą uważają za naj- lepszą dla domyślnego słowa kluczowego normal, ale sugerowany przedział zawiera się między   3.+o  o+-;3-8/789 1,0 a 1,2 — w zależności od użytej czcionki i od urządzenia wyświetlającego. Większość przeglą- darek używa wartości bliższej prawej granicy przedziału, ale oczywiście może to ulec zmianie wraz z pojawianiem się innych przeglądarek lub nowych wersji starszych przeglądarek. 6(cid:11);2+2/4323;/ Wszystko wskazuje na to, że w pewnym stopniu znamy już pojęcie pionowego wyrównania tek- stu. Jeśli kiedykolwiek używaliśmy elementów SUP i SUB (indeksu górnego i dolnego) lub — wy- świetlając obrazek — posłużyliśmy się kodem IMG SRC= foo.gif ALIGN= texttop , to można przyjąć, że mieliśmy już do czynienia z wyrównaniem pionowym. Właściwość CSS vertical-align (wyrównanie pionowe) pozwala na użycie wszystkich znanych nam już spo- sobów wyrównania stosowanych wewnątrz tekstu. Mamy też do wyboru kilka nowych możliwości. Należy pamiętać o jednej rzeczy: vertical-align nie wpływa na wyrównanie zawartości komórek tabel lub tekstu znajdującego się wewnątrz elementów blokowych. CSS1 nie przewiduje duplikowania kodu, takiego jak TD valign= top . Zmienia się to w CSS2; więcej informacji znajduje się podrozdziale Tabelki rozdziału 10. Sprawdźmy, czego możemy dokonać za pomocą vertical-align (wyrównanie pionowe). Właściwość ta nadawana jest tylko elementom wewnętrznym. Nie jest dziedziczona, chociaż obejmuje też elementy podmieniane, takie jak obrazki czy pola formularzy. :/68-+(cid:4)+12 +683- baseline | sub | super | bottom | text-bottom | middle | top | text-top | procenty +683.32+ baseline /.-32+ .2377(cid:21).3 nie elementów wewnętrznych Uwaga: wartości procentowe odnoszą się do wysokości linii elementu. Właściwość vertical-align akceptuje każde z ośmiu słów kluczowych lub wartości procen- towe (ale nigdy nie robi tego jednocześnie). Słowa kluczowe to mieszanka znanych i nieznanych słów: baseline (wartość domyślna), sub, super, bottom, text-bottom, middle, top i text-top. Prześledzimy po kolei, jakie efekty daje stosowanie każdego z nich. 6(cid:8);2+2/.3,+3;/247+ Właściwość vertical-align: baseline zmusza element do wyrównania bazowych linii pisma rodzica i potomka, czyli w sumie odpowiada za to, co zawsze robią przeglądarki. Pokazuje to poniższy kod i rysunek 4.30: +2493;+2/8/78/   B {vertical-align: baseline;} P The baseline of the B boldfaced text /B is aligned with the baseline of this paragraph. /P 792/   6(cid:23);2+2/.3,+3;/247+ Oglądając rysunek 4.30 nie zobaczymy nic innego niż to czego się spodziewaliśmy. Jeśli element, który wyrównujemy w pionie, nie posiada bazowej linii tekstu — gdy jest obraz- kiem, polem formularza lub innym podmienianym elementem — to dolny brzeg elementu jest wy- równywany z bazową linią pisma rodzica, tak jak to przedstawiono na rysunku 4.31: IMG {vertical-align: baseline;} P The image found in this paragraph IMG SRC= dot.gif ALT= a dot has its bottom edge aligned with the baseline of the paragraph. /P 792/   6(cid:23);2+2/3,6++,+3;28/789 2./71(cid:8)622./7.32 Deklaracja vertical-align: sub powoduje, że element jest wyświetlony jako indeks dolny. Ogólnie oznacza to, że linia bazowa elementu (lub dolny brzeg w przypadku elementów podmie- nianych) jest położony niżej w stosunku do bazowej linii pisma elementu rodzica. Jednak wielkość przesunięcia nie jest określona w specyfikacji, dlatego może być inna w rożnych przeglądarkach. Jako że sub nie implikuje zmian w rozmiarze czcionki, nie powinien zmniejszać (lub powiększać) indeksowanego tekstu. Tekst w elemencie indeksu dolnego powinien być domyślnie tego samego rozmiaru co tekst elementu rodzica, tak jak to przedstawiono na rysunku 4.32. SUB {vertical-align: sub;} P This paragraph contains SUB subscripted /SUB text. /P 792/   78+;/2/2./79.32/13 Oczywiście można zmniejszyć tekst poprzez użycie deklaracji font-size, ale tego rozwiązania nie będziemy analizować w naszej książce.   3.+o  o+-;3-8/789 Słowo super zachowuje się podobnie jak sub, ale w tym przypadku linia bazowa elementu (lub dolny brzeg elementu podmienianego) jest podnoszony w stosunku do bazowej linii pisma rodzi- ca. Odcinek, o jaki tekst zostanie podniesiony, zależy od przeglądarki. Żadne zmiany w wielkości czcionki nie są wprowadzane. Zademonstrowano to na rysunku 4.33: SUP {vertical-align: super;} P This paragraph contains SUP superscripted /SUP text. /P 792/   78+;/2/2./791(cid:23)62/13 +.23 Działanie vertical-align: bottom wydaje się dosyć proste. Jest nim wyrównanie dolnych brzegów pudełka elementu i pudełka linii. Na przykład kod taki jak przedstawiono poniżej powi- nien dać efekt widoczny na rysunku 4.34: IMG.feeder {vertical-align: bottom;} P This paragraph contains first a single fairly IMG SRC= tall.gif align= middle ALT= tall image which is tall, and then an image IMG SRC= short.gif CLASS= feeder ALT= short image which is not tall. /P 792/   6(cid:23);2+2/.32/ Jak widać na rysunku 4.34, druga linia akapitu zawiera dwa obrazki, których dolne brzegi są ze sobą wyrównane. Dla pierwszego obrazka zostało ustawione wyrównanie środkowe przy użyciu atrybutu HTML valign. Nieco później — ale jeszcze w tym rozdziale — przyjrzymy się sposo- bom stosowanym w CSS do osiągnięcia podobnych efektów. Fraza vertical-align: text-bottom odnosi się do dolnego brzegu linii tekstu. Dla speł- nienia celów tej wartości ignorowane są elementy podmieniane i dowolnego typu elementy nietek- stowe. Pod uwagę brane jest natomiast domyślne pole tekstowe. To domyślne pudełko wywodzi się z właściwości font-size elementu rodzica. Spód wyrównywanego elementu jest wyrówna- ny ze spodem domyślnego pola tekstowego. A zatem — stosując poniższy kod — zobaczymy sy- tuację przedstawioną na rysunku 4.35: IMG.tbot {vertical-align: text-bottom;} +2493;+2/8/78/   P Here: a IMG SRC= tall.gif ALIGN= middle ALT= tall image tall image, and then a IMG SRC= short.gif CLASS= tbot ALT= short image short image. /P 792/   78+;/2/8/80,3883 1(cid:8)6(cid:4) Użycie vertical-align: top ma przeciwny efekt niż wartość bottom (podobnie jak vertical-align: text-top jest odwrotnością text-bottom). Rysunek 4.36 przedsta- wia efekt, jaki da wykonanie poniższego kodu: IMG.up {vertical-align: top;} IMG.textup {vertical-align: text-top;} P Here: a IMG SRC= tall.gif ALIGN= middle ALT= tall image tall image, and then a IMG SRC= short.gif CLASS= up ALT= short image short image. /P P Here: a IMG SRC= tall.gif ALIGN= middle ALT= tall image tall image, and then a IMG SRC= short.gif CLASS= textup ALT= short image short image. /P 792/   -/;o+-;3-8348/80834.3;6(cid:23);2+2+8/789 Dokładna pozycja wyrównania będzie zależała od tego, jakie elementy znajdą się w linii i od tego, jak będą wysokie. 363.9 A teraz vertical-align: middle. Wartość ta stosowana jest zazwyczaj w celu wyrówania rysunków, ponieważ powoduje ustawienie środka elementu na poziomie środka linii. Środek linii zdefiniowany jest jako punkt znajdujący się o połowę wartości ex nad bazową linią pisma, a wartość  3.+o  o+-;3-8/789 ex obliczana jest na podstawie wielkości czcionki elementu rodzica. Przykład przedstawiony jest na rysunku 4.37: IMG {vertical-align: middle;} 792/   6(cid:23);2+2/63.(cid:23); Ponieważ większość przeglądarek wyświetla 1ex jako połowę em, wartość middle praktycznie powoduje ustawienie środka elementu na wysokości jednej czwartej wartości em nad bazową linią pisma rodzica. Obrazuje to dokładnie rysunek 4.38. 792/  #-/1(cid:23)o;6(cid:23);2+2+63.3;/13 To posunięcie jest bliskie symulacji działania IMG ALIGN= middle ; można spodziewać się, że wartości procentowe dadzą jeszcze lepsze wyniki. 63-/28 Jak się okazuje, procenty nie pozwalają symulować ALIGN= middle w przypadku obrazków. Ustawienie wartości procentowej dla vertical-align powoduje podniesienie lub opuszczenie bazowej linii pisma (lub spodu elementu podmienianego) o podaną wielkość względem linii ba- zowej rodzica. Wielkość przesunięcia obliczana jest jako procent wartości wysokości linii. Dodat- nie wartości powodują podniesienie elementu, a ujemne — obniżenie. Może to spowodować taki efekt jak ten, który jest widoczny na rysunku 4.39 (elementy wyglądają tak, jakby były umiesz- czone w osobnej linii): B {vertical-align: 100 } P This paragraph contains some B boldfaced /B text, which is raised up 100 . This makes it look as though it s on a preceding line. /P +2493;+2/8/78/  792/   6(cid:23);2+2/4323;/469 -9463-/28(cid:23); Należy jednak pamiętać, że wyrównywany pionowo tekst nie jest częścią innej linii. Wydaje się tak jedynie wtedy, gdy nie ma innego tekstu dookoła. Spójrzmy na rysunek 4.40, na którym w środ- ku akapitu pojawia się pewien wyrównany pionowo tekst. 792/   6(cid:23);2+2/4323;/3 /;4o22+;7332 Można tę właściwość wykorzystać do uzyskania ciekawych efektów wizualnych jak te, które zo- stały przedstawione na rysunku 4.41: SUB {vertical-align: -100 ;} SUP {vertical-align: 100 ;} P We can either SUP soar to new heights /SUP or, instead, SUB sink into despair... /SUB /P 792/   63-/28/0/83;2/798 Skoro wartości procentowe mają być procentami wysokości linii, można zapytać o to, co się sta- nie, jeśli szczególnie wysoki obrazek umieszczony wewnątrz linii zwiększy jej wysokość? Jeśli przypomnimy sobie wcześniejsze rozważania, to odpowiedź już znamy — obrazek, bez względu na swoją wysokość, nie spowoduje powiększenia wartości line-height. Zwiększy się wysokość pudełka. Dlatego — jeśli wysokość linii wynosi 14px, a element wewnątrz tej linii jest podniesiony o 50 , a wewnątrz niej znajduje się także obrazek wysokości 50 pikseli — to otrzy- many rezultat będzie taki, jak to przedstawiono na rysunku 4.42: SUP {vertical-align: 50 ;}   3.+o  o+-;3-8/789 792/   6(cid:23);2+2/4323;/463-/28;733,6+/ Podniesiony o 50 element będzie miał linię bazową podniesioną o 7 pikseli (połowa 14px), a nie o 25 pikseli. Zauważmy także, że pudełko linii zostało odpowiednio zwiększone, aby mogło pomieścić rysunek. Jest to zgodne z modelem pudełka, ponieważ elementy podmieniane dają efekty tego rodzaju. Możemy lepiej prześledzić operację wyrównania pionowego, jeśli mamy dwa obrazki, z których tylko jeden jest wyrównany pionowo za pomocą wartości procentowej. Rezultaty, które są wi- doczne na rysunku 4.43, są zależne od wysokości linii, którą wyraźnie ustawiliśmy na 14px: P {line-height: 14px;} IMG.up {vertical-align: 50 ;} P Some IMG SRC= tall.gif alt= tall image IMG SRC= short.gif CLASS= up ALT= short image text. /P 792/   6(cid:23);2+2/4323;/463-/28.;+3,6+ Spód (lub linia bazowa) mniejszego obrazka jest podniesiony o połowę (50 ) wysokości linii lub o 7 pikseli. Jeśli ustawilibyśmy wyrównanie dla IMG.up na –50 , to niższy obrazek zostałby obniżony o 7 pikseli. n-/2/978+;/q Jak już widzieliśmy, sposób wyświetlenia danej linii tekstu zależy w dużym stopniu od wyrówna- nia pionowego różnych elementów wewnątrz tej linii. Fakt ten, ze względu na swą wagę, zasłu- guje na ponowne podkreślenie. Na przykład załóżmy, że linia zawiera wyśrodkowany obrazek i wyrównany do dołu element normalnego ciągu tekstu. Rezultat widać na rysunku 4.44: +2493;+2/8/78/   IMG {vertical-align: middle;} SUB {vertical-align: bottom;} 792/  n-/2/;6(cid:23);2+q4323;- Jeśli zmienimy wyrównanie elementu tekstowego na text-bottom, sytuacja zmieni się dość radykalnie, jak to przedstawiono na rysunku 4.45: IMG {vertical-align: middle;} SUB {vertical-align: text-bottom;} 792/  227437(cid:23),o-/2+;6(cid:23);2+q4323;- .78(cid:27)4(cid:27).7o3;+2++ Dosyć proste pojęcia — odstępy między słowami i znakami — to po prostu sposoby na zwiększe- nie lub zmniejszenie przestrzeni pomiędzy słowami lub literami. Jak zawsze do rozważenia jest parę nieintuicyjnych kwestii dotyczących tych właściwości. Na początek omówmy odstępy mię- dzy słowami. .78(cid:4)4(cid:4).7o3;+ ;36.(cid:4)74+-21 +683- długość | normal +683.32+ normal /.-32+ .2377(cid:21).3 tak wszystkich elementów Właściwość word-spacing (odstępy między słowami) może przyjmować wartość dodatnią lub ujemną. Wartość jest dodana do normalnej przestrzeni między słowami, co prawdopodobnie nie   3.+o  o+-;3-8/789 jest tym, czego moglibyśmy się spodziewać. W efekcie podanej w deklaracji word-spacing wartości używa się jako modyfikatora przestrzeni między słowami. Dlatego wartość domyślna — normal działa tak samo jak ustawienie wartości zerowej (0), co przedstawiono na rysunku 4.46: P.base {word-spacing: normal;} P.norm {word-spacing: 0;} 792/  ;+74373,2+3712(cid:18)-/;o-3.78(cid:18)4(cid:23);(cid:18).7o3;+ Jeśli zatem wpiszemy dodatnią wartość długości, przestrzeń pomiędzy słowami zwiększy się, jak to przedstawiono na rysunku 4.47: P {word-spacing: 0.2em;} P The spaces between words in paragraphs will be increased by 0.2em. /P 792/  ;(cid:18)7/2/46/786/2(cid:18).7o3;+ Słowa mogą zostać zbliżone poprzez ustawienie dla właściwości word-spacing wartości ujemnej. Da to taki efekt, jak widać na rysunku 4.48: P {word-spacing: -0.4em;} P The spaces between words in paragraphs will be decreased by 0.4em. /P 792/  2/7/2/46/786/243(cid:18).7o3;+ Jak na razie nie określiliśmy dokładnie, czym tak naprawdę jest „słowo”. W najprostszych termi- nach CSS „słowo” jest ciągiem znaków bez przerw, otoczonym przez puste znaki jakiegokolwiek typu. Definicja nie ma znaczenia semantycznego — zakłada się jedynie, iż autor opracowuje dokument tak, że każde słowo jest oddzielone od drugiego przynajmniej jednym pustym znakiem. Nie można +2493;+2/8/78/   jednak oczekiwać od przeglądarek rozumiejących CSS, aby decydowały, co jest poprawnym sło- wem w danym języku, a co nim nie jest. Oznacza to także, że nie każdy język, który używa piktogramów lub innych, niż rzymski sposo- bów pisania, będzie mógł korzystać z tej właściwości. Ponadto przeglądarki nie muszą uwzględ- niać podanej tu definicji słowa; to tylko najprostszy sposób zdefiniowania tego pojęcia. Przeglą- darki mogą użyć bardziej zaawansowanych sposobów i decydować o tym, co słowem jest, a co nie. Używając właściwości odstępów między słowami można stworzyć bardzo nieczytelny dokument, taki jak widzimy na rysunku 4.49: P {word-spacing: 1in;} 792/  +46+;.(cid:18)7/63/3.78(cid:18)4(cid:18).7o3;+ /6221 /88/6(cid:4)74+-21 +683- długość | normal +683.32+ normal /.-32+ .2377(cid:21).3 tak wszystkich elementów Wiele aspektów dotyczących odstępów między słowami obowiązuje także w przypadku odstępów między znakami. Jedyną rzeczywistą różnicą pomiędzy tymi właściwościami jest to, że letter- spacing jest modyfikatorem normalnego światła międzyliterowego. Tutaj także dozwolone są wszystkie wartości długości i domyślne słowo kluczowe normal (wy- wołujące takie samo działanie jak letter-spacing: 0). Każda wartość długości zwiększy lub zmniejszy przestrzeń pomiędzy literami o zadeklarowaną wartość. Rysunek 4.50 przedstawia rezultaty poniższego przykładowego kodu: P {letter-spacing: 0;} /* identyczne działanie jak normal */ P.szerokie {letter-spacing: 0.25em;} P.waskie {letter-spacing: -0.25em;} P The letters in this paragraph are spaced as normal. /P   3.+o  o+-;3-8/789 P CLASS= szerokie The letters in this paragraph are spread out a bit. /P P CLASS= waskie The letters in this paragraph are smooshed together a bit. /P 792/   3 2/63.+//62219 Interesującym wykorzystaniem odstępów międzyliterowych jest zwiększenie ich w celu podkre- ślenia znaczenia wyrazu. Taka technika była powszechnie stosowana w poprzednich stuleciach. A zatem można zadeklarować poniższy kod, aby otrzymać rezultat widoczny na rysunku 4.51: STRONG {letter-spacing: 0.2em;} P This paragraph contains STRONG strongly emphasized text /STRONG which is spread out for extra emphasis. /P 792/   -/3.78(cid:18)4(cid:23);(cid:18).2++.+7-/1(cid:23)2/1343.6//2+86/- .78(cid:4)4(;6(cid:8);2+2/63+6--32 Wartość text-align może wpływać na odstępy między słowami i między znakami. Jeśli ele- ment jest wyjustowany, to odstępy między znakami i słowami mogą ulec zmianie. Umożliwienie pełnego justowania może zmienić odstępy zadeklarowane przez autora przez właściwości word- spacing i letter-spacing . Specyfikacja CSS nie określa w takich przypadkach sposobu obliczenia odstępów, a więc przeglądarki mogą robić to, co ich programiści uznali za najlepsze rozwiązanie. Jak to zwykle bywa, obliczona wartość dziedziczona jest przez wszystkie dzieci elementu. W od- różnieniu od wysokości linii dla word-spacing i letter-spacing niemożliwe jest usta- wienie współczynnika skalującego, który byłby dziedziczony zamiast wyliczonej wartości. A za- tem pojawiają się problemy takie jak przedstawiony na rysunku 4.52: P {letter-spacing: 0.25em;} SMALL {font-size: 50 ;} P This spacious paragraph features SMALL tiny text which is just as spacious /SMALL , even though the author probably wanted the spacing to be in proportion to the size of the text. /P +2493;+2/8/78/   792/  ./.-32/;+8o+(cid:18).8/63;/ Jedyną szansą na uzyskanie efektu proporcjonalności odstępów do wielkości tekstu jest wyraźne zadeklarowanie kerningu, co pokazano na rysunku 4.53: P {letter-spacing: 0.25em;} SMALL {font-size: 50 ; letter-spacing: 0.25em;} P This spacious paragraph features SMALL tiny text which is proportionally spacious /SMALL , which is what the author probably wanted. /P 792/  .69-/2/./.-/2+;+683-/62219 $6+27036+-+8/789 Teraz zajmijmy się kapitalizacją tekstu. Możemy to zrobić posługując się właściwością text- transform (transformacja tekstu). 8/8(cid:4)86+27036 +683- uppercase | lowercase | capitalize | none +683.32+ none /.-32+ .2377(cid:21).3 tak wszystkich elementów Domyślna wartość none pozostawia tekst bez zmian, gdyż stosuje taką kapitalizację, jaka istnieje w źródle dokumentu. Wartości, takie jak uppercase (wersaliki, czyli wielkie litery) i lower- case (małe litery), powodują zamianę tekstu tylko na wielkie lub tylko na małe litery zgodnie z tym, co sygnalizują nazwy. Wartość capitalize (kapitalizacja) zmienia pierwszą literę każ- dego wyrazu na wielką, a resztę liter pozostawia bez zmian. Zauważmy, że dla tej właściwości de- finicja słowa jest taka sama jak w podrozdziale o odstępach między słowami.   3.+o  o+-;3-8/789 Rysunek 4.54 przedstawia wiele sposobów użycia ustawień. STRONG {text-transform: uppercase;} H1, H2, H3 {text-transform: capitalize;} P.cummings {text-transform: lowercase;} P.surowy {text-transform: none;} H1 The heading-one at the beginninG /H1 P By default, text is displayed in the capitalization it has in the source document, but STRONG it is possible to change this /STRONG using the property text-transform . /P P CLASS= cummings For example, one could Create TEXT such as might have been Written by the late Poet E.E.Cummings. /P P CLASS= surowy If you feel the need to Explicitly Declare the transformation of text, that can be done as well. /P 792/   (cid:23) 2/8486+27036+-8/789 Pamiętajmy, że różne przeglądarki w różny sposób mogą decydować o tym, gdzie zaczyna się no- we słowo (czyli o tym, jakie litery mają być zamienione). Na przykład dla elementy H1 z rysunku 4.54 tekst „heading-one” może być wyświetlony na jeden z dwóch sposobów: „Heading-One” lub „Heading-one”. CSS nie określa, który zapis jest poprawny, więc obydwa są możliwe. Zauważmy także, że w nagłówku H1 na rysunku 4.54 ostatnia litera jest nadal wielka. Taka sytu- acja jest poprawna: nadając text-transform: capitalize CSS wymaga jedynie od prze- glądarki zamiany pierwszych liter wyrazów na wielkie. W pozostałej części wyrazu nic nie zostało więc zmienione. +2493;+2/8/78/   Może się wydawać, że właściwość text-transform nie ma zbyt dużych możliwości. Ale w rzeczywistości jest bardzo użyteczna. Jest tak na przykład wtedy, gdy nagle zdecydujemy, że wszystkie elementy H1 powinny być w całości napisane wielkimi literami. Zamiast przepisywać wszystkie nagłówki, wystarczy posłużyć się transformacją tekstu: H1 {text-transform: uppercase;} H1 This is an H1 element /H1 Jak widać na rysunku 4.55, tekst jest napisany wielkimi literami. 792/  $6+270363;+2////289 Zalet takiego posunięcia jest wiele. Po pierwsze — aby dokonać zmiany, wystarczy napisać poje- dynczą regułę, zamiast zmieniać wszystkie nagłówki H1. Po drugie — jeśli później zdecydujemy się na zamianę wielkich liter na kapitalizacje tylko pierwszej litery każdego wyrazu, zmiana jest jeszcze łatwiejsza, co pokazuje rysunek 4.56: H1 {text-transform: capitalize;} H1 This is an H1 element /H1 792/  227437(cid:23),86+270363;+2+///289 .+,+2/8/789 W ten sposób dochodzimy do dekoracji tekstu (text-decoration) będącej fascynującą wła- ściwością, która daje szansę na wykorzystanie dziwnych efektów i nieścisłości w przeglądarkach. Jednak na początku omówmy sposób, w jaki właściwość ta powinna działać teoretycznie. 8/8(cid:4)./-36+832 +683- none | [underline || overline || line-through || blink] +683.32+ none /.-32+ .2377(cid:21).3 nie wszystkich elementów   3.+o  o+-;3-8/789 Jak można się spodziewać, underline (podkreślenie) powoduje podkreślenie elementu. Działa dokładnie tak samo jak znacznik U w HTML. Wartość overline (nadkreślenie) jest „lustrzanym odbiciem” podkreślenia; linia jest rysowana wzdłuż górnej krawędzi tekstu „nadkreślanego” ele- mentu. Wartość line-through (linia poprzez) przeprowadza linię prosto przez środek tekstu; jest znana także jako „przekreślenie” (ang. striketrough) tekstu i jest odpowiednikiem znaczników S i STRIKE w HTML. A BLINK (mrugać) powoduje oczywiście miganie tekstu (dokładnie tak samo jak znacznik BLINK obsługiwany przez program Netscape Navigator). Rysunek 4.57 przed- stawia efekty działania każdej z tych wartości: P.emph {text-decoration: underline;} P.topper {text-decoration: overline;} P.old {text-decoration: line-through;} P.annoy {text-decoration: blink;} P.plain {text-decoration: none;} 792/   (cid:23) 2/84./36+-8/789 Pokazanie efektu migania (blink) oczywiście nie jest możliwe w druku, ale jest łatwe do wyobrażenia. Przeglądarki nie muszą obsługiwać migania. Nawiasem mówiąc — w czasie, gdy pisałem tę książkę, miganie obsługiwał tylko Navigator 4.x. Jak widać na ostatniej części rysunku 4.57, wartość none wyłącza wszelkie dekoracje, jakie mo- gły zostać nadane elementowi. Jest to zazwyczaj domyślny wygląd
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny
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ą: