Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00326 007807 14244394 na godz. na dobę w sumie
CSS3. Szybki start. Wydanie V - książka
CSS3. Szybki start. Wydanie V - książka
Autor: Liczba stron: 440
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3386-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Bądź na bieżąco ze światowymi trendami!

Gdy webmasterzy wspominają czasy przed powstaniem kaskadowych arkuszy stylów, dostają gęsiej skórki. Struktura dokumentu przemieszana z opisem wyglądu oraz dziesiątki niestandardowych znaczników inaczej obsługiwanych przez każdą przeglądarkę to koszmar każdego ówczesnego projektanta stron internetowych. Idea stylów CSS okazała się wybawieniem - okazało się nagle, że proste rozwiązania większości problemów związanych z opisem wyglądu strony WWW są na wyciągnięcie ręki!

Najnowsza wersja CSS wprowadza wiele udogodnień, ułatwień i nowych możliwości. Wszystkie potrzebne informacje o wersji CSS3 znajdziesz właśnie w tej książce. W trakcie lektury poznasz historię kaskadowych arkuszy stylów, typy reguł oraz zasady ich tworzenia. Ponadto odkryjesz nowe możliwości języka HTML5 i przekonasz się, że ich wykorzystanie nie musi być trudne! Autor szczegółowo omawia sposoby selektywnej stylizacji, formatowania tekstów, wybierania kolorów oraz dostosowywania wyglądu tabel. Twoją szczególną ciekawość na pewno wzbudzi rozdział przedstawiający trzydzieści dwie najlepsze praktyki CSS. Dzięki nim Twoje arkusze będą jeszcze lepsze. Ta książka musi znaleźć się na półce każdego webmastera chcącego podążać za światowymi trendami!

Poznaj i wykorzystaj możliwości nowych standardów CSS3!

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

Darmowy fragment publikacji:

Idź do • Spis treści • Przykładowy rozdział • Skorowidz Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2011 CSS3. Szybki start. Wydanie V Autor: Jason Cranford Teague Tłumaczenie: Łukasz Piwko, Maria Chaniewska ISBN: 978-83-246-3386-9 Tytuł oryginału: Visual QuickStart Guide (5th Edition) Format: 170×230, stron: 460 Bądź na bieżąco ze światowymi trendami! • Co to są kaskadowe arkusze stylów? • Jakie nowości kryją CSS3 i HTML5? • Jak selektywnie formatować elementy? Gdy webmasterzy wspominają czasy przed powstaniem kaskadowych arkuszy stylów, dostają gęsiej skórki. Struktura dokumentu przemieszana z opisem wyglądu oraz dziesiątki niestandardowych znaczników inaczej obsługiwanych przez każdą przeglądarkę to koszmar każdego ówczesnego projektanta stron internetowych. Idea stylów CSS okazała się wybawieniem – okazało się nagle, że proste rozwiązania większości problemów związanych z opisem wyglądu strony WWW są na wyciągnięcie ręki! Najnowsza wersja CSS wprowadza wiele udogodnień, ułatwień i nowych możliwości. Wszystkie potrzebne informacje o wersji CSS3 znajdziesz właśnie w tej książce. W trakcie lektury poznasz historię kaskadowych arkuszy stylów, typy reguł oraz zasady ich tworzenia. Ponadto odkryjesz nowe możliwości języka HTML5 i przekonasz się, że ich wykorzystanie nie musi być trudne! Autor szczegółowo omawia sposoby selektywnej stylizacji, formatowania tekstów, wybierania kolorów oraz dostosowywania wyglądu tabel. Twoją szczególną ciekawość na pewno wzbudzi rozdział przedstawiający trzydzieści dwie najlepsze praktyki CSS. Dzięki nim Twoje arkusze będą jeszcze lepsze. Ta książka musi znaleźć się na półce każdego webmastera chcącego podążać za światowymi trendami! • Historia CSS i budowa reguł CSS • Nowości w CSS3 i format SVG • Nowości w HTML5 • Selektory i importowanie arkusza stylów • Definiowanie klas i selektywna stylizacja • Formatowanie potomków • Przygotowywanie stylów dla różnych mediów • Typografia w sieci • Bezpieczne czcionki dla stron WWW • Własności tekstu i definiowanie kolorów • Formatowanie list i tabel • Marginesy, zaokrąglone rogi, elementy pływające • Ustawianie przezroczystości elementów • Przekształcenia i efekty przejścia • Zerowanie ustawień CSS i zarządzanie arkuszami • Najlepsze praktyki Poznaj i wykorzystaj możliwości nowych standardów CSS3! Spis treĂci Wprowadzenie Rozdziaï 1. Wprowadzenie do CSS 3 Co to jest styl Co to sÈ kaskadowe arkusze stylów (CSS) Rozwój CSS CSS i HTML Typy reguï CSS Budowa reguïy CSS NowoĂci w CSS 3 Rozdziaï 2. Wprowadzenie do HTML 5 Rozdziaï 3. Co to jest HTML Typy elementów HTML Rozwój HTML 5 Co nowego w HTML 5? Jak dziaïa struktura HTML 5 Uĝywanie struktury HTML 5 obecnie Podsumowanie Podstawy CSS Podstawowe selektory Style Ăródliniowe, czyli formatowanie pojedynczych elementów Style osadzone, czyli formatowanie caïych stron internetowych Style zewnÚtrzne, czyli formatowanie caïych witryn internetowych Redefiniowanie elementów HTML Definiowanie klas Definiowanie identyfikatorów Definiowanie stylów uniwersalnych Grupowanie, czyli formatowanie wielu elementów za pomocÈ tych samych reguï CSS Rozdziaï 4. Komentarze w CSS Podsumowanie Selektywna stylizacja Drzewo rodzinne elementów Definiowanie stylów zaleĝnie od kontekstu Pseudoklasy S p i s t r e Ă c i 9 17 18 19 22 24 25 27 29 31 32 35 38 41 42 43 48 49 50 51 54 57 64 67 71 75 78 82 84 85 86 87 96 5 i c Ă e r t s i p S Spis treĂci Pseudoelementy Definiowanie stylów dla elementów w zaleĝnoĂci od atrybutów NowoĂÊ w CSS 3: zapytania o media Dziedziczenie Podnoszenie rangi deklaracji Kaskada Podsumowanie Rozdziaï 5. WïasnoĂci pisma Typografia w sieci WWW Stos fontów Szukanie fontów Ustawianie rozmiaru pisma NowoĂÊ w CSS 3: dostosowywanie rozmiaru fontów alternatywnych Kursywa Ustawianie gruboĂci pisma Kapitaliki Zbiorcze definiowanie wïasnoĂci pisma Podsumowanie Rozdziaï 6. WïasnoĂci tekstu Ustawienia odstÚpów Wielkie i maïe litery NowoĂÊ w CSS 3: cienie tekstu Wyrównywanie tekstu w poziomie Wyrównywanie tekstu w pionie WciÚcia akapitów Kontrolowanie odstÚpów Zdobienie tekstu Wkrótce! Podsumowanie Kolory i tïa Definiowanie kolorów NowoĂÊ w CSS 3: gradienty w tle Wybór palety kolorów Ustawianie koloru tekstu Ustawianie koloru tïa Ustawianie obrazu tïa Zbiorcze definiowanie wïasnoĂci tïa Podsumowanie Rozdziaï 7. 6 108 112 116 125 127 129 132 133 135 140 142 149 152 155 158 160 162 166 167 169 174 176 178 180 183 185 188 191 193 195 197 203 207 212 214 216 224 228 Rozdziaï 8. WïasnoĂci list i tabel Ustawianie punktorów Tworzenie wïasnych punktorów Korygowanie poïoĝenia punktorów Zbiorcze definiowanie wïasnoĂci list WïasnoĂci ukïadu tabeli Ustawianie odstÚpów miÚdzy komórkami Scalanie obramowañ miÚdzy komórkami PostÚpowanie z pustymi komórkami Ustawianie poïoĝenia podpisu tabeli Podsumowanie Rozdziaï 9. WïasnoĂci interfejsu uĝytkownika i treĂci generowanej Zmiana wyglÈdu kursora Dodawanie treĂci za pomocÈ CSS Uczenie przeglÈdarki liczenia OkreĂlanie rodzaju cudzysïowów Podsumowanie Rozdziaï 10. WïasnoĂci pól elementów Pole elementu WyĂwietlanie elementów Ustawianie szerokoĂci i wysokoĂci elementów PostÚpowanie w przypadku przepeïnienia elementów Elementy pïywajÈce Ustawianie marginesów Ustawianie obrysu Ustawianie obramowania NowoĂÊ w CSS 3: zaokrÈglanie rogów NowoĂÊ w CSS 3: obrazy w tle obramowania elementów Ustawianie dopeïnienia Wkrótce! Podsumowanie Rozdziaï 11. WïasnoĂci formatowania wizualnego Róĝnica miÚdzy oknem a dokumentem Wybór rodzaju pozycjonowania Pozycjonowanie elementów Ukïadanie elementów na osi pionowej Ustawianie widocznoĂci elementów Obcinanie widocznego obszaru elementu NowoĂÊ w CSS 3: ustawianie przezroczystoĂci elementów NowoĂÊ w CSS 3: tworzenie cieni elementów Podsumowanie Spis treĂci 229 232 233 234 235 236 238 239 241 242 243 245 248 250 252 254 256 257 261 264 267 270 273 276 279 281 284 287 290 292 293 295 299 301 306 308 310 312 314 316 318 7 S p i s t r e Ă c i Przeksztaïcenia i efekty przejĂcia NowoĂÊ w CSS 3: przeksztaïcenia elementów NowoĂÊ w CSS 3: efekty przejĂcia Podsumowanie Poprawki i ulepszenia Dostosowywanie CSS do Internet Explorera RozwiÈzywanie problemów z modelem polowym w IE Zerowanie ustawieñ CSS Naprawa elementów pïywajÈcych Podstawowe techniki CSS Tworzenie ukïadów wielokolumnowych przy uĝyciu elementów pïywajÈcych Formatowanie odnoĂników a nawigacja Sprite’y CSS Tworzenie menu rozwijanego przy uĝyciu CSS ZarzÈdzanie arkuszami stylów Techniki pisania czytelnego kodu CSS Biblioteki i ramy projektowe CSS Strategie doïÈczania arkuszy stylów do stron Usuwanie usterek Znajdowanie bïÚdów za pomocÈ narzÚdzi Firebug i Inspektor www Sprawdzanie poprawnoĂci kodu Minimalizacja kodu 32 najlepsze praktyki CSS Przewodnik po CSS Kody znaków HTML i UTF Skorowidz 319 323 332 337 339 340 349 351 356 359 362 366 370 373 377 378 383 384 388 392 397 398 401 409 423 429 i c Ă e r t s i p S Spis treĂci Rozdziaï 12. Rozdziaï 13. Rozdziaï 14. Rozdziaï 15. Dodatek A Dodatek B 8 WïasnoĂci tekstu 6 Rozdziaá 6. WáasnoĞci tekstu W rozdziale: Ustawienia odstÚpów Wielkie i maïe litery NowoĂÊ w CSS 3: cienie tekstu Wyrównywanie tekstu w poziomie Wyrównywanie tekstu w pionie WciÚcia akapitów Kontrolowanie odstÚpów Zdobienie tekstu Wkrótce! Podsumowanie Tekst moĝna znaleěÊ wszÚdzie. Sïuĝy zarówno do tak przyziemnych celów jak wypisanie skïadników pïatków Ăniadaniowych na opakowaniu, jak równieĝ do pisania poezji najwyĝszych lotów. Jest to najlepszy system do kodowania skomplikowanych informacji, jaki kiedykolwiek wynaleziono. Dla wielu osób tekst to po prostu zapis sïów, ale typografia jest sztukÈ, która wzbogaca sïowa o dodatkowe brzmienie. Sztuka skïadania tekstu nie polega tylko na okreĂleniu rozmiaru i ksztaïtu liter, lecz równieĝ na zdefiniowaniu odstÚpów miÚdzy literami, sïowami, wierszami oraz akapitami. Niestety monitor komputerowy to niedoskonaïe medium, przez co moĝliwoĂci typograficzne w internecie sÈ mocno ograniczone. Najwaĝniejsze zadania stojÈce przed projektantami to sprawienie, aby tekst byï jak najbardziej czytelny, oraz przykucie uwagi odbiorcy do wybranych fragmentów. Nie jest to ïatwe, ale w tym rozdziale poznasz narzÚdzia, które bÚdÈ Ci w tym pomocne. W ï a s n o Ă c i t e k s t u 169 174 176 178 180 183 185 188 191 193 167 Rozdziaï 6. Listing 6.1. Kod HTML 5, na podstawie którego utworzono przykïady do tego rozdziaïu. Znajduje siÚ w nim poïÈczenie z ostatecznÈ wersjÈ pliku CSS z rozdziaïu 5. oraz z nowym plikiem o nazwie text-properties.css, którego budowa zostanie przedstawiona w tym rozdziale !-- HTML5 -- !DOCTYPE html html lang= pl head meta charset= utf-8 title Alicja w Krainie Czarów | Rozdziaï II /title link href= ../_css/font-properties.css type= text/css rel= stylesheet link href= ../_css/text-properties.css type= text/css rel= stylesheet !--[if IE ]-- style @import url(_css/ie.css); /style script src= script/HTML5forIE.js type=text/javascript /script ![endif]-- /head body header h1 Alicja w Krainie Czarów /h1 p class= byline span class= author Lewis Carroll /span /p header article !-- Article -- header h2 strong Rozdziaï II. /strong Sadzawka z ïez /h2 /header p Ach jak zdumiewajÈco! Coraz zdumiewajÈcej! — krzyknÚïa Alicja. span class= strike Byïa tak ´zdumiona, ĝe aĝ zapomniaïa o poprawnym wyraĝaniu siÚ. /span — RozciÈgam siÚ teraz jak ´najwiÚkszy teleskop na Ăwiecie. Do widzenia, nogi! — SpoglÈdajÈc w dóï, Alicja zauwaĝyïa, ĝe jej ´nogi wydïuĝaïy siÚ coraz bardziej i ginÚïy w oddali. — O moje biedne nóĝki, któĝ wam teraz ´bÚdzie wkïadaï skarpetki i buciki? Bo em ja /em z pewnoĂciÈ nie dam sobie z tym rady, bÚdÈc od ´was tak daleko. Musicie sobie teraz radziÊ same. p „Powinnam jednak byÊ dla nich uprzejma — pomyĂlaïa Alicja — bo mogÈ nie pójĂÊ tam, gdzie ja ´bÚdÚ chciaïa. Zaraz, zaraz... Wiem. BÚdÚ im dawaïa po nowej parze bucików na kaĝde Boĝe ´Narodzenie”. /p p Tu Alicja zaczÚïa zastanawiaÊ siÚ, w jaki sposób dorÚczy im prezenty. „Chyba przez posïañca - ´pomyĂlaïa. — Ale jakie to bÚdzie Ămieszne posyïaÊ podarunki swoim wïasnym nogom. A jak zabawnie ´bÚdzie wyglÈdaï adres... /p div class= asis Wielmoĝna Pani Prawa Noga Alicji, Dywanik przed Kominkiem, tuĝ obok paleniska, z serdecznym pozdrowieniem od Alicji. /div /article footer ul li a href= target= _self Spis treĂci /a /li li a href= target= _self O autorze /a /li li a href= target= _self O ksiÈĝkach /a /li li a href= target= _self O witrynie /a /li /ul /footer /body /html u t s k e t i c Ă o n s a ï W 168 Tabela 6.1. WartoĂci wïasnoĂci letter-spacing WartoĂÊ normal dïugoĂÊ ZgodnoĂÊ IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 Listing 6.2. text-properties.css — w nagïówku h1 (tytuï ksiÈĝki) odstÚpy miÚdzy literami zostaïy zmniejszone, czego efektem jest ĂciĂniÚty tekst Tytuï rozdziaïu zostaï natomiast rozstrzelony, aczkolwiek we fragmencie z numerem rozdziaïu (Rozdziaï II) styl ten zostaï anulowany, tak ĝe ma on normalny wyglÈd. Ponadto zmniejszono odstÚp po pierwszej literze akapitu, która zostaïa sformatowana jako inicjaï . /*** Rozdziaá 6. | text-properties.css ***/ h1 { letter-spacing: -.05em; } h2 { letter-spacing: 2px; } h2 strong { letter-spacing: 0; } header + p:first-letter { letter-spacing: -.05em; } Kod z listingu 6.2 zastosowany do strony z listingu 6.1. DziÚki zmniejszeniu odstÚpów miÚdzy literami tytuï wyglÈda bardziej jak logo i wyróĝnia siÚ na tle reszty tekstu. To samo dotyczy tytuïu rozdziaïu, lecz w tym przypadku zastosowano zwiÚkszenie odstÚpów miÚdzy literami WïasnoĂci tekstu Ustawienia odstÚpów W kaskadowych arkuszach stylów ustawianie takich parametrów tekstu jak odstÚpy miÚdzy literami (ang. tracking), sïowami i liniami w akapicie (ang. leading) jest bardzo ïatwe. OczywiĂcie podobny efekt moĝna by uzyskaÊ, korzystajÈc wyïÈcznie z jÚzyka HTML. Wystarczyïoby w tym celu tylko odpowiednio uĝyÊ spacji nieïamliwych i elementu zïamania wiersza. Lecz takÈ bezïadnÈ gmatwaninÚ znaczników nieïatwo zaimplementowaÊ, kontrolowaÊ i modyfikowaÊ. W CSS wszystkie te wïaĂciwoĂci tekstu kontroluje siÚ o wiele ïatwiej. Ustawianie odstÚpów miÚdzy literami Do ustawiania odstÚpów miÚdzy literami (ang. tracking) w jÚzyku CSS sïuĝy wïasnoĂÊ o nazwie letter-spacing (tabela 6.1). Zazwyczaj zwiÚkszenie odlegïoĂci miÚdzy poszczególnymi literami powoduje, ĝe tekst staje siÚ bardziej czytelny, ale nie moĝna przesadzaÊ, gdyĝ po przekroczeniu pewnego progu kolejne wyrazy zaczynajÈ siÚ zlewaÊ i wystÚpuje efekt odwrotny. Aby okreĂliÊ odstÚp miÚdzy literami: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ letter-spacing. Wpisz na liĂcie deklaracji wïasnoĂÊ letter-spacing i postaw dwukropek (listing 6.2). letter-spacing: 2. OkreĂl odlegïoĂÊ miÚdzy literami. -.05em; WïasnoĂci letter-spacing moĝna przypisaÊ jeden z dwóch rodzajów wartoĂci: V DodatniÈ lub ujemnÈ liczbÚ z jednostkÈ dïugoĂci, np. -.05em, która ustala odlegïoĂÊ miÚdzy literami w tekĂcie. WiÚcej informacji na temat jednostek i wartoĂci znajduje siÚ w czÚĂci wstÚpnej ksiÈĝki. V Sïowo kluczowe normal, które anuluje odziedziczone ustawienia. 169 U s t a w i e n i a o d s t Ú p ó w Tracking czy kerning Termin tracking okreĂla regulacjÚ odstÚpów miÚdzyliterowych w caïym sïowie, natomiast kerning oznacza ustawianie odstÚpów miÚdzy konkretnymi parami znaków w fontach proporcjonalnych. Czy to nie masïo maĂlane? Nie, miÚdzy tymi pojÚciami jest waĝna róĝnica. Tracking to ustawianie równego odstÚpu miÚdzy wszystkimi parami liter w sïowie, natomiast kerning polega na definiowaniu Ăwiatïa miÚdzy poszczególnymi parami liter w celu nadania tekstowi jednolitego wyglÈdu. Jednakĝe zastosowanie trackingu moĝe spowodowaÊ powiÚkszenie odstÚpu miÚdzy niektórymi parami liter w celu zwiÚkszenia czytelnoĂci tekstu. OczywiĂcie moĝna ustawiÊ Ăwiatïo miÚdzy dowolnÈ parÈ liter za pomocÈ CSS, ale nie zalecam robienia tego. Profesjonalny kerning polega na uĝyciu specjalnych programów do skïadania tekstu, gdyĝ trudno jest wszystko ustawiÊ na oko. Rozdziaï 6. Wskazówki „ Kerning i tracking to dwa terminy typograficzne, które sÈ czÚsto mylone. Oba odnoszÈ siÚ do metod regulacji Ăwiatïa miÚdzyliterowego, ale na róĝne sposoby (ramka „Tracking czy kerning”). „ NajlepszÈ jednostkÈ do ustawiania odstÚpu miÚdzy literami jest em, poniewaĝ jej wartoĂÊ zaleĝy od rozmiaru pisma. Kiedy rozmiar ten siÚ zmieni, odstÚpy miÚdzy literami automatycznie siÚ do niego dostosujÈ. „ Dodatnie wartoĂci wïasnoĂci letter-spacing powodujÈ zwiÚkszenie Ăwiatïa miÚdzyliterowego, a ujemne — jego zmniejszenie. WartoĂÊ 0 go nie zwiÚksza ani nie zmniejsza, ale uniemoĝliwia justowanie (podrozdziaï „Wyrównywanie tekstu w poziomie”). w ó p Ú t s d o a i n e i w a t s U 170 Listing 6.3. text-properties.css — po zastosowaniu tego kodu do strony z listingu 6.1 sïowa w nagïówku h1 prawie na siebie nachodzÈ, ale to nie przeszkadza, gdyĝ kaĝde z nich zaczyna siÚ od wielkiej litery, dziÚki czemu ïatwo je odróĝniÊ w tytule rozdziaïu sïowa sÈ rozstrzelone, co sprawia, ĝe strona dziÚki dodatkowej przestrzeni wydaje siÚ lĝejsza . Natomiast /*** Rozdziaá 6. | text-properties.css ***/ h1 { letter-spacing: -.05em; word-spacing: -.1em; } h2 { letter-spacing: 2px; word-spacing: 3px; } h2 strong { letter-spacing: 0; } p { word-spacing: .075em; } header + p:first-letter { letter-spacing: -.05em; } .byline { word-spacing: -.3em; } .byline .author { word-spacing: 0; } WïasnoĂci tekstu Ustawianie odstÚpów miÚdzy wyrazami Podobnie jak w przypadku odstÚpów miÚdzy literami, regulujÈc Ăwiatïo miÚdzywyrazowe, moĝna równie dobrze polepszyÊ, jak i pogorszyÊ czytelnoĂÊ tekstu. Nieznaczne zwiÚkszenie odstÚpu miÚdzy wyrazami za pomocÈ wïasnoĂci word-spacing (tabela 6.2) moĝe sprawiÊ, ĝe bÚdzie siÚ go czytaïo ïatwiej, lecz zbyt duĝe odstÚpy utrudniajÈ czytelnikowi przenoszenie wzroku na kolejne sïowa, co bardzo przeszkadza w czytaniu. Aby okreĂliÊ odstÚp miÚdzy wyrazami: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ word-spacing. Wpisz na liĂcie deklaracji wïasnoĂÊ word-spacing i postaw dwukropek (listing 6.3). word-spacing: 2. OkreĂl odlegïoĂÊ miÚdzy wyrazami. .1em; WïasnoĂci word-spacing moĝna przypisaÊ jeden z dwóch rodzajów wartoĂci: V DodatniÈ lub ujemnÈ liczbÚ z jednostkÈ dïugoĂci, np. -.1em, która ustala odlegïoĂÊ miÚdzy wyrazami w tekĂcie. WiÚcej informacji na temat jednostek i wartoĂci znajduje siÚ w czÚĂci wstÚpnej ksiÈĝki. V Sïowo kluczowe normal, które anuluje odziedziczone ustawienia. Wskazówka „ Przestrzenie miÚdzy wyrazami, podobnie jak miÚdzy literami, naleĝy zmieniaÊ tylko w wyjÈtkowych przypadkach. Standardowe ustawienia sÈ juĝ najczÚĂciej idealnie dostosowane do wygodnego czytania i ich zmiana czÚsto przynosi wiÚcej zïego niĝ dobrego. U s t a w i e n i a o d s t Ú p ó w Kod z listingu 6.3 zastosowany do strony z listingu 6.1. W tytule ksiÈĝki odstÚp miÚdzy wyrazami zostaï zmniejszony, dziÚki czemu uzyskano ciekawy i czytelny efekt, natomiast w tytule rozdziaïu wyrazy sÈ rozstrzelone, co daje wraĝenie lekkoĂci tekstu Tabela 6.2. WartoĂci wïasnoĂci word-spacing WartoĂÊ normal dïugoĂÊ ZgodnoĂÊ IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 171 Rozdziaï 6. Ustawianie odstÚpów miÚdzy wierszami tekstu Kaĝdy, kto pisaï na studiach pracÚ na zaliczenie, wie, ĝe obowiÈzuje podwójny odstÚp miÚdzywierszowy, aby sprawdzajÈcemu ïatwiej czytaïo siÚ tekst oraz aby miaï miejsce na wpisywanie uwag. OdstÚp miÚdzy wierszami (ang. leading) zwiÚksza siÚ teĝ w celu uzyskania bardziej dramatycznego efektu. WïasnoĂÊ line-height (tabela 6.3) reguluje odlegïoĂÊ miÚdzy bazowymi liniami pisma (znajdujÈcymi siÚ na wysokoĂci spodniej strony wiÚkszoĂci liter) wierszy tekstu. Aby okreĂliÊ odstÚp miÚdzy wierszami tekstu: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ line-height. Wpisz na liĂcie deklaracji wïasnoĂÊ line-height i postaw dwukropek (listing 6.4). line-height: 2. OkreĂl odlegïoĂÊ miÚdzy wierszami tekstu. .9; WïasnoĂci line-height moĝna przypisaÊ jeden z czterech rodzajów wartoĂci: V LiczbÚ do pomnoĝenia przez rozmiar pisma — np. 2.0 oznacza podwojenie przestrzeni. Moĝna teĝ wpisaÊ samÈ dwójkÚ, ale bez kropki dziesiÚtnej kod nie przejdzie pomyĂlnie walidacji. w ó p Ú t s d o a i n e i w a t s U Tabela 6.3. WartoĂci wïasnoĂci line-height WartoĂÊ normal liczba dïugoĂÊ procent ZgodnoĂÊ IE3, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 Listing 6.4. text-properties.css — dla elementu body zostaï ustalony leading o wartoĂci 1.5 spacji, natomiast w akapitach zmieniono go na 24 piksele. JeĂli rozmiar pisma wynosi 12 pikseli, to odstÚp miÚdzywierszowy bÚdzie podwójny. W tytule ksiÈĝki odstÚp zostaï nieco zmniejszony /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9; } h2 { letter-spacing: 2px; word-spacing: 3px; } h2 strong { letter-spacing: 0; } p { word-spacing: .075em; line-height: 24px; } header + p:first-letter { letter-spacing: -.05em; line-height: 24px; } .byline { word-spacing: -.3em; } .byline .author { word-spacing: 0; } 172 Wskazówki „ ZwiÚkszenie odstÚpu miÚdzywierszowego powoduje, ĝe tekst staje siÚ bardziej czytelny, zwïaszcza gdy jest go duĝo. Zazwyczaj najlepszy efekt uzyskuje siÚ, stosujÈc wartoĂci z przedziaïu 1.5 – 2 rozmiarów pisma. „ Aby otrzymaÊ podwójny odstÚp miÚdzywierszowy, nadaj wïasnoĂci line-height wartoĂÊ 2 lub 200 . Analogicznie w celu potrojenia go zastosuj wartoĂci 3 lub 300 itd. „ Aby zmniejszyÊ odstÚp miÚdzy wierszami, naleĝy zastosowaÊ wartoĂÊ mniejszÈ niĝ 100 lub liczbÚ mniejszÈ od 1. Efekt moĝe byÊ doĂÊ ciekawy wizualnie, ale raczej nie przysporzy Ci czytelników, jeĂli tekstu nie bÚdzie siÚ daïo czytaÊ. „ OdstÚp miÚdzywierszowy moĝna ustawiÊ jednoczeĂnie z rozmiarem pisma przy uĝyciu wïasnoĂci zbiorczej font (podrozdziaï „Zbiorcze definiowanie wïasnoĂci pisma” w rozdziale 5.). WïasnoĂci tekstu V LiczbÚ z jednostkÈ dïugoĂci, np. 24px. Wówczas odlegïoĂÊ miÚdzy wierszami zostanie ustawiona na podanÈ wartoĂÊ i bÚdzie niezaleĝna od rozmiaru pisma. JeĂli wiÚc rozmiar pisma zostanie ustawiony na 12px, a odstÚp miÚdzywierszowy na 24px, to tekst bÚdzie miaï podwójny odstÚp miÚdzy wierszami. WiÚcej informacji na temat jednostek i wartoĂci znajduje siÚ w czÚĂci wstÚpnej ksiÈĝki. V WartoĂÊ procentowÈ, która reguluje odstÚp miÚdzywierszowy wzglÚdem rozmiaru pisma. V Sïowo kluczowe normal, które anuluje odziedziczone ustawienia. U s t a w i e n i a o d s t Ú p ó w Kod z listingu 6.4 zastosowany do strony z listingu 6.1. OdstÚp miÚdzy wierszami w akapitach zostaï zwiÚkszony, aby uïatwiÊ czytanie i przeglÈdanie tekstu 173 Rozdziaï 6. Wielkie i maïe litery Kiedy treĂÊ prezentowana na stronach jest wytwarzana na bieĝÈco, np. pobierana z bazy danych, nigdy nie moĝna byÊ pewnym, czy tekst zostanie napisany maïymi, wielkimi, czy mieszanymi literami. Za pomocÈ wïasnoĂci text-transform (tabela 6.4) moĝna zapanowaÊ nad wielkoĂciÈ liter bez wzglÚdu na to, w jakim stanie przyjdÈ ze ěródïa. Aby okreĂliÊ wielkoĂÊ liter w tekĂcie: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ text-transform. Wpisz na liĂcie deklaracji wïasnoĂÊ text-transform i postaw dwukropek (listing 6.5). text-transform: 2. OkreĂl wielkoĂÊ liter. uppercase; WïasnoĂci text-transform moĝna jako wartoĂÊ przypisaÊ jedno z czterech sïów kluczowych: V capitalize — pierwsza litera kaĝdego wyrazu bÚdzie wielka; V uppercase — wszystkie litery bÚdÈ wielkie; V lowercase — wszystkie litery bÚdÈ maïe; V none — anuluje odziedziczone ustawienia i pozostawia tekst w pierwotnej postaci. y r e t i l e ï a m i e i k l e i W Tabela 6.4. WartoĂci wïasnoĂci text-transform WartoĂÊ capitalize uppercase lowercase none ZgodnoĂÊ IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 Listing 6.5. text-properties.css — wïasnoĂÊ text-transform sïuĝy do ustawiania wielkoĂci liter. W tym przypadku nazwisko i imiÚ autora oraz treĂÊ elementów naleĝÈcych do klasy asis zostanÈ napisane wielkimi literami /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9em; } h2 { letter-spacing: 2px; word-spacing: 3px; } h2 strong { letter-spacing: 0; } p { word-spacing: .075em; line-height: 24px; } header + p:first-letter { letter-spacing: -.05em; line-height: 24px; } .byline { word-spacing: -.3em; } .byline .author { word-spacing: 0; text-transform: uppercase; } .asis { text-transform: uppercase; } 174 WïasnoĂci tekstu Wskazówki „ WïasnoĂÊ text-transform najlepiej nadaje siÚ do formatowania treĂci generowanej dynamicznie. JeĂli na przykïad w bazie danych wszystkie nazwy sÈ zapisane w caïoĂci wielkimi literami, to za pomocÈ tej wïasnoĂci moĝna je dostosowaÊ do czytania. „ PamiÚtaj, ĝe wartoĂÊ capitalize zamieni na wielkie pierwsze litery wszystkich wyrazów, a nawet pojedyncze litery, np. „i” albo „a”. W praktyce wartoĂÊ ta jest przydatna tylko do formatowania imion i nazwisk. „ NIE PISZ TEKSTU SAMYMI WIELKIMI LITERAMI. Nad tekstem zapisanym w dokumencie HTML w taki sposób trudniej jest zapanowaÊ za pomocÈ arkuszy stylów. Co wiÚcej, osoby posïugujÈce siÚ czytnikami ekranu usïyszÈ to jako krzyk. O wiele lepiej jest pisaÊ maïymi literami i zwiÚkszaÊ je w razie potrzeby za pomocÈ wartoĂci uppercase. W i e l k i e i m a ï e l i t e r y 175 Kod z listingu 6.5 zastosowany do strony z listingu 6.1. ImiÚ i nazwisko autora sÈ napisane wielkimi literami (zobacz teĝ opis wïasnoĂci small-caps w rozdziale 5.) ZgodnoĂÊ FF1.9, S1.1, C2, O10, CSS3 FF1.9, S1.1, C2, O10, CSS3 Tabela 6.5. WartoĂci wïasnoĂci text-shadow WartoĂÊ kolor przesuniÚcie ´-w-poziomie przesuniÚcie ´-w-pionie zamazanie none FF1.9, S1.1, C2, O10, CSS3 FF1.9, S1.1, C2, O10, CSS3 FF1.9, S1.1, C2, O10, CSS3 Kod z listingu 6.6 zastosowany do strony z listingu 6.1. Aby zauwaĝyÊ róĝnicÚ, moĝe byÊ konieczne porównanie tego zrzutu ekranu z poprzednim. Tytuï ksiÈĝki sprawia wraĝenie, jakby byï wytïoczony na stronie, natomiast o tytule rozdziaïu moĝna powiedzieÊ, ĝe wrÚcz wyskakuje ze swojego miejsca Rozdziaï 6. NowoĂÊ w CSS 3: cienie tekstu Dodatek cienia to tradycyjna metoda nadawania tekstowi wraĝenia gïÚbi i niezwykïego wyglÈdu. WiÚkszoĂÊ przeglÈdarek obsïuguje wïasnoĂÊ CSS 3 o nazwie text-shadow (tabela 6.5), która umoĝliwia zdefiniowanie takich parametrów cienia tekstu jak kolor, przesuniÚcie wzglÚdem tekstu (w poziomie i w pionie), rozpiÚtoĂÊ oraz zamazanie. W przeglÈdarkach, w których nie jest ona obsïugiwana, po prostu nie zostanie wyĂwietlony cieñ. Aby utworzyÊ cieñ tekstu: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ text-shadow. Wpisz na liĂcie deklaracji wïasnoĂÊ text-shadow i postaw dwukropek (listing 6.6). text-shadow: 2. OkreĂl przesuniÚcie w poziomie i w pionie. Zrób spacjÚ, a za niÈ wstaw dwie dodatnie lub ujemne wartoĂci z jednostkami dïugoĂci, które równieĝ oddziel spacjami. 2px 2px; Pierwsza wartoĂÊ okreĂla przesuniÚcie cienia wzglÚdem tekstu w pionie (wartoĂÊ dodatnia przesuwa go do góry, a ujemna w dóï), a druga w poziomie (dodatnia przesuwa go w prawo, a ujemna w lewo). 3. OkreĂl poziom rozmazania. Zrób spacjÚ, a za niÈ wpisz dodatniÈ wartoĂÊ z jednostkÈ dïugoĂci. WartoĂci ujemne sÈ traktowane jako 0. 2px u t s k e t e i n e i c : 3 S S C w Ê Ă o w o N 176 Listing 6.6. text-properties.css — wïasnoĂÊ text-shadow umoĝliwia ustawienie poïoĝenia cienia w poziomie i w pionie oraz zdefiniowanie promienia rozmazania. Tytuï ksiÈĝki ma podwójny cieñ, co sprawia, ĝe wyglÈda, jakby byï wytïoczony , natomiast tytuï rozdziaïu ma ciemny cieñ przesuniÚty tylko nieznacznie, przez co sïowa wydajÈ siÚ unosiÊ nad stronÈ /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9em; text-shadow: rgba(51,51,51,.9) -1px -1px ´3px, rgba(203,203,203,.9) 1px 1px 3px; } h2 { letter-spacing: 2px; word-spacing: 3px; line-height: 1em; text-shadow: rgba(0,0,0,.5) 2px 2px 2px; } h2 strong { letter-spacing: 0; text-shadow: none; } p { word-spacing: .075em; line-height: 24px; } p strong { text-transform: uppercase; } header + p:first-letter { letter-spacing: -.05em; line-height: 24px; text-shadow: rgba(51,51,51,.9) -1px -1px ´3px, rgba(203,203,203,.9) 1px 1px 3px; } .byline { word-spacing: -.3em; } .byline .author { word-spacing: 0; text-transform: uppercase; } .asis { text-transform: uppercase; } WïasnoĂci tekstu 4. OkreĂl kolor. Zrób spacjÚ, a za niÈ wpisz wartoĂÊ koloru cienia. rgba(0,0,0,.5) WiÚcej informacji na temat definiowania kolorów znajdziesz w podrozdziale „Definiowanie kolorów” rozdziaïu 7. 5. Dodaj kolejne cienie. JeĂli chcesz, moĝesz zdefiniowaÊ wiÚcej cieni (dowolnÈ ich liczbÚ). W tym celu dodaj nowÈ deklaracjÚ wïasnoĂci text-shadow albo wpisz nowÈ definicjÚ po przecinku. text-shadow: rgba(51,51,51,.9) ´-1px -1px 3px, rgba(203,203,203,.9) ´1px 1px 3px; Wskazówki „ Aby anulowaÊ cieñ zdefiniowany wczeĂniej w arkuszu stylów, moĝna uĝyÊ wartoĂci none. „ Do definiowania kolorów cieni najlepiej nadaje siÚ notacja RGBA. DziÚki niej wszystko, co znajduje siÚ pod cieniem, bÚdzie przez niego przeĂwitywaÊ, tworzÈc realistyczny efekt. „ Mimo iĝ tworzony jest cieñ, moĝna go pokolorowaÊ na dowolny kolor. JeĂli wiÚc tekst znajduje siÚ na czarnym tle, to moĝna uĝyÊ jasnego koloru, aby utworzyÊ poĂwiatÚ. „ W rozdziale 11. dowiesz siÚ, jak tworzyÊ cienie elementów blokowych, które stosuje siÚ wïaĂnie do nich zamiast do tekstu. „ Cieñ nie ma wpïywu na poïoĝenie tekstu, do którego jest zastosowany. „ Za pomocÈ cieni uĝytych w poïÈczeniu z pseudoklasÈ :hover moĝna sprawiÊ, ĝe odnoĂniki bÚdÈ „podskakiwaïy”, kiedy najedzie siÚ na nie kursorem. 177 N o w o Ă Ê w C S S 3 : c i e n i e t e k s t u Rozdziaï 6. Wyrównywanie tekstu w poziomie Zwykle tekst wyrównuje siÚ do lewego marginesu albo justuje (wyrównuje zarówno do prawego, jak i lewego marginesu), co czasami nazywa siÚ stylem gazetowym. Od czasu do czasu w celu wyróĝnienia fragmentu albo uzyskania jakiegoĂ specjalnego efektu tekst moĝe zostaÊ wyĂrodkowany, a nawet wyrównany do marginesu prawego. Do ustawiania tych parametrów w CSS sïuĝy wïasnoĂÊ text-align (tabela 6.6). Aby okreĂliÊ wyrównanie tekstu: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ text-align. Wpisz na liĂcie deklaracji wïasnoĂÊ text-align i postaw dwukropek (listing 6.7). text-align: 2. OkreĂl wyrównanie tekstu w poziomie. center; WïasnoĂci text-align moĝna jako wartoĂÊ przypisaÊ jedno z nastÚpujÈcych sïów kluczowych: V left — wyrównanie tekstu do lewego marginesu; V right — wyrównanie tekstu do prawego marginesu; Tabela 6.6. WartoĂci wïasnoĂci text-align WartoĂÊ left right center justify inherit auto ZgodnoĂÊ IE3, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 Kod z listingu 6.7 zastosowany do strony z listingu 6.1. Na razie po zdefiniowaniu róĝnych rodzajów wyrównania do róĝnych fragmentów strona wydaje siÚ jakby nieco „rozbiegana”, ale formatowanie niektórych elementów jeszcze zmienimy, kiedy bÚdzie mowa o pozycjonowaniu V center — wyĂrodkowanie tekstu; V justify — wyjustowanie tekstu; V inherit — wyrównanie takie samo jak w elemencie nadrzÚdnym; V auto — domyĂlne wyrównanie, a wiÚc najczÚĂciej do lewego marginesu. e i m o i z o p w u t s k e t e i n a w y n w ó r y W 178 Listing 6.7. text-properties.css — klasa byline zostaje wyrównana do prawego marginesu , natomiast tytuï rozdziaïu i zawartoĂÊ nagïówka h2 zostajÈ wyĂrodkowane, a treĂÊ ksiÈĝki wyjustowana Wskazówki „ Tekst jest domyĂlnie wyrównywany do lewego marginesu. WïasnoĂci tekstu /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9em; text-shadow: rgba(51,51,51,.9) -1px -1px ´3px, rgba(203,203,203,.9) 1px 1px 3px; } h2 { letter-spacing: 2px; word-spacing: 3px; line-height: 1em; text-shadow: rgba(0,0,0,.5) 2px 2px 2px; text-align: center; } h2 strong { letter-spacing: 0; text-shadow: none; } p { word-spacing: .075em; line-height: 24px; text-align: justify; } p strong { text-transform: uppercase; } header + p:first-letter { letter-spacing: -.05em; line-height: 24px; text-shadow: rgba(51,51,51,.9) -1px -1px ´3px, rgba(203,203,203,.9) 1px 1px 3px; } .byline { word-spacing: -.3em; text-align: right; } .byline .author { word-spacing: 0; text-transform: uppercase; } .asis { text-transform: uppercase; } „ Poniewaĝ justowanie wymaga, aby wszystkie wiersze tekstu miaïy takÈ samÈ dïugoĂÊ, czasami konieczna jest zmiana odstÚpów miÚdzy wyrazami, która moĝe powodowaÊ, ĝe tekst na ekranie wyglÈda doĂÊ dziwnie. Ponadto opinie na temat tego, czy justowanie pomaga, czy przeszkadza w czytaniu, sÈ podzielone. W y r ó w n y w a n i e t e k s t u w p o z i o m i e 179 Rozdziaï 6. Wyrównywanie tekstu w pionie Za pomocÈ wïasnoĂci vertical-align moĝna okreĂliÊ pionowe uïoĝenie elementu Ăródliniowego wzglÚdem elementów znajdujÈcych siÚ nad i pod . Oznacza to, ĝe wïasnoĂci tej (tabela 6.7) nim moĝna uĝywaÊ tylko do formatowania elementów Ăródliniowych i tabel, tzn. elementów nietworzÈcych przed ani za sobÈ zïamania wiersza, np. kotwic (a), obrazów (img), uwypuklonego tekstu (em), silnie wyróĝnionego tekstu (strong) oraz danych tabeli (td). Aby okreĂliÊ wyrównanie elementu w pionie: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ vertical-align. Wpisz na liĂcie deklaracji wïasnoĂÊ vertical-align i postaw dwukropek (listing 6.8). vertical-align: Róĝne rodzaje wyrównania. Linie sïuĝÈ tylko jako pomoc e i n o i p w u t s k e t e i n a w y n w ó r y W 180 Tabela 6.7. WartoĂci wïasnoĂci vertical-align WartoĂÊ super sub baseline wartoĂÊ- ´wzglÚdna dïugoĂÊ procent ZgodnoĂÊ IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE5.5, FF1, S1, C1, O3.5, CSS1 IE5.5, FF1, S1, C1, O3.5, CSS1 IE7, FF1, S1, C1, O3.5, CSS1 Kod z listingu 6.8 zastosowany do strony z listingu 6.1. Numer rozdziaïu zostaï przesuniÚty do góry wzglÚdem tekstu, do którego siÚ odnosi WïasnoĂci tekstu Listing 6.8. text-properties.css — wïasnoĂci vertical-align moĝna przypisywaÊ zarówno wartoĂci wzglÚdne, jak i bezwzglÚdne /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9em; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } h2 { letter-spacing: 2px; word-spacing: 3px; line-height: 1em; text-shadow: rgba(0,0,0,.5) 2px 2px 2px; text-align: center; } h2 strong { letter-spacing: 0; text-shadow: none; vertical-align: super; } p { word-spacing: .075em; line-height: 24px; text-align: justify; } p strong { text-transform: uppercase; } header + p:first-letter { letter-spacing: -.05em; line-height: 24px; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } .byline { text-align: right; word-spacing: -.3em; } .byline .author { word-spacing: 0; text-transform: uppercase; vertical-align: -.6em; } .asis { text-transform: uppercase; } W y r ó w n y w a n i e t e k s t u w p i o n i e 181 Tabela 6.8. Ustawienia poïoĝenia elementu wzglÚdem rodzica Ustawienie top Opis Wyrównuje wierzchoïek elementu z górnÈ liniÈ najwyĝej poïoĝonego elementu w linii Wyrównuje liniÚ ĂrodkowÈ elementu z liniÈ ĂrodkowÈ jego rodzica Wyrównuje liniÚ dolnÈ elementu z liniÈ dolnÈ najniĝej poïoĝonego elementu w linii Wyrównuje wierzch tekstu elementu z wierzchem tekstu jego rodzica middle bottom text-top text-bottom Wyrównuje spód tekstu elementu ze spodem tekstu jego rodzica Matematyka i nauka Indeksy górne i dolne sÈ uĝywane w zapisie dziaïañ matematycznych i w notacji naukowej. Na przykïad aby zapisaÊ twierdzenie Pitagorasa, trzeba uĝyÊ indeksu górnego: a2 + b2 = c2 Zapis wzoru chemicznego czÈsteczki wody wymaga natomiast zastosowania indeksu dolnego: H2O PamiÚtaj jednak, ĝe uĝycie indeksu nie powoduje zmniejszenia rozmiaru pisma, a wiÚc w celu uzyskania prawdziwej notacji naukowej moĝe byÊ potrzebne uĝycie dodatkowo wïasnoĂci font-size (podrozdziaï „Ustawianie rozmiaru pisma” w rozdziale 5.). Rozdziaï 6. 2. OkreĂl wyrównanie elementu w pionie. super; WïasnoĂci vertical-align moĝna jako wartoĂÊ przypisaÊ jedno z poniĝszych sïów kluczowych. V super — przenosi tekst do indeksu górnego nad liniÈ bazowÈ. V sub — przenosi tekst do indeksu dolnego pod liniÈ bazowÈ. V baseline — umieszcza tekst na linii bazowej. V Jedna z wartoĂci wzglÚdnych wymienionych w tabeli 6.8 — ustawia element w odniesieniu do ustawienia elementu nadrzÚdnego. Aby na przykïad wyrównaÊ wierzchniÈ czÚĂÊ tekstu elementu z wierzchniÈ czÚĂciÈ tekstu jego rodzica, naleĝy napisaÊ text-top. V WartoĂÊ procentowa — podnosi lub obniĝa liniÚ bazowÈ elementu proporcjonalnie do rozmiaru pisma elementu nadrzÚdnego (np. o 25 ). Wskazówki „ W indeksie górnym moĝna umieszczaÊ odwoïania w postaci ïÈczy do przypisów, które znajdujÈ siÚ na dole bieĝÈcej lub innej strony. „ Indeks górny i dolny moĝna równieĝ uzyskaÊ za pomocÈ elementów sup i sub, ale nie naleĝy ich uĝywaÊ jako elementów projektowych (jak w tym przypadku), lecz do tworzenia przypisów i w zapisie dziaïañ matematycznych. „ Przy tworzeniu wielokolumnowego ukïadu strony elementy wyrównywane w pionie mogÈ nie byÊ wyĂwietlane tam, gdzie powinny. Dobrym rozwiÈzaniem tego problemu jest uĝycie pozycjonowania wzglÚdnego, którego opis znajduje siÚ w rozdziale 10. e i n o i p w u t s k e t e i n a w y n w ó r y W 182 Tabela 6.9. WartoĂci wïasnoĂci text-indent WartoĂÊ dïugoĂÊ procent inherit ZgodnoĂÊ IE3, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 Kod z listingu 6.9 zastosowany do strony z listingu 6.1. Wszystkie akapity z wyjÈtkiem pierwszego majÈ wciÚty pierwszy wiersz na szerokoĂÊ dwóch liter. SzerokoĂÊ wciÚcia bÚdzie siÚ automatycznie dostosowywaÊ do rozmiaru pisma „ Jako ĝe wciÚcia akapitów sÈ znacznie bardziej popularne w druku niĝ na stronach internetowych, warto rozwaĝyÊ moĝliwoĂÊ zastosowania tego efektu tylko w arkuszach stylów przeznaczonych dla druku. WïasnoĂci tekstu WciÚcia akapitów WciÚcie pierwszego wiersza (najczÚĂciej na gïÚbokoĂÊ piÚciu spacji) to tradycyjna metoda rozpoczynania akapitów. W sieci to siÚ nie przyjÚïo, poniewaĝ wiÚkszoĂÊ przeglÈdarek redukuje kaĝdÈ liczbÚ spacji do jednej. Dlatego zrezygnowano z tradycyjnej metody i zaczÚto stosowaÊ dodatkowe zïamanie wiersza. JeĂli jednak chcesz wróciÊ do tradycyjnych metod i zaczynaÊ kaĝdy akapit od wciÚcia, moĝesz to zrobiÊ, korzystajÈc z wïasnoĂci text-indent (tabela 6.9). Aby zastosowaÊ wciÚcie pierwszego wiersza tekstu w elemencie: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ text-indent. Wpisz na liĂcie deklaracji wïasnoĂÊ text-indent i postaw dwukropek (listing 6.9). text-indent: 2. OkreĂl gïÚbokoĂÊ wciÚcia. 2em; WïasnoĂci text-indent moĝna przypisaÊ omówione poniĝej wartoĂci. V Odpowiedni efekt moĝna uzyskaÊ, stosujÈc liczbÚ z jednostkÈ dïugoĂci, np. 2em (wiÚcej informacji na temat jednostek i wartoĂci znajduje siÚ w czÚĂci wstÚpnej ksiÈĝki). V WartoĂÊ procentowa, np. 10 , tworzy wciÚcie o szerokoĂci proporcjonalnej do szerokoĂci elementu nadrzÚdnego (akapitu). Wskazówki „ JeĂli do oznaczania poczÈtku akapitów stosujesz wciÚcia, to wyzeruj marginesy i dopeïnienie, aby usunÈÊ dodatkowy odstÚp standardowo tworzony przez element p. WiÚcej o marginesach i dopeïnieniu dowiesz siÚ w rozdziale 8. 183 W c i Ú c i a a k a p i t ó w Rozdziaï 6. Listing 6.9. text-properties.css — mimo iĝ wciÚcie moĝna zastosowaÊ w kaĝdym bloku tekstu, tradycyjnie kojarzy siÚ ono z akapitami i dlatego ustawiïem wciÚcie dla wszystkich akapitów na 2em . Jednakĝe pierwszego akapitu w sekcji z reguïy siÚ nie wcina, wiÚc dla wszystkich pierwszych akapitów znajdujÈcych siÚ bezpoĂrednio za nagïówkiem wciÚcie ustawiono na 0. W tym przykïadzie jestem trochÚ nieuczciwy, poniewaĝ zastosowaïem marginesy i dopeïnienie, których opis znajduje siÚ dopiero w rozdziale 8. /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9em; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } h2 { letter-spacing: 2px; word-spacing: 3px; line-height: 1em; text-shadow: rgba(0,0,0,.5) 2px 2px 2px; text-align: center; } h2 strong { letter-spacing: 0; text-shadow: none; vertical-align: super; } p { word-spacing: .075em; line-height: 24px; text-align: justify; text-indent: 2em; margin: 0; padding: 0; } p strong { text-transform: uppercase; vertical-align: middle; } header + p { text-indent: 0; } w ó t i p a k a a i c Ú i c W header + p:first-letter { letter-spacing: -.05em; line-height: 24px; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } .byline { word-spacing: -.3em; text-align: right; } .byline .author { word-spacing: 0; text-transform: uppercase; vertical-align: -.6em; } .asis { text-transform: uppercase; } 184 Tabela 6.10. WartoĂci wïasnoĂci white-space WartoĂÊ normal pre nowrap ZgodnoĂÊ IE5.5, FF1, S1, C1, O4, CSS1 IE5.5, FF1, S1, C1, O4, CSS1 IE5.5, FF1, S1, C1, O4, CSS1 WartoĂÊ pre sprawia, ĝe wszystkie spacje zostajÈ zachowane, dziÚki czemu wiersz ma ksztaït ogona myszy Bez wartoĂci pre ciÈgi spacji zostajÈ zredukowane do pojedynczych znaków WartoĂÊ nowrap sprawia, ĝe caïy wiersz znajduje siÚ w jednej linii, przez co aby go przeczytaÊ, konieczne jest skorzystanie z poziomego paska przewijania WïasnoĂci tekstu Kontrolowanie odstÚpów Jak juĝ wiemy, przeglÈdarki dowolnie dïugie ciÈgi spacji zawsze interpretujÈ jako pojedynczy znak. Jedynym wyjÈtkiem od tej reguïy jest zawartoĂÊ elementu pre. Za pomocÈ CSS moĝna wyïÈczyÊ tÚ funkcjÚ oraz zdecydowaÊ, czy tekst moĝe byÊ zawijany na spacjach (dziaïanie podobne do dziaïania elementu nobr). Sïuĝy do tego wïasnoĂÊ white-space (tabela 6.10). Doskonaïym przykïadem sytuacji, w której moĝna uĝyÊ tej wïasnoĂci, jest formatowanie opowieĂci Myszy z trzeciego rozdziaïu Alicji w Krainie Czarów. Wiersz ten jest zapisany tak, ĝe wyglÈda . JeĂli dla klasy poem jak wygiÚty ogon myszy zostanie zdefiniowana wïasnoĂÊ white-space o wartoĂci pre, to wszystkie ciÈgi spacji zostanÈ , natomiast stosujÈc wartoĂÊ nowrap, zachowane sprawisz, ĝe spacje i zïamania wiersza bÚdÈ ignorowane, wskutek czego caïoĂÊ tekstu zostanie . wyĂwietlona w jednym bardzo dïugim wierszu K o n t r o l o w a n i e o d s t Ú p ó w 185 Kod z listingu 6.10 zastosowany do strony z listingu 6.1. Adres zostaï sformatowany poprzez dodanie spacji. Gdyby nie wartoĂÊ pre wïasnoĂci white-space, spacje te zostaïyby zredukowane do pojedynczych znaków Rozdziaï 6. Aby okreĂliÊ sposób postÚpowania ze spacjami: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ white-space. Wpisz na liĂcie deklaracji wïasnoĂÊ white-space i postaw dwukropek (listing 6.10). white-space: 2. OkreĂl sposób postÚpowania ze spacjami. pre; WïasnoĂci white-space moĝna przypisaÊ nastÚpujÈce wartoĂci: V pre — zachowuje wszystkie spacje. V nowrap — wyïÈcza zawijanie wierszy w miejscach, gdzie nie ma elementu br. V normal — decyzjÚ, jak potraktowaÊ spacje, pozostawia przeglÈdarce. Zazwyczaj oznacza to redukcjÚ ciÈgów spacji do pojedynczych znaków. Wskazówki „ Nie naleĝy myliÊ elementów HTML nobr i pre z wartoĂciami nowrap i pre wïasnoĂci white-space. Mimo iĝ ich zastosowanie jest w zasadzie takie samo, element nobr jest wycofywany i nie naleĝy go juĝ uĝywaÊ. „ TreĂÊ elementu, dla którego zostanie zdefiniowana wartoĂÊ nowrap, bÚdzie wyĂwietlona w jednym bardzo dïugim wierszu bez wzglÚdu na szerokoĂÊ okna przeglÈdarki. Aby przeczytaÊ caïy tekst, uĝytkownik moĝe byÊ zmuszony do uĝycia poziomego paska przewijania, a wiÚc lepiej tego unikaÊ. „ WartoĂÊ nowrap doskonale nadaje siÚ do zapobiegania zawijaniu tekstu w komórkach tabel. w ó p Ú t s d o e i n a w o l o r t n o K 186 WïasnoĂci tekstu Listing 6.10. text-properties.css — zawartoĂÊ elementów przypisanych do klasy asis bÚdzie wyĂwietlana na ekranie w taki sam sposób, jak jest zapisana w kodzie ěródïowym strony. Jest to moĝliwe dziÚki uĝyciu wïasnoĂci white-space ustawionej na wartoĂÊ pre. DziÚki temu moĝna sformatowaÊ adres do „nóĝek Alicji” zgodnie z intencjÈ autora ) /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9em; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } h2 { letter-spacing: 2px; word-spacing: 3px; line-height: 1em; text-shadow: rgba(0,0,0,.5) 2px 2px 2px; text-align: center; } h2 strong { letter-spacing: 0; text-shadow: none; vertical-align: super; } p { line-height: 24px; text-align: justify; text-indent: 1em; margin: 0; padding: 0; } header + p { text-indent: 0; } header + p:first-letter { letter-spacing: -.05em; line-height: 24px; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } p strong { text-transform: uppercase; vertical-align: middle; } .byline { word-spacing: -.3em; text-align: right; } .byline .author { word-spacing: 0; text-transform: uppercase; vertical-align: -.6em; } .asis { text-transform: uppercase; white-space: pre; } K o n t r o l o w a n i e o d s t Ú p ó w 187 Rozdziaï 6. Zdobienie tekstu Za pomocÈ wïasnoĂci text-decoration (tabela 6.11) moĝna ozdobiÊ tekst na trzy sposoby: dodajÈc podkreĂlenie, liniÚ nad tekstem oraz przekreĂlenie. Dodatków tych uĝywa siÚ w celu podkreĂlenia wagi fragmentów tekstu oraz przyciÈgniÚcia uwagi czytelnika. Aby dodaÊ lub usunÈÊ dekoracjÚ tekstu: 1. Dodaj do reguïy w arkuszu stylów wïasnoĂÊ text-decoration. Wpisz na liĂcie deklaracji wïasnoĂÊ text-decoration i postaw dwukropek (listing 6.11). text-decoration: 2. OkreĂl, jakie dekoracje tekstu chcesz zastosowaÊ. none; WïasnoĂci text-decoration moĝna przypisaÊ nastÚpujÈce wartoĂci: V underline — rysuje liniÚ pod tekstem; V overline — rysuje liniÚ nad tekstem; V line-through — rysuje liniÚ przez tekst; V none — anuluje wczeĂniejsze ustawienia dekoracji. u t s k e t e i n e i b o d Z Tabela 6.11. WartoĂci wïasnoĂci text-decoration WartoĂÊ none underline overline line-through ZgodnoĂÊ IE3, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 IE4, FF1, S1, C1, O3.5, CSS1 IE3, FF1, S1, C1, O3.5, CSS1 Kod z listingu 6.11 zastosowany do strony z listingu 6.1. Jeden wiersz tekstu jest skreĂlony Kod z listingu 6.11 zastosowany do strony z listingu 6.1. UsuniÚto podkreĂlenie odnoĂników w stopce 188 WïasnoĂci tekstu Listing 6.11. text-properties.css — przy uĝyciu wïasnoĂci text-decoration utworzyïem klasÚ o nazwie strike do skreĂlania niechcianego tekstu oraz usuwam podkreĂlenie hiperïÈczy /*** Rozdziaá 6. | text-properties.css ***/ body { line-height: 1.5; } h1 { letter-spacing: -.05em; word-spacing: -.1em; line-height: .9em; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } h2 { letter-spacing: 2px; word-spacing: 3px; line-height: 1em; text-shadow: rgba(0,0,0,.5) 2px 2px 2px; text-align: center; } h2 strong { letter-spacing: 0; text-shadow: none; vertical-align: super; } p { line-height: 24px; text-align: justify; text-indent: 1em; margin: 0; padding: 0; } p:first-of-type { text-indent: 0; } article p:first-of-type:first-letter { letter-spacing: -.05em; line-height: 24px; text-shadow: rgba(51,51,51,.9) -1px -1px 3px, rgba(203,203,203,.9) 1px 1px 3px; } p strong { text-transform: uppercase; vertical-align: middle; } a { text-decoration: none; } .byline { word-spacing: -.3em; text-align: right; } .byline .author { word-spacing: 0; text-transform: uppercase; vertical-align: -.6em; } .asis { text-transform: uppercase; white-space: pre; } .strike { text-decoration: line-through; } Z d o b i e n i e t e k s t u 189 Czy podkreĂlaÊ odnoĂniki Deklaracja text-decoration: none dla elementu a oznacza brak podkreĂlenia odnoĂników bez wzglÚdu na ustawienia przeglÈdarki. Z moich doĂwiadczeñ wynika, ĝe wielu uĝytkowników oczekuje, iĝ odnoĂniki bÚdÈ podkreĂlone. Mimo iĝ osobiĂcie nie lubiÚ podkreĂlaÊ hiperïÈczy — na stronie powstaje baïagan, a poza tym w CSS sÈ lepsze metody — jak tylko z tego zrezygnujÚ, od razu przychodzÈ do mnie e-maile z pretensjami. Jednym z rozwiÈzañ zastÚpczych dla zwykïego podkreĂlenia jest zastosowanie do elementów hiperïÈczy dolnej czÚĂci obramowania. WïasnoĂÊ border-bottom daje znacznie wiÚksze moĝliwoĂci kontroli wyglÈdu podkreĂlenia — umoĝliwia nawet zmianÚ koloru. WiÚcej informacji znajduje siÚ w rozdziale 14. Rozdziaï 6. Wskazówki „ JeĂli chcesz, moĝesz po spacji wpisaÊ jeszcze jednÈ wartoĂÊ (tabela 6.11). O ile pierwszÈ wartoĂciÈ nie jest none, moĝesz zdefiniowaÊ wszystkie pozostaïe wartoĂci naraz, oddzielajÈc je spacjami: overline underline line-through „ Koniec migajÈcych oczoplÈsów. W CSS 3 zrezygnowano z wartoĂci blink wïasnoĂci text-decoration. Natomiast element HTML blink zostaï usuniÚty juĝ dawno. Teraz aby podenerwowaÊ uĝytkowników migajÈcym tekstem, trzeba uĝyÊ Flasha. „ Ozdoby tekstu sÈ stosowane do caïoĂci tekstu, a nie do pojedynczych liter. Dlatego w elemencie potomnym nie moĝna zmieniÊ tej wïasnoĂci, jeĂli zostaïa ustawiona dla rodzica. „ Mimo iĝ element potomny nie moĝe zmieniÊ dekoracji zastosowanej do rodzica, moĝna do niego dodaÊ nowÈ dekoracjÚ. ZwróÊ uwagÚ na to, ĝe w przedstawionym przykïadzie element em ma przekreĂlenie, które zostaïo dodane do podkreĂlenia zdefiniowanego dla akapitu. „ PrzekreĂlanie to dobra metoda zaznaczania usuniÚtego tekstu. Ja na przykïad stosowaïem jÈ w katalogach internetowych zawierajÈcych ceny sprzedaĝy. OryginalnÈ cenÚ przekreĂlaïem, a obok pokazywaïem aktualnÈ. Mimo to lepszy do tego celu jest element del, który dodaje informacjÚ semantycznÈ. „ Tak naprawdÚ wïasnoĂci text-decoration uĝywam wyïÈcznie do wyïÈczania podkreĂlenia odnoĂników. PodkreĂlenie to jest oporne w formatowaniu — to po prostu zwykïa kreska w kolorze tekstu. TrwajÈ pewne prace nad umoĝliwieniem sprawowania nad nim lepszej kontroli, czyli dodaniem moĝliwoĂci okreĂlania odstÚpu, koloru i stylu. u t s k e t e i n e i b o d Z 190 WïasnoĂci tekstu Wkrótce! ChoÊ na razie dodano do CSS 3 tylko kilka nowych wïasnoĂci do formatowania tekstu, trwajÈ prace nad kilkoma kolejnymi. Obrys tekstu — wïasnoĂÊ text-outline bÚdzie umoĝliwiaÊ poprowadzenie wokóï glifów linii o dowolnie wybranym kolorze i gruboĂci. W przeglÈdarce Safari zaimplementowano juĝ podobnÈ wïasnoĂÊ jako rozszerzenie o nazwie -webkit-text-stroke i niewykluczone, ĝe tak bÚdzie wyglÈdaÊ ostateczna wersja, którÈ przyjmie W3C. Zawijanie tekstu — aktualnie tekst na stronach internetowych moĝna zawijaÊ tylko na spacjach. Nie ma ĝadnych wïasnoĂci pozwalajÈcych kontrolowaÊ zastosowanie ïÈczników i zïamañ wiersza. LukÚ tÚ zapeïni wïasnoĂÊ text-wrap. Justowanie tekstu — mimo iĝ tekst moĝna wyjustowaÊ, ustawiajÈc wïasnoĂÊ text-align na justify, nie moĝna tego wyrównania w ĝaden sposób kontrolowaÊ. Z tego powodu w tekĂcie mogÈ wystÈpiÊ nieestetycznie wyglÈdajÈce róĝnice odstÚpów miÚdzy wyrazami. WïasnoĂÊ text-justify bÚdzie oferowaïa kilka opcji justowania, a wïasnoĂÊ text-align-last pozwoli na okreĂlenie wyrównania ostatniego wiersza justowanego tekstu. W k r ó t c e ! 191 Rozdziaï 6. Kerning — przypominam, ĝe jest to niestandardowy odstÚp miÚdzy literami. Nowa wïasnoĂÊ punctuation-trim bÚdzie umoĝliwiaÊ kontrolowanie podstawowych parametrów kerningu. Znaki przestankowe — jednym z najczÚstszych problemów w typografii jest sytuacja, gdy na poczÈtku bloku tekstu znajduje siÚ znak inny niĝ alfanumeryczny, np. cudzysïów. WïasnoĂÊ hanging-punctuation bÚdzie umoĝliwiaïa okreĂlenie, jak naleĝy postÚpowaÊ z tymi znakami, czy zaliczaÊ je do bloku tekstu, czy nie. Ozdoby tekstu — do opisanej wczeĂniej wïasnoĂci text-decoration zostanÈ dodane nowe wïasnoĂci uzupeïniajÈce takie jak text-line-color, text-line-style, text-line-skip oraz text-underline-position. JeĂli chcesz wiedzieÊ, jak idÈ prace nad tymi wïasnoĂciami, zaglÈdaj na stronÚ moduïu tekstowego CSS 3 pod adresem www.w3.org/ TR/css3-text. ! e c t ó r k W 192 WïasnoĂci tekstu Podsumowanie 1. Zdefiniuj odstÚpy miÚdzy literami, sïowami i wierszami tekstu w nagïówkach. Wypróbuj róĝne opcje. ¥ciĂnij tekst, a potem go rozluěnij. 2. Zdefiniuj odstÚp miÚdzy wierszami tekstu w treĂci gïównej dokumentu. OkreĂl odstÚp miÚdzy wierszami w akapitach. Sprawdě, jaki wpïyw ma zmniejszanie i zwiÚkszanie tego parametru na czytelnoĂÊ tekstu. Od jakiego momentu zwiÚkszanie odstÚpu miÚdzywierszowego zaczyna pogarszaÊ czytelnoĂÊ? 3. Ustaw wyĂwietlanie treĂci nagïówka wielkimi literami. Moĝesz teĝ spróbowaÊ wyróĝniÊ nagïówki, modyfikujÈc rozmiar pisma. 4. Dodaj do nagïówków cieñ. Postaraj siÚ, aby cienie byïy dyskretne i nie rozpraszaïy uwagi. 5. Wyjustuj treĂÊ dokumentu. Zastosuj wïasnoĂÊ justowania dla akapitów. Czy tekst wyglÈda lepiej, czy gorzej niĝ w przypadku wyrównania do lewego marginesu, kiedy to linie tekstu sÈ nierówne z prawej strony? 6. Zastosuj wciÚcie akapitów. Wypróbuj kilka róĝnych ustawieñ wciÚcia, aby zobaczyÊ, które jest najlepsze. P o d s u m o w a n i e 193 Skorowidz S background-repeat, 219, 225 barwa, 199 baseline, 182 baza wiedzy, 26 bazowe linie pisma, 172 before, 110, 111 bezpieczna paleta kolorów, 13 bezpieczny font, 144 bezszeryfowe fonty, 137 biblioteka CSS, 383 block, 264 block-level, 36 blokowy element, 36, 264 Blueprint, 383 body, 33, 44, 66, 250 bold, 158 bolder, 158 border, 200, 222, 223, 279, 281, 282 border-bottom, 190 border-box, 222, 223 border-collapse, 239 border-image, 287 border-radius, 284, 286 border-spacing, 238 bottom, 242, 304 box-shadow, 316 box-shadows, 332 box-sizing, 292, 350 br, 41, 274 C canvas, 41 capitalize, 174 caption, 165, 242 caption-side, 242 Cascading Style Sheets, Patrz CSS center, 178 cieñ class, 34, 70 clear, 274 elementu, 316 S k o r o w i d z 429 Spis treĞci A absolute, 301, 304 active, 96, 98, 101, 102 after, 110, 111 agregacja, 386 align, 242 alpha(), 314 anchor, 33 animacje, 292 arkusz stylów dla okreĂlonych jÚzyków, 106 doïÈczanie do dokumentu HTML, 60 stron, 384 importowanie, 62 kaskadowy, 17 organizacja alfabetyczna, 381 oparta na strukturze stron, 381 wedïug typów selektorów, 381 zgodnie z przeznaczeniem, 381 Ăródliniowy, 277 usterki, 388 warunkowy dla Internet Explorera, 344 article, 42, 43, 45 artykuï, 43, 209 aside, 41, 42, 43, 45 atrybut, 33, 34 attr(), 251 auto, 126, 178, 237, 272 B backface-visibility, 329 background, 224 background-attachment, 220, 226 background-clip, 222 background-color, 214 background-origin, 223 background-position, 220 Skorowidz cieñ inset, 317 kolor, 317 przesuniÚcie, 316 rozmazanie, 316 rozproszenie, 317 tekstu, 176 clearfix, 357 close-quote, 251 collapse, 239 color, 212 dziedziczenie, 212 Color Jack, 211 Palette Generator, 211 content, 110, 222, 223, 250, 252 w Internet Explorerze, 251 content-box, 222, 223 counter, 252 counter(), 251 counter-increment, 252 counter-reset, 252 CSS, 9, 17, 19, 24, 57 z d i w o r o k S biblioteka, 383 deklaracja, 51 interpretacja przez przeglÈdarki, 21 ramy projektowe, 383 reguïy, 25, 27 reset, 75, 351, 355 Erica Meyera, 354 prosty, 352 YUI2, 353 skïadnia reguïy, 27 sprite, 370 Validator, 397 w Internet Explorerze dostosowanie, 340–50 model pola, 349 sztuczka ze znakiem podkreĂlenia, 342 warunkowy arkusz stylów, 344 wïasnoĂci, 20 zasada dziaïania, 20 zerowanie ustawieñ, 351 CSS 1, 23 CSS 2, 23 CSS 3, 17, 23, 29 CSS-reset, 351 cudzysïów, 254 currentcolor, 198 cursive, 137 cursor, 248 430 czcionki internetowe, 30 rodzina, Patrz fonty rodzina D deklaracja, 27 konflikt, 129 ranga, 127 stylów, 66 typu dokumentu, 33 wymuszenie, 127 dialog, 42 dingbat, 138 display, 264, 266, 311 div, 70 dl, 42 DOCTYPE, 33, 43, 46 dodawanie treĂci przed i za elementem, 110 za pomocÈ CSS, 250 dokument, 299 HTML, 43 tworzenie, 48 typ, 43, 46 doïÈczanie arkusza stylów, 384 zewnÚtrznego pliku CSS, 60 dopeïnienie, 262, 290 dynamiczna pseudoklasa, Patrz pseudoklasa dynamiczna dziaïania matematyczne, 182 dziecko, 86, 261 definicja stylu, 105 za pomocÈ pseudoklas, 104 dziedziczenie auto, Patrz auto inherit, Patrz inherit none, Patrz none normal, Patrz normal stylów, 125 wymuszenie, 126 z przeglÈdarki, 34 E edycja dokumentu, 41 efekt przejĂcia, 332, 334 rollover, 370 Skorowidz element, 32 blokowy, 36, 264 selektor, 36 dodanie treĂci przed i za, 110 dziecko, Patrz dziecko pïywajÈcy, 273 naprawa, Patrz pïywajÈcy element naprawa tworzenie ukïadu wielokolumnowego, 362 wyïÈczenie zawijania treĂci, 274 pïywania uniemoĝliwienie, 275 potomny, Patrz potomek przezroczystoĂÊ, 314 rodzic, Patrz rodzic siostrzany, 86, 92 poprzedzajÈcy, Patrz poprzedzajÈcy element siostrzany przystajÈcy, Patrz przystajÈcy element siostrzany sposób wyĂwietlania na stronie, 264 szerokoĂÊ, 267 Ăródliniowy, 35, 180, 264 selektor, 35 widocznoĂÊ, 310 wysokoĂÊ, 268 zamiana na pïywajÈcy, 273 em, 12, 34, 170 Emastic, 383 Embedded OpenType, 143 empty-cells, 241 encja znakowa, 139 EOT, 143 F fantasy, 138 figure, 42, 45 filter, 203, 314 Firebug, 392 first-child, 104 first-letter, 108 first-line, 108 first-of-type, 104 fixed, 220, 226, 237, 301, 304 float, 273, 274, 362 focus, 101, 102, 103 font, 162 Font Squirrel, 147 font-family, 140 font-size, 149 font-size-adjust, 152 font-style, 155 font-variant, 160 font-weight, 158 fonty, 162, 141 alternatywne, 141 dostosowanie rozmiaru tekstu, 152 bezpieczne, 142 definiowanie, 144 format pliku, 143 konwersja pliku przy uĝyciu Font Squirrel, 147 pobieranie z sieci, 143 rodzina, 135, 136, 140, 141 bezszeryfowe, 137 definiowanie, 140 fantasy, 138 kroje nieproporcjonalne, 137 kursywa, 137 o staïej szerokoĂci znaków, 137 obrazkowe, 138 ozdoby drukarskie, 138 symboliczne, 138 szeryfowe, 136 sieciowe, 144 definiowanie, 144 stos, 140 technika Webfonts, 139, 143 typu OpenType, 143 TrueType, 143 Webdings, 138 wïasnoĂci, 162 z sieci, 148 serwisy oferujÈce, 148 zastÚpcze, 141 footer, 42, 43, 45 formatowanie potomków, 87 stylu formularz, 209 www, 41 frame, 41 frameset, 41 caïej witryny internetowej, 58 elementów w caïym dokumncie, 54 pojedynczego elementu HTML, 51 wielu elementów, 78 G glif, 135 gradient, 200 liniowy, 203 promienisty, 203 w Internet Explorerze, 203 431 S k o r o w i d z Skorowidz gradient w Mozilli, 204 w tle, 203 w Webkit, 205 grafika wektorowa, 34 gruboĂÊ pisma, 158 bold, 158 bolder, 158 lighter, 158 normal, 158 numer, 158 grupowanie, 78 selektorów, 78 z d i w o r o k S H hack, 341 hanging indent, 234 hanging-punctuation, 192 head, 33, 44 header, 42, 43, 44 height, 269 hidden, 271, 310 hide, 241 hiperïÈcze, 96, 104, 190 hover, 96, 98, 101, 102, 103 href, 33, 98 HSL, 199 html, 44 HTML, 5,9, 17, 24, 31, 32, 38 w Internet Explorerze, 46 HTML5 Shiv, 46 http, 13 HyperText Markup Language, Patrz HTTP I icon, 165 id, 34 identyfikator, 26, 71 deklaracje, 72 reguïy, 26 zaleĝny, 72 if, 344 iframe, 41, 299 ilustracja, 45 img, 41 import, 59, 62, 384 important, 127, 128 importowanie arkuszy stylów, 62 432 inherit, 126, 178, 198, 238, 251, 265, 290, 304, indeks dolny, 182 górny, 182 305, 310 inline, 35, 264 style, 51 inline-block, 265 input, 103 inset, 317 inside, 234 Inspektor, 392 interfejs uĝytkownika, 245 internet dla kaĝdego, 26 na wszystkim, 26 Internet Explorer dostosowanie CSS, 340–50 Irish Paul, 146 italic, 155 jakoĂÊ wydruku stron internetowych, 124 jasnoĂÊ, 199 JavaScript, 46 ïatka, 48 jednostka bezwzglÚdna, 12 dïugoĂci, 323 wzglÚdna, 12 jÚzyk arkuszy stylów, 19 znaczników, 17, 19, 33 justify, 178 justowanie, 178, 191 J K kapitaliki, 160 normal, 160 small-caps, 160 kaskadowoĂÊ, 55, 129 kaskadowy arkusz stylów, Patrz CSS kÈty, 323 kerning, 170, 192 klasa, 25, 44 niezaleĝna, 68 selektor, 67 zaleĝna, 67, 68 kod kolejnoĂÊ pionowa, 301 kolor, 29, 118, 195 asocjacje, 207 bezpieczna paleta, 13 cienia, 200, 317 HSL, 199 obramowania elementu, 200 obrysu wokóï elementu, 200 pierwszego planu, 212 RGB, 198 schemat kolorystyczny, Patrz schemat minimalizacja, 398 sprawdzanie poprawnoĂci, 397 kody znaków HTML, 423 UTF, 423 kolorystyczny sïowa kluczowe, 197 tekstu, 212 tïa, 214 wartoĂÊ, 13 alfa, 199 koïo barw, 210 selektor kolorów, 211 kombinacyjny selektor, 87 komentarz, 82 do arkusza stylów, 82 konflikt deklaracji, 129 kontekstowy selektor, 86 kotwica, 96 krawÚdě elementu, 300 kroje nieproporcjonalne, 137 Kuler, 211 kursor zmiana wyglÈdu, 248 kursywa, 41, 137, 155, 157 L lang, 105 lang(), 105 large, 149 larger, 149 last-child(), 104 last-of-type(), 104 leading, 169, 172 left, 178, 274, 304 letter-spacing, 169 li, 232 liczby, 323 licznik, 252 Skorowidz formatowanie, 229 zbiorcze definiowanie wïasnoĂci, 235 lighter, 158 line-height, 172, 173 line-through, 188 linia nad tekstem, 188 link, 60, 96, 98, 384 lista, 209 list-item, 232, 265 list-style, 235 list-style-image, 233 list-style-position, 234 list-style-type, 232, 235 local, 220, 226 lowercase, 174 ltr, 44 ’ ïañcuch tekstu, 251 ïatka JavaScript, 48 ïÈcze, 59 aktywny , Patrz active kursor nad elementem, Patrz hover nadanie stylu, 98 nawigacyjne, 366 normalny, Patrz link odwiedzony, Patrz visited M S k o r o w i d z mapa bitowa, 41 margin, 238, 276 margin-bottom, 277 margines, 263, 276, 278 scalanie, 278 ujemny, 276 margin-left, 277 margin-right, 277 margin-top, 277 matrix(), 326 matrix3d(), 331 max-height, 269 max-width, 269 mechanizm renderowania, 20 media, 30, 116, 121 medium, 149 menu, 165 rozwijane, 373 message-box, 165 meta, 135 433 z d i w o r o k S Skorowidz Meyer Eric, 354 min-height, 269 minimalizacja kodu, 398 min-width, 269 monospace, 137 N nagïówek, 33, 42, 43, 44, 209 sekcji, 380 narzÚdzia kolorystyczne, 211 nasycenie, 199 nav, 42, 43, 44 nawigacja, 43, 209, 366 no-close-quote, 251 noframes, 41 none, 126, 152, 174, 188, 265 no-open-quote, 251 no-repeat, 219, 226 normal, 126, 155, 158, 160, 186, 251 not, 107 nowrap, 185, 186 nth-child(), 104 nth-last-of-type(), 104 nth-of-type(), 104 O obcinanie tekstu, 272 widocznego obszaru elementu, 312 oblique, 155 obramowanie, 29, 209, 262, 279, 281, 283 w tle obramowania elementu, 287 obraz w tle, 287 obraz tïa, 216–22 ustawianie, 223 obrazkowe fonty, 138 obrys, 263 elementu, 279 tekstu, 191 obszar renderowania, 300 rzeczywisty, 300 widoku, 299 odnoĂnik, 209, 366 odstÚp kontrolowanie, 185 miÚdzyliterowy, 169 tracking, 170 434 miÚdzywierszowy, 169, 172, 173 miÚdzy sïowami, 169, 171 kerning, 170 odtwarzanie czasowe multimediów, 41 ograniczniki, 209 okno, 299 przeglÈdarki, 299 ol, 252 one, 251 opacity, 199, 314 open-quote, 251 OpenType, 143 opïywanie, 274 opóěnienie, 335 orientacja, 118 origin(), 327 OTF, 143 outline, 200, 279, 280 outside, 234 overflow, 269, 270, 292, 358 overflow-x, 270 overflow-y, 270 overline, 188 ozdoba tekstu, 192 drukarska, 138 P padding, 222, 223, 290 padding-box, 222, 223 paleta kolorów z obrazów i zdjÚÊ, 211 pasek boczny, 45 perspective, 328, 329 perspective(), 329 perspective-origin, 328 pewnoĂÊ, 26 picture-font, 138 pierwsza litera formatowanie, 108 pierwszy wiersz formatowanie, 108 pismo pochylone, 155 plik konwersja z Font Squirrel, 147 arkuszy stylów, 57 fontów, 143 zewnÚtrzny, 57 pïywaj
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS3. Szybki start. Wydanie V
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ą: