Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00363 008361 11063061 na godz. na dobę w sumie
CSS. Leksykon kieszonkowy - książka
CSS. Leksykon kieszonkowy - książka
Autor: Liczba stron: 168
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1090-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Autorem książki jest Eric A. Meyer, guru CSS, jeden z najbardziej cenionych specjalistów w dziedzinie projektowania stron WWW. Odkrywa granice możliwości zastosowania CSS-a. Występuje na wielu konferencjach poświęconych standardom internetowym, zastosowaniu CSS oraz projektowaniu witryn.


Podręczne źródło informacji o najnowszych specyfikacjach
kaskadowych arkuszy stylów -- CSS2 i CSS2.1

Pierwszą rzeczą, jaką widzą osoby otwierające strony internetowe, jest ich wygląd. Wiele witryn ma niespójny i nieelegancki styl, co odstrasza użytkowników, a przecież utworzenie atrakcyjnych stron jest całkiem proste -- wystarczy przygotować odpowiedni plik CSS. Za pomocą kaskadowych arkuszy stylów można wygodnie zmieniać sposób wyświetlania wszystkich elementów kodu HTML i sterować wyglądem całej witryny. Technologia CSS jest obsługiwana przez wszystkie najważniejsze przeglądarki, a ponadto nie wymaga przesyłania dużych ilości danych, dlatego jest doskonałym narzędziem do szybkiego i efektywnego formatowania witryn internetowych.

Książka 'CSS. Leksykon kieszonkowy' to zwięzły przewodnik po możliwościach kaskadowych arkuszy stylów. Dowiesz się z niego, jak stosować style w dokumentach HTML i XHTML, poznasz zasady funkcjonowania stylów oraz reguły rządzące pozycjonowaniem elementów. Przede wszystkim jednak błyskawicznie znajdziesz opis wszystkich selektorów i właściwości stylów CSS, co pomoże Ci sprawnie tworzyć przejrzyste i atrakcyjne witryny internetowe.

Naucz się stosować kaskadowe arkusze stylów
i twórz eleganckie witryny internetowe.

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

Darmowy fragment publikacji:

CSS. Leksykon kieszonkowy Autor: Eric A. Meyer ISBN: 978-83-246-1090-7 Tytu³ orygina³u: CSS Pocket Reference Format: B6, stron: 120 Podrêczne Ÿród³o informacji o najnowszych specyfikacjach kaskadowych arkuszy stylów -- CSS2 i CSS2.1 • Chcesz nauczyæ siê do³¹czaæ arkusze stylów do witryn internetowych? • Chcesz dowiedzieæ siê, jak nadaæ styl ró¿nym elementom stron internetowych? • Chcesz mieæ szybki dostêp do opisu wszystkich selektorów i w³aœciwoœci stylów? Pierwsz¹ rzecz¹, jak¹ widz¹ osoby otwieraj¹ce strony internetowe, jest ich wygl¹d. Wiele witryn ma niespójny i nieelegancki styl, co odstrasza u¿ytkowników, a przecie¿ utworzenie atrakcyjnych stron jest ca³kiem proste -- wystarczy przygotowaæ odpowiedni plik CSS. Za pomoc¹ kaskadowych arkuszy stylów mo¿na wygodnie zmieniaæ sposób wyœwietlania wszystkich elementów kodu HTML i sterowaæ wygl¹dem ca³ej witryny. Technologia CSS jest obs³ugiwana przez wszystkie najwa¿niejsze przegl¹darki, a ponadto nie wymaga przesy³ania du¿ych iloœci danych, dlatego jest doskona³ym narzêdziem do szybkiego i efektywnego formatowania witryn internetowych. Ksi¹¿ka „CSS. Leksykon kieszonkowy” to zwiêz³y przewodnik po mo¿liwoœciach kaskadowych arkuszy stylów. Dowiesz siê z niego, jak stosowaæ style w dokumentach HTML i XHTML, poznasz zasady funkcjonowania stylów oraz regu³y rz¹dz¹ce pozycjonowaniem elementów. Przede wszystkim jednak b³yskawicznie znajdziesz opis wszystkich selektorów i w³aœciwoœci stylów CSS, co pomo¿e Ci sprawnie tworzyæ przejrzyste i atrakcyjne witryny internetowe. • Do³¹czanie stylów do stron internetowych • Funkcjonowanie stylów • Zasady pozycjonowania elementów • Wartoœci stosowane w stylach • Przegl¹d selektorów, pseudoklas i pseudoelementów • Opis wszystkich w³aœciwoœci Naucz siê stosowaæ kaskadowe arkusze stylów i twórz eleganckie witryny internetowe Wydawnictwo Helion ul. Koœciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści Konwencje zastosowane w książce ..........................................................5 Dodawanie stylów do dokumentów HTML oraz XHTML .........................6 Struktura reguł ............................................................................................9 Pierwszeństwo stylów .............................................................................10 Klasyfikacja elementów ...........................................................................13 Sposoby wyświetlania elementów ..........................................................15 Podstawowy układ wizualny ...................................................................16 Reguły ułożenia elementów pływających ..............................................19 Reguły pozycjonowania ...........................................................................21 Układ tabel ............................................................................................... 29 Wartości .....................................................................................................37 Selektory ................................................................................................... 43 Pseudoklasy i pseudoelementy ............................................................... 49 Spis właściwości ....................................................................................... 56 3 Tabele ......................................................................................................132 Media stronicowane ...............................................................................136 Właściwości usunięte z CSS2.1 ...............................................................140 Style wizualne .........................................................................................140 Media stronicowane ...............................................................................143 Style dźwiękowe .....................................................................................145 Skorowidz ................................................................................................ 157 4 | CSS. Leksykon kieszonkowy Reguły pozycjonowania Pozycjonowaniem elementów rządzi kilka reguł specjalnych. Okre- ślają one nie tylko położenie bloku-pojemnika, ale także położenie zawartych w nim elementów. Rodzaje pozycjonowania Pozycjonowanie statyczne Pudełko elementu tworzone jak zwykle. Elementy bloko- we generują prostokątne pudełko stanowiące część układu dokumentu. Elementy wierszowe tworzą jedno lub więcej pudełek obejmujących linie, stanowiących część układu elementu rodzica. Pozycjonowanie względne Pudełko elementu zostaje przesunięte o określoną odległość. Zawierający je blok uznawany jest za obszar, który zajmo- wałby element, gdyby nie był pozycjonowany. Element zachowuje swój kształt. Zachowywany jest także obszar, który element normalnie zajmowałby w dokumencie. Pozycjonowanie bezwzględne Pudełko elementu jest całkowicie usuwane z układu doku- mentu i pozycjonowane w odniesieniu do bloku-pojemnika, którym może być inny element dokumentu lub pierwotny blok-pojemnik (opisany w kolejnym podrozdziale). Obszar, który element zajmowałby w normalnym układzie doku- mentu, nie jest już rezerwowany, tak jakby element już nie istniał. Pozycjonowany element generuje własne pudełko blokowe, bez względu na rodzaj pudełka, jaki generowałby w normalnym układzie. Reguły pozycjonowania | 21 Pozycjonowanie ustalone Pudełko elementu zachowuje się tak jak w przypadku pozy- cjonowania bezwzględnego, ale z blokiem-pojemnikiem jako punktem odniesienia. Blok-pojemnik Blok pojemnik dla pozycjonowanego elementu wyznaczany jest w myśl następujących reguł: 1. Blok-pojemnik dla elementu źródłowego (nazywany także pierwotnym blokiem-pojemnikiem) wskazywany jest przez prze- glądarkę. W HTML-u elementem źródłowym jest html, cho- ciaż niektóre przeglądarki korzystają z elementu body. 2. Dla elementów nieźródłowych, których wartość atrybutu position to relative lub static, blok-pojemnik jest wy- znaczany przez krawędź zawartości najbliższego pudełka nadrzędnego elementu blokowego, tabeli, komórki tabeli lub bloku wierszowego. Mimo tej reguły elementy pozycjo- nowane względnie będą przesunięte, a nie rozmieszczone w odniesieniu do bloku pojemnika. 3. Dla elementów nieźródłowych, których wartość właściwości position to absolute, blokiem-pojemnikiem jest najbliższy element nadrzędny (dowolnego rodzaju), mający wartość właściwości position inną niż static. Wyznaczanie prze- biega w następujący sposób: a. Jeżeli element nadrzędny jest elementem blokowym, blo- kiem pojemnikiem jest krawędź dopełnienia tego elementu; innymi słowy, jest to obszar wyznaczony przez obramo- wanie. 22 | CSS. Leksykon kieszonkowy b. Jeżeli element nadrzędny to element wierszowy, blokiem- -pojemnikiem jest krawędź zawartości bloku nadrzędnego. W językach zapisywanych od lewej do prawej górna i lewa krawędź bloku-pojemnika są krawędziami górną i lewą pierwszego pudełka w obiekcie nadrzędnym, a dolna i pra- wa krawędź są krawędziami dolną i górną zawartości ostatniego pudełka. W językach zapisywanych od prawej do lewej, prawa krawędź bloku-pojemnika odpowiada prawej krawędzi zawartości pierwszego pudełka, a lewa jest krawędzią ostatniego pudełka. Krawędzie górna i dolna wyznaczane są tak jak poprzednio. c. Jeżeli nie ma elementów nadrzędnych, tak jak opisano to w punktach a i b, blok-pojemnik elementu wyznaczany jest przez początkowy blok-pojemnik. Układ elementów pozycjonowanych bezwzględnie W poniższych podrozdziałach pojawiają się następujące pojęcia: Dopasowanie przez zmniejszenie Zbliżone do obliczania szerokości komórki tabeli za pomocą algorytmu automatycznego tworzenia układu tabeli. Ogólnie rzecz biorąc, przeglądarka próbuje wyznaczyć minimalną szerokość elementu, która będzie w stanie pomieścić zawar- tość. Zawijanie do kolejnych wierszy będzie przeprowadzone tylko w sytuacji, gdy będzie nie do uniknięcia. Pozycja ustalona Miejsce, w którym znalazłaby się krawędź elementu, gdyby wartością jego właściwości position było static. Reguły pozycjonowania | 23 Układ poziomowy elementów niezastępowanych pozycjonowanych bezwzględnie Równanie opisujące układ tego rodzaju elementów na postać: left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = szerokość (width) bloku-pojemnika Kolejne kroki ustalania rozmieszczenia są następujące: 1. Jeżeli wszystkie właściwości left, width oraz right mają wartości auto, wartości auto dla margin-left oraz margin- -right resetowane są do 0. Następnie, jeżeli kierunek zapi- sywania tekstu jest od lewej do prawej, właściwość left przyjmuje wartość pozycji ustalonej i stosowana jest trzecia reguła opisana w punkcie 3. W innym przypadku właściwość right przyjmuje wartość pozycji ustalonej i stosowana jest pierwsza reguła opisana w punkcie 3. 2. Jeżeli żadna spośród właściwości left, width oraz right nie ma wartości auto, wybierana jest odpowiednia reguła z poniższej listy: a. Jeżeli zarówno margin-left, jak i margin-right mają wartość auto, równanie rozwiązywane jest z założeniem, iż oba marginesy będą miały równe wartości. b. Jeżeli tylko margin-left lub margin-right ma wartość auto, równanie jest rozwiązywane dla tej wartości. c. Jeżeli wartości są nadmiernie ograniczone (czyli żadna z nich nie ma wartości auto), wartość left jest ignorowana (jeżeli kierunek tekstu jest od prawej do lewej) lub wartość right jest ignorowana (jeżeli kierunek tekstu jest od lewej do prawej). Równanie rozwiązywane jest dla tej wartości. 24 | CSS. Leksykon kieszonkowy 3. Jeżeli niektóre z wielkości left, width oraz right mają wartość auto, ale inne nie, wartości auto dla margin-left i magrin-right są resetowane do 0, wybierana jest odpo- wiednia reguła z poniższej listy: a. Jeżeli left ma wartość auto, ale right już nie, wartość sze- rokości (width) dopasowywana jest przez zmniejszenie. Równanie rozwiązywane jest dla wartości left. b. Jeżeli left i right mają wartości auto, ale width nie, to dla kierunku tekstu od lewej do prawej left przyjmuje pozycję ustaloną (dla kierunku tekstu od prawej do lewej jest left (dla kierunku tekstu od prawej do lewej) lub right right). Równanie jest rozwiązywane odpowiednio dla (dla kierunku tekstu od lewej do prawej). c. Jeżeli width oraz right mają wartości auto, ale left nie, szerokość (width) jest dopasowywana przez zmniejszanie. Równanie rozwiązywane jest dla wartości right. d. Jeżeli left ma wartość auto, ale width oraz right nie, równanie rozwiązywane jest dla wartości left. e. Jeżeli width ma wartość auto, ale left oraz right nie, równanie rozwiązywane jest dla wartości width. f. Jeżeli right ma wartości auto, ale left oraz width nie, równanie jest rozwiązywane dla wartości right. Układ pionowy elementów niezastępowanych pozycjonowanych bezwzględnie Równanie opisujące układ tego rodzaju elementów ma postać: top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = wysokość (height) bloku-pojemnika Reguły pozycjonowania | 25 Kolejne kroki ustalania rozmieszczenia są następujące: 1. Jeżeli wszystkie top, height oraz bottom mają wartość auto, top przyjmuje pozycję ustaloną i stosowana jest trzecia reguła opisana w punkcie 3. 2. Jeżeli żadna spośród wielkości top, height oraz bottom nie ma wartości auto, wybierana jest odpowiednia reguła spo- śród poniższych: a. Jeżeli zarówno margin-top, jak i margin-bottom mają wartości auto, równanie rozwiązywane jest z ogranicze- niem, iż wielkości marginesów będą równe. b. Jeżeli tylko margin-top lub magrin-bottom ma wartość auto, równanie rozwiązywane jest dla tej wartości. c. Jeżeli wartości są nadmiernie ograniczone (żadna z nich nie ma wartości auto), wartość bottom jest ignorowana, a rów- nanie rozwiązywane jest dla tej wartości. 3. Jeżeli niektóre spośród top, height oraz bottom mają wartość auto, ale inne nie, wybierana jest odpowiednia reguła z po- niższej listy: a. Jeżeli top oraz height mają wartość auto, ale bottom nie, wysokość (height) obliczona jest na podstawie zawartości elementu (tak jak w układzie ustalonym). Wszystkie warto- ści auto dla margin-top oraz margin-bottom resetowane są do 0, a równanie rozwiązywane jest dla top. b. Jeżeli top oraz bottom mają wartości auto, ale hight nie, top przyjmuje ustalone położenie. Wszystkie wartości auto dla margin-top oraz margin-bottom resetowane są do 0, a równanie rozwiązywane dla bottom. c. Jeżeli height oraz bottom mają wartości auto, ale top nie, wysokość (height) obliczona jest na podstawie zawartości elementu (tak jak w układzie ustalonym). Wszystkie warto- 26 | CSS. Leksykon kieszonkowy ści auto dla margin-top oraz margin-bottom resetowane są do 0, a równanie rozwiązywane dla bottom. d. Jeżeli top ma wartość auto, ale height oraz bottom nie, wszystkie wartości auto dla margin-top oraz margin- -bottom resetowane są do 0, a równanie rozwiązywane dla top. e. Jeżeli height ma wartość auto, ale top oraz bottom nie, wszystkie wartości auto dla margin-top oraz margin- -bottom resetowane są do 0, a równanie rozwiązywane dla height. f. Jeżeli bottom ma wartość auto, ale top i height nie, wszystkie wartości auto dla margin-top oraz margin- -bottom resetowane są do 0, a równanie rozwiązywane dla height. Układ poziomy elementów zastępowanych pozycjonowanych bezwzględnie Zasady mające zastosowanie przy określaniu położenia i wielkości elementów zastępowanych najłatwiej wyrazić w postaci wykony- wanych kolejno reguł: 1. Jeżeli width ma wartość auto, obliczona wartość width okre- ślana jest przez wewnętrzną szerokość zawartości elementu. Tak więc szerokość obliczona na podstawie obrazu szerokie- go na 50 pikseli to 50px. Jeżeli szerokość jest wyraźnie zade- klarowana (np. jako 100px lub 50 ), width przyjmuje taką wartość. 2. Jeżeli left ma wartość auto w języku zapisywanym od lewej do prawej, auto zastępowane jest położeniem ustalonym. W przypadku języków zapisywanych od prawej do lewej war- tość auto dla right zastępowana jest położeniem ustalonym. Reguły pozycjonowania | 27 3. Jeżeli left lub right ma ciągle wartość auto (czyli nie została zastąpiona w poprzednim punkcie), wszystkie wartości auto dla margin-left oraz margin-right zastępowane są war- tością 0. 4. Jeżeli wartości margin-left i margin-right to ciągle auto, przyjmują równe wartości, a więc element zostaje wyśrod- kowany w bloku-pojemniku. 5. Jeżeli po wprowadzeniu powyższych reguł pozostaje tylko jedna wartość auto, jest tak zmieniana, aby była równa pozo- stałej części równania. Pionowy układ elementów zastępowanych pozycjonowanych bezwzględnie Zasady mające zastosowanie przy określaniu położenia i wielkości elementów zastępowanych najłatwiej wyrazić w postaci wykony- wanych kolejno reguł: 1. Jeżeli height ma wartość auto, obliczona wartość height określana jest przez wewnętrzną wysokość zawartości ele- mentu. Tak więc wysokość obliczona na podstawie obrazu wysokiego na 50 pikseli to 50px. Jeżeli wysokość jest wyraź- nie zadeklarowana (np. jako 100px lub 50 ), height przyj- muje taką wartość. 2. Jeżeli top ma wartość auto, zastępowane jest położeniem ustalonym elementu. 3. Jeżeli bottom ma wartość auto, wszystkie wartości auto dla margin-top i margin-bottom zastępowane są wartością 0. 4. Jeżeli wartości margin-top i margin-bottom to ciągle auto, przyjmują równe wartości, a więc element zostaje wyśrod- kowany w bloku-pojemniku. 28 | CSS. Leksykon kieszonkowy 5. Jeżeli po wprowadzeniu powyższych reguł pozostaje tylko jedna wartość auto, jest tak zmieniana, aby była równa pozo- stałej części równania. Układ tabel Układ tabel może być dość skomplikowany, w szczególności kiedy weźmie się pod uwagę fakt, iż CSS definiuje dwa różne sposoby obliczania szerokości tabeli i jej komórek oraz dwa różne sposoby obsługi krawędzi tabeli i elementów wewnątrz niej. Rysunek 4. przedstawia komponenty tabeli. Rysunek 4. Komponenty układu tabeli Układ tabel | 29
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

CSS. Leksykon kieszonkowy
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ą: