Cyfroteka.pl

klikaj i czytaj online

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

CSS3 zawsze pod ręką!

Kaskadowe arkusze stylów liczą sobie już dobre paręnaście lat - ich pierwsza wersja została opublikowana w roku 1996. Dzięki wprowadzeniu tego pomysłowego rozwiązania udało się w końcu uporządkować kod stron internetowych. Co prawda, zajęło to sporo czasu, ale obecnie większość witryn poprawnie oddziela warstwę prezentacji od zawartości strony. Pozwala to na większą elastyczność, dopasowanie stron WWW do urządzeń, na których są oglądane, oraz łatwiejszy dostęp do informacji dla osób z dysfunkcjami. Obecnie do przeglądarek odważnie wchodzi trzecia wersja CSS.

Ten niezwykle użyteczny leksykon kieszonkowy poświęcony CSS zawiera wszystkie informacje na temat dostępnych właściwości oraz atrybutów kaskadowych arkuszy stylów. Jego najnowsze wydanie uwzględnia wiele poprawek dotyczących zauważonych niezgodności. Zostało też rozszerzone o nowości, które pojawiły się wraz z CSS3. Dzięki tej książce możesz mieć zawsze pod ręką kompletny zbiór informacji na temat formatowania tekstu, pozycjonowania elementów, tworzenia układów, wykorzystania selektorów i kontenerów. Niezależnie od miejsca i czasu błyskawicznie sprawdzisz, jak ustawić kolor elementu, dziedziczyć właściwości oraz sterować wysokością wierszy. Jest to idealna pozycja dla każdego szanującego swój czas webmastera!

CSS3 - prosty, efektowny i wydajny!

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

Darmowy fragment publikacji:

Tytuł oryginału: CSS Pocket Reference. 4th Edition Tłumaczenie: Jakub Hubisz ISBN: 978-83-246-3757-7 © 2012 Helion S.A. Authorized Polish translation of the English edition of “CSS Pocket Reference, 4th Edition” 9781449399030 © 2011 O’Reilly Media, Inc. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniej-szej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficz-ną fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/csslk4 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treļci Przedmowa Konwencje zastosowane w ksiñĔce Wykorzystanie przykäadów Strona internetowa ksiñĔki 1. Podstawowe pojýcia Dodawanie stylów do dokumentów HTML oraz XHTML Struktura reguä Komentarze Pierwszeþstwo stylów Klasyfikacja elementów Sposoby wyĈwietlania elementów Podstawowy ukäad wizualny Elementy päywajñce Pozycjonowanie Ukäad tabel 2. Wartoļci Säowa kluczowe WartoĈci kolorów WartoĈci liczbowe WartoĈci procentowe WartoĈci däugoĈci Adresy URI Kñty Jednostki czasu Jednostki czöstotliwoĈci Ciñgi znaków 5 5 5 6 7 7 10 11 12 14 15 17 20 21 27 35 35 35 37 38 38 40 40 41 41 41 3 3. Selektory Selektory Pseudoklasy strukturalne Pseudoklasy negujñce Pseudoklasy interakcji Pseudoelementy Zapytania o media 4. Spis wĥaļciwoļci WartoĈci uniwersalne Media wizualne Media stronicowane Media dĒwiökowe Skorowidz 43 43 48 54 55 58 60 67 67 67 188 198 211 4 _ CSS. Leksykon kieszonkowy Rozdziaĥ 3. Selektory Selektory Selektor uniwersalny Wzór: * Opis: Ten selektor odpowiada nazwie dowolnego elementu w jözyku dokumentu. JeĔeli reguäa nie ma wyraĒnego selektora, domniemywa siö, iĔ naleĔy uĔyè selektora uniwersalnego. Przykäady: * {color: red;} div * p {color: blue;} Selektor typu Wzór: element1 Opis: Ten selektor odpowiada nazwie okreĈlonego elementu w jözyku doku- mentu. Bödzie stosowany w kaĔdym przypadku wystñpienia danego elementu (w CSS1 ten selektor nazywany byä selektorem elementu). Przykäady: body {background: #FFF;} p {font-size: 1em;} Selektor elementu potomnego Wzór: element1 element2 43 Opis: Selektor pozwala autorowi na wskazanie elementu na podstawie jego statusu jako elementu potomnego innego elementu. Wskazywany element moĔe byè dzieckiem, wnukiem, prawnukiem itp. elementu przodka (w CSS1 selektor ten nazywany byä selektorem kontekstowym). Przykäady: body h1 {font-size: 200 ;} table tr td div ul li {color: purple;} Selektor elementu dziecka Wzór: element1 element2 Opis: Selektor wskazuje element na podstawie jego statusu jako dziecka innego elementu. Jest bardziej restrykcyjny niĔ element elementu po- tomnego, poniewaĔ wskaĔe tylko na element dziecko. Przykäady: div p {color: cyan;} ul li {font-weight: bold;} Selektor elementu bezpoļredniego rodzeħstwa Wzór: element1 + element2 Opis: Selektor pozwala autorowi na wskazanie elementu, który jest kolejnym elementem przylegajñcym innego elementu. Tekst znajdujñcy siö pomiödzy elementami jest ignorowany, pod uwagö brane sñ tylko elementy i ich pozycje w drzewie dokumentu. Przykäady: table + p {margin-top: 2.5em;} h1 + * {margin-top: 0;} Selektor elementu rodzeħstwa Wzór: element1 ~ element2 44 _ CSS. Leksykon kieszonkowy Opis: Selektor pozwala autorowi na wskazanie elementu, który jest podle- gäym tego samego rodzica i nastöpuje po nim w drzewie dokumentu. Tekst lub inne elementy znajdujñce siö pomiödzy elementami sñ igno- rowane, pod uwagö brane sñ tylko elementy i ich pozycje w drzewie dokumentu. Przykäady: h1 ~ h2 {margin-top: 2.5em;} div#navlinks ~ div {margin-top: 0;} Selektor klasy Wzór: element1.classname element1.classname1.classname2 Opis: W jözykach, które na to zezwalajñ, takich jak HTML, XHTML, SVG oraz MathML, selektor klasy uĔywajñcy notacji kropkowej moĔe byè wykorzystany do wskazania elementów posiadajñcych klasö zwie- rajñcñ wskazanñ wartoĈè (lub wartoĈci). Nazwa klasy musi nastöpowaè bezpoĈrednio po kropce. Kilka wartoĈci klas moĔna poäñczyè w jeden ciñg, jednak Internet Explorer starszy niĔ wersja 7 ma problemy ze wsparciem dla takiego zapisu. JeĔeli kropka nie jest poprzedzona nazwñ elementu, selektor wskaĔe wszystkie elementy zawierajñce danñ wartoĈè klasy (lub klas). Przykäady: p.pilne {color: red;} a.zewnetrzne {font-style: italic;} .przyklad {background: olive;} .uwaga.wazne {background: yellow;} Uwaga: Wersje Internet Explorera starsze niĔ 7 nie obsäugujñ äñczenia klas, pozwalajñ jednak na zapisanie wiöcej niĔ jednej nazwy klasy w atry- bucie klasy. Selektor identyfikatora ID Wzór: element1#idname Selektory _ 45 Opis: W jözykach, które na to zezwalajñ, takich jak HTML lub XHTML, selektor identyfikatora ID korzystajñcy z notacji kratkowej moĔe byè uĔyty do wskazania elementów o ID zawierajñcych okreĈlonñ war- toĈè lub wartoĈci. Nazwa wartoĈci ID musi nastöpowaè bezpoĈrednio po znaku kratki (#). JeĔeli przed tym znakiem nie zostanie zmiesz- czona nazwa elementu, selektor wskaĔe wszystkie elementy zawie- rajñce danñ wartoĈè ID. Przykäady: h1#tytul-strony {font-size: 250 ;} body#glowna {background: silver;} #przyklad {background: lime;} Prosty selektor atrybutu Wzór: element1[attr] Opis: Pozwala na wskazanie dowolnego elementu na podstawie wartoĈci atrybutu, bez wzglödu na wartoĈè atrybutu. Przykäady: a[rel] {border-bottom: 3px double gray;} p[class] {border: 1px dotted silver;} Selektor ļcisĥej wartoļci atrybutu Wzór: element1[attr= value ] Opis: Pozwala na wskazanie dowolnego elementu na podstawie Ĉcisäej wartoĈci atrybutu. Przykäady: a[rel= Start ] {font-weight: bold;} p[class= urgent ] {color: red;} Selektor czýļciowej wartoļci atrybutu Wzór: element1[attr~= value ] 46 _ CSS. Leksykon kieszonkowy Opis: Pozwala na wskazanie dowolnego elementu na podstawie roz- dzielonej spacjami czöĈci wartoĈci atrybutu. NaleĔy zauwaĔyè, iĔ [class~= value ] nie jest toĔsame z .value (patrz wyĔej). Przykäady: a[rel~= friend ] {text-transform: uppercase;} p[class~= warning ] {background: yellow;} Selektor czýļci poczétkowej wartoļci atrybutu Wzór: element1[attr^= ciîg ] Opis: Pozwala na wskazanie dowolnego elementu na podstawie wystñpienia ciñgu na poczñtku wartoĈci atrybutu. Przykäady: a[href^= /blog ] {text-transform: uppercase;} p[class^= test- ] {background: yellow;} Selektor czýļci koħcowej wartoļci atrybutu Wzór: element1[attr$= ciîg ] Opis: Pozwala na wskazanie dowolnego elementu na podstawie wystñpienia ciñgu na koþcu wartoĈci atrybutu. Przykäady: a[href$= .pdf ] {font-style: italic;} Selektor czýļci obowiézkowej wartoļci atrybutu Wzór: element1[attr*= ciîg ] Opis: Pozwala na wskazanie dowolnego elementu na podstawie wystñpienia ciñgu w dowolnym miejscu wartoĈci atrybutu. Selektory _ 47 Przykäady: a[href*= helion.pl ] {font-weight: bold;} div [class*= port ] {border: 1px solid red;} Selektor atrybutu jýzyka Wzór: element1[lang|= lc ] Opis: Pozwala na wskazanie dowolnego elementu majñcego atrybut lang, którego wartoĈè znajduje siö na rozdzielonej znakami pionowej kreski liĈcie wartoĈci rozpoczynajñcej siö od wartoĈci wskazanej przez selektor. Przykäady: html[lang|= tr ] {color: red;} Pseudoklasy strukturalne ćciĈle rzecz biorñc, wszystkie pseudoklasy (np. wszystkie selektory) sñ strukturalne — sñ w pewnej mierze zaleĔne od struktury dokumen- tu. PoniĔsze pseudoklasy zostaäy wyróĔnione, poniewaĔ okreĈlajñ wzorce wystöpujñce w strukturze dokumentu, np. wybranie co dru- giego akapitu lub ostatnich elementów dzieci jakiegoĈ elementu. :empty Zastosowanie: Wszystkie elementy Opis: Dopasowuje elementy, które nie posiadajñ wözäów podrzödnych, czyli nie majñ elementów podrzödnych ani zawartoĈci. ZawartoĈè moĔe stanowiè tekst, biaäe znaki, symbole encji lub wözäy CDDATA. Oznacza to, Ĕe element p /p nie jest pusty; nie bödzie pusty takĔe w przypadku, gdy spacja zostanie zastñpiona znakiem nowej linii. Ta pseudoklasa nie odnosi siö do elementów pustych, takich jak br, img, input itp. Przykäady: p:empty {padding: 1em; background: red;} li:empty {display: none;} 48 _ CSS. Leksykon kieszonkowy :first-child Zastosowanie: Wszystkie elementy Opis: Dopasowuje elementy bödñce pierwszym dzieckiem innego elementu. Oznacza to, Ĕe zapis div:first-child spowoduje dopasowanie wszystkich elementów div bödñcych pierwszymi dzieèmi innych elementów, nie pierwszych dzieci dowolnego elementu div. Przykäady: td:first-child {border-left: 1px solid;} p:first-child {text-indent: 0; margin-top: 2em;} :first-of-type Zastosowanie: Wszystkie elementy Opis: Dopasowuje elementy bödñce pierwszym dzieckiem danego typu. Czyli zapis div:first-of-type spowoduje dopasowanie elementów div bödñcych pierwszymi elementami dzieèmi typu div dla innego elementu. Przykäady: td:first-of-type {border-left: 1px dotted;} h2:first-of-type {color: fuchsia;} :lang Zastosowanie: Dowolny element z przypisanñ informacjñ o jözyku Opis: Selektor wskazuje element na podstawie informacji o jözyku (chodzi o jözyk ludzki, a nie jözyk programowania). Informacja tego rodzaju musi byè zawarta w dokumencie lub w inny sposób z nim poäñczona i nie moĔe byè zdefiniowana za pomocñ CSS. Obsäuga selektora :lang jest taka sama jak selektora atrybutu |=. Przykäadowo w do- kumencie HTML jözyk elementu jest okreĈlony atrybutem lang. Je- Ĕeli element nie posiada tego atrybutu, jözyk elementu okreĈlany jest Pseudoklasy strukturalne _ 49 za pomocñ ostatniego atrybutu lang najbliĔszego elementu przodka, a jeĈli go brak — przez pole nagäówka HTTP Content-Language (lub odpowiedni znacznik meta http-equiv) dokumentu. Przykäady: html:lang(en) {background: silver;} *:lang(fr) {quotes: #171; #187; ;} :last-child Zastosowanie: Wszystkie elementy Opis: Dopasowuje elementy bödñce ostatnim dzieckiem innego elementu. Oznacza to, Ĕe zapis div:last-child spowoduje dopasowanie wszyst- kich elementów div bödñcych ostatnimi dzieèmi innych elementów, nie ostatnich dzieci dowolnego elementu div. Przykäady: td:last-child {border-right: 1px solid;} p:last-child {margin-bottom: 2em;} :last-of-type Zastosowanie: Wszystkie elementy Opis: Dopasowuje elementy bödñce ostatnim dzieckiem danego typu. Czyli zapis div:last-of-type spowoduje dopasowanie elementów div bödñcych ostatnimi elementami dzieèmi typu div dla innego elementu. Przykäady: td:last-of-type {border-right: 1px dotted;} h2:last-of-type {color: fuchsia;} :nth-child(an+b) Zastosowanie: Wszystkie elementy 50 _ CSS. Leksykon kieszonkowy Opis: Dopasowuje kaĔdy n-ty element dziecko wedäug wzorca zdefinio- wanego przez formuäö an+b, gdzie a i b to liczby caäkowite, a n re- prezentuje nieskoþczonñ seriö liczb caäkowitych liczonych w przód od pierwszego elementu dziecka. Czyli aby wybraè co czwarty element dziecko dla elementu body, rozpoczynajñc od pierwszego dziecka, naleĔy zapisaè: body *:nth-child(4n+1). To spowoduje wybie- ranie elementów bödñcych pierwszym, piñtym, dziewiñtym, trzyna- stym itd. dzieckiem elementu body. JeĔeli powinien zostaè wybrany element czwarty, ósmy, dwunasty itd., naleĔy zmieniè powyĔszy zapis na nastöpujñcy: body *:nth-child(4n). MoĔliwe jest takĔe wyko- rzystanie jako b liczb ujemnych — zapis body *:nth-child(4n-1) spowoduje wybranie elementów trzeciego, siódmego, jedenastego, piötnastego itd. W miejscu formuäy an+b moĔliwe jest wykorzystanie dwóch säów kluczowych: even (parzyste) i odd (nieparzyste). Sñ one kolejno sy- nonimami zapisów 2n i 2n+1. Przykäady: *:nth-child(4n+1) {font-weight: bold;} tbody tr:nth-child(odd) {background-color: #EEF;} :nth-last-child(an+b) Zastosowanie: Wszystkie elementy Opis: Dopasowuje kaĔdy n-ty element dziecko wedäug wzorca zdefiniowane- go przez formuäö an+b, gdzie a i b to liczby caäkowite, a n reprezen- tuje nieskoþczonñ seriö liczb caäkowitych liczonych wstecz od ostatniego elementu dziecka. Czyli aby wybraè co czwarty od koþca element dziecko elementu body, naleĔy zapisaè: body *:nth-last-child(4n+1). MoĔna powiedzieè, Ĕe jest to pseudoklasa lustrzana do :nth-child. W miejscu formuäy an+b moĔliwe jest wykorzystanie dwóch säów kluczowych: even (parzyste) i odd (nieparzyste). Sñ one kolejno sy- nonimami zapisów 2n i 2n+1. Przykäady: *:nth-last-child(4n+1) {font-weight: bold;} tbody tr:nth-last-child(odd) {background-color: #EEF;} Pseudoklasy strukturalne _ 51 :nth-last-of-type(an+b) Zastosowanie: Wszystkie elementy Opis: Dopasowuje kaĔdy n-ty element typu zgodnego z elementem nazwa- nym wedäug wzorca zdefiniowanego przez formuäö an+b, gdzie a i b to liczby caäkowite, a n reprezentuje nieskoþczonñ seriö liczb caäko- witych liczonych wstecz od ostatniego takiego elementu. Czyli aby wybraè co trzeci od koþca element akapitu (p) bödñcy dzieckiem elementu body, zaczynajñc od ostatniego takiego akapitu, naleĔy zapisaè: body p:nth-last-of-type(3n+1). Kolejne akapity bödñ wybierane, nawet jeĔeli pomiödzy nimi znajdñ siö inne elementy, np. listy lub tabele. W miejscu formuäy an+b moĔliwe jest wykorzystanie dwóch säów kluczowych: even (parzyste) i odd (nieparzyste). Sñ one kolejno sy- nonimami zapisów 2n i 2n+1. Przykäady: td:nth-last-of-type(even) {background-color: #FCC;} img:nth-last-of-type(3n) {float: left; border: 2px solid;} :nth-of-type(an+b) Zastosowanie: Wszystkie elementy Opis: Dopasowuje kaĔdy n-ty element typu zgodnego z elementem na- zwanym wedäug wzorca zdefiniowanego przez formuäö an+b, gdzie a i b to liczby caäkowite, a n reprezentuje nieskoþczonñ seriö liczb caäkowitych liczonych w przód od pierwszego takiego elementu. Czyli aby wybraè co trzeci element akapitu (p) bödñcy dzieckiem elementu body, zaczynajñc od pierwszego takiego akapitu, naleĔy zapisaè: body p:nth- of-type(3n+1). Kolejne akapity bödñ wybierane, nawet jeĔeli pomiödzy nimi znajdñ siö inne elementy, np. listy lub tabele. W miejscu formuäy an+b moĔliwe jest wykorzystanie dwóch säów klu- czowych: even (parzyste) i odd (nieparzyste). Sñ one kolejno synoni- mami zapisów 2n i 2n+1. Przykäady: td:nth-of-type(even) {background-color: #FCC;} img:nth-of-type(3n) {float: right; margin-left: 1em;} 52 _ CSS. Leksykon kieszonkowy :only-child Zastosowanie: Wszystkie elementy Opis: Dopasowuje element bödñcy jedynym elementem dzieckiem dla swoje- go elementu nadrzödnego. Powszechnym zastosowaniem jest usuniöcie obramowania obrazka wewnñtrz linku, przy zaäoĔeniu, Ĕe obrazek jest jedynym elementem wewnñtrz elementu linku. NaleĔy zauwa- Ĕyè, Ĕe element zostanie wybrany, nawet jeĔeli posiada wäasne ele- menty dzieci; istotne jest jedynie to, Ĕe jest jedynym dzieckiem swo- jego elementu nadrzödnego. Przykäady: a img:only-child {border: 0;} table div:only-child {margin: 5px;} :only-of-type Zastosowanie: Wszystkie elementy Opis: Dopasowuje element bödñcy jedynym elementem dzieckiem danego typu dla swojego elementu nadrzödnego. NaleĔy zauwaĔyè, Ĕe ele- ment zostanie wybrany, nawet jeĔeli posiada wäasne elementy dzieci; istotne jest jedynie to, Ĕe jest jedynym dzieckiem danego typu dla swo- jego elementu nadrzödnego. Przykäady: p em:only-of-type {font-weight: bold;} section article:only-of-type {margin: 2em 0 3em;} :root Zastosowanie: Wszystkie elementy Opis: Dopasowuje gäówny element, czyli korzeþ dokumentu, którym w przy- padku HTML-a i XHTML-a jest zawsze element html. W dokumencie XML korzeþ dokumentu moĔe mieè dowolnñ nazwö i w zwiñzku z tym selektor moĔe byè potrzebny. Pseudoklasy strukturalne _ 53 Przykäady: :root {font: medium serif;} :root * {margin: 1.5em 0;} Pseudoklasy negujéce Istnieje tylko jedna negujñca pseudoklasa, jest ona jednak tak specy- ficzna, Ĕe zasäuguje na swojñ wäasnñ sekcjö. :not(e) Zastosowanie: Wszystkie elementy Opis: Dopasowuje dowolny element, który nie jest opisany przez selektor w nawiasach e. Pozwala to np. na odrzucenie wszystkich elementów niebödñcych akapitami poprzez zapis *:not(p). Negacja moĔe byè wykorzystywana razem z selektorami elementów potomnych. Przykäadem takiego wykorzystania moĔe byè zapis table *:not(td), pozwalajñcy na wybranie wszystkich elementów wewnñtrz tabeli niebödñcych jej komórkami. Innym przykäadem moĔe byè wybranie wszystkich elementów, których atrybut ID ma wartoĈè innñ niĔ „szukaj”, poprzez zapis [id]:not([id= search ]). Jedynym wyjñtkiem, który nie moĔe byè wykorzystany jako e, jest pseudoklasa negacji. Niedopuszczalny jest zapis :not(:not(div)). Nie jest to jednak problemem, poniewaĔ synonimem tego zapisu bö- dzie po prostu div. PoniewaĔ :not() jest pseudoklasñ, moĔe byè äñczona z innymi pseudo- klasami oraz z instancjami siebie samej. Na przykäad aby wybraè dowolny element posiadajñcy fokus, niebödñcy elementem typu a, naleĔy zastosowaè zapis *:focus:not(a). Aby wybraè dowolny element niebödñcy ani akapitem, ani elementem div, wystarczy za- pisaè *:not(p):not(div). W poäowie roku 2011 wewnñtrz wyraĔeþ :not() nie moĔna byäo stosowaè selektorów elementu potomnego oraz selektorów grupujñ- cych. Ta restrykcja prawdopodobnie zostanie zniesiona w przyszäych wersjach CSS. 54 _ CSS. Leksykon kieszonkowy Przykäady: ul *:not(li) {text-indent: 2em;} fieldset *:not([type= checkbox ]):not([type= radio ]) {margin: 0 1em;} Pseudoklasy interakcji Pseudoklasy wymienione poniĔej odnoszñ siö do interakcji uĔytkownika z dokumentem: przypisywania stylów dla róĔnych stanów äñcza, oznaczania elementu bödñcego celem identyfikatora fragmentu lub przypisania stylów w zaleĔnoĈci od tego, czy element formularza jest wäñczony, czy wyäñczony. :active Zastosowanie: Element aktywny Opis: Ten rodzaj pseudoklasy ma zastosowanie do elementu w czasie, gdy jest on aktywny. Najpopularniejszym przykäadem jest klikniöcie äñ- cza w dokumencie HTML. Podczas przytrzymywania wciĈniötego przycisku myszy äñcze jest aktywne. Teoretycznie moĔliwe sñ inne sposoby aktywowania elementów oraz inne elementy, które mogñ byè aktywowane, jednak CSS ich nie definiuje. Przykäady: a:active {color: red;} *:active {background: blue;} :checked Zastosowanie: Wszystkie elementy Opis: Dopasowuje dowolny element na interfejsie, który zostaä zaznaczo- ny, np. zaznaczone pole typu checkbox lub wybrany przycisk radio. Przykäady: input:checked {outline: 3px solid rgba(127,127,127,0.5);} input[type= checkbox ]:checked {box-shadow: red 0 0 5px;} Pseudoklasy interakcji _ 55 :disabled Zastosowanie: Wszystkie elementy Opis: Dopasowuje dowolny element na interfejsie, który nie przyjmuje in- terakcji uĔytkownika z powodu wybranych atrybutów jözyka lub in- nych niezwiñzanych z prezentacjñ, np. input type= text disabled w HTML5. NaleĔy zauwaĔyè, Ĕe :disabled nie ma zastosowania, jeĔeli element zostaä usuniöty z widocznego obszaru poprzez wyko- rzystanie wäaĈciwoĈci position lub display. Przykäady: input:disabled {opacity: 0.5;} :enabled Zastosowanie: Wszystkie elementy Opis: Dopasowuje dowolny element na interfejsie, który moĔe przyjmowaè interakcjö uĔytkownika oraz moĔe byè oznaczony jako wäñczony lub wyäñczony w kodzie dokumentu. Dotyczy dowolnych elementów formularza do wprowadzania danych, ale nie dotyczy linków. Przykäady: input:enabled {background: #FCC;} :focus Zastosowanie: Element, który posiada fokus Opis: Selektor ma zastosowanie do elementu w czasie, gdy ten posiada fokus. Przykäadem w HTML-u jest wejĈciowe pole tekstowe, w którym znaj- duje siö kursor wpisywania tekstu, tak iĔ w chwili rozpoczöcia pisa- nia tekst znajdzie siö w polu. Inne elementy, takie jak äñcza, takĔe mogñ mieè fokus, CSS nie definiuje jednak, które to elementy. 56 _ CSS. Leksykon kieszonkowy Przykäady: a:focus {outline: 1px dotted red;} input:focus {background: yellow;} Uwagi: W przeglñdarce Internet Explorer :focus dotyczy wyäñcznie linków — nie dotyczy kontrolek formularza. :hover Zastosowanie: Element, na który najechano wskaĒnikiem myszy Opis: Selektor ma zastosowanie do elementu, który zostaä wskazany przez uĔytkownika, jednak nie zostaä jeszcze aktywowany. Najpopularniej- szym przykäadem jest przesuniöcie wskaĒnika myszy w granice äñcza w dokumencie HTML. Teoretycznie selektor moĔe byè stosowany do innych elementów, jednak CSS ich nie definiuje. Przykäady: a[href]:hover {text-decoration: underline;} p:hover {background: yellow;} Uwagi: W przeglñdarce Internet Explorer w wersjach starszych niĔ 7 :hover dotyczy wyäñcznie linków. :link Zastosowanie: ãñcze do innego zasobu, które nie zostaäo jeszcze odwiedzone Opis: Selektor stosowany do äñcza do URI, które nie zostaäo jeszcze od- wiedzone. Oznacza to, iĔ URI, do którego prowadzi äñcze, nie znaj- duje siö w historii przeglñdarki. Stan ten wyklucza siö wzajemnie ze stanem :visited. Przykäady: a:link {color: blue;} *:link {text-decoration: underline;} Pseudoklasy interakcji _ 57 :target Zastosowanie: Wszystkie elementy Opis: Dopasowuje element, który odpowiada identyfikatorowi fragmentu z adresu URI wykorzystanego do otwarcia strony. Czyli http://www.w3. org/TR/css3-selectors/#target-pseudo zostaäoby dopasowane przez :target i przypisaäoby zadeklarowane style do wszystkich elementów o id równym target-pseudo. JeĔeli element ten byäby akapitem, zostaäby takĔe dopasowany przez p:target. Przykäady: :target {background: #EE0;} :visited Zastosowanie: ãñcze do innego zasobu, które zostaäo juĔ odwiedzone Opis: Selektor stosowany do äñcza do URI, które zostaäo juĔ odwiedzone. Adres URI, do którego prowadzi äñcze, znajduje siö w historii prze- glñdarki. Stan ten wyklucza siö wzajemnie ze stanem :link. Przykäady: a:visited {color: purple;} *:visited {color: gray;} Pseudoelementy W CSS1 i CSS2 pseudoelementy byäy poprzedzone pojedynczym dwukropkiem, tak jak pseudoklasy. W CSS3 pseudoelementy po- przedzone sñ podwójnym dwukropkiem, aby odróĔniè je od pseudo- klas. Ze wzglödów historycznych przeglñdarki obsäugujñ oba zapisy, jednak zalecana jest skäadnia z dwoma dwukropkami. ::after Tworzy: Pseudoelement zawierajñcy wygenerowanñ zawartoĈè umieszczonñ za zawartoĈciñ elementu 58 _ CSS. Leksykon kieszonkowy Opis: Pozwala autorowi na wstawianie wygenerowanej zawartoĈci na koþcu istniejñcej zawartoĈci elementu. DomyĈlnie bödzie to pseudoelement wierszowy, ale moĔna to zmieniè za pomocñ wäaĈciwoĈci display. Przykäady: a.external:after {content: url(/icons/globe.gif);) p:after {content: | ;} ::before Tworzy: Pseudoelement zawierajñcy wygenerowanñ zawartoĈè umieszczonñ przed zawartoĈciñ elementu Opis: Pozwala autorowi na wstawianie wygenerowanej zawartoĈci na po- czñtku istniejñcej zawartoĈci elementu. DomyĈlnie bödzie to pseudo- element wierszowy, ale moĔna to zmieniè za pomocñ wäaĈciwoĈci display. Przykäady: a[href]:before {content: [LINK] ;) p:before {content: attr(class);} a[rel~= met ]:before {content: * ;} ::first-letter Tworzy: Pseudoelement zawierajñcy pierwszñ literö elementu Opis: Selektor uĔywany do nadania stylu pierwszej literze elementu. Roz- poczynajñce znaki przestankowe uzyskajñ styl razem z pierwszñ literñ. Niektóre jözyki uĔywajñ kombinacji liter, które powinny byè trakto- wane jako pojedynczy znak. Przed CSS2.1 selektor :first-letter mógä byè doäñczany tylko do elementów blokowych. CSS2.1 umoĔ- liwiä uĔycie go dla elementów blokowych, pozycji na liĈcie, komórki tabeli, nagäówka tabeli oraz elementu wierszowego. Do pierwszej li- tery moĔna zastosowaè tylko ograniczony zestaw wäaĈciwoĈci. Przykäady: h1:first-letter {font-size: 166 ;} p:first-letter {text-decoration: underline;} Pseudoelementy _ 59 ::first-line Tworzy: Pseudoelement zawierajñcy pierwszy sformatowany wiersz elementu Opis: Selektor uĔywany do nadania stylu pierwszemu wierszowi tekstu elementu. Bez znaczenia jest, ile säów zawiera dany wiersz. Selektor moĔe byè doäñczony tylko do elementów blokowych. Do pierwszego wiersza moĔna zastosowaè jedynie ograniczony zestaw wäaĈciwoĈci. Przykäady: p.lead:first-line {font-weight: bold;} Zapytania o media Przy wykorzystaniu zapytaþ o media autor moĔe zdefiniowaè Ĉro- dowisko, w jakim arkusz stylów bödzie wykorzystany przez prze- glñdarkö. W przeszäoĈci byäo to wykonywane poprzez wykorzystanie atrybutu media w elemencie link lub poprzez deskryptor mediów w deklaracji @import. Zapytania o media pozwalajñ na znacznie wiöcej: pozwalajñ autorom wybraè odpowiedni arkusz stylów w za- leĔnoĈci od cech danego typu mediów. Podstawowe zaĥoŜenia PoäoĔenie zapytaþ o media bödzie wyglñdaäo znajomo dla kaĔdego, kto kiedykolwiek zetknñä siö z ustalaniem typów mediów. PoniĔej zaprezentowane sñ dwa sposoby wykorzystania arkusza stylów pod- czas renderowania dokumentu na kolorowej drukarce: link href= print-color.css type= text/css media= print and ´(color) rel= stylesheet @import url(print-color.css) print and (color); Zapytanie o media moĔe byè wykorzystane w kaĔdym miejscu, w któ- rym moĔe zostaè ustalony typ mediów. Oznacza to, Ĕe moĔliwe jest umieszczenie wiöcej niĔ jednego zapytania na liĈcie oddzielonej prze- cinkami: link href= print-color.css type= text/css media= print and ´(color), projection and (color) rel= stylesheet @import url(print-color.css) print and (color), projection and ´(color); 60 _ CSS. Leksykon kieszonkowy W sytuacji gdy którekolwiek z zapytaþ zwróci „prawdö”, zostanie wykorzystany przypisany plik arkusza stylów. Czyli w poprzednim przykäadzie plik print-color.css zostanie wykorzystany, jeĔeli do- kument renderowany bödzie na kolorowej drukarce lub kolorowym projektorze. JeĔeli dokument bödzie drukowany na czarno-biaäej dru- karce, oba zapytania zwrócñ „faäsz” i arkusz stylów nie zostanie wyko- rzystany w dokumencie. To samo dotyczy ekranów, czarno-biaäych projektorów, mediów dĒwiökowych itd. KaĔde zapytanie o media skäada siö z typu mediów oraz jednej lub wiökszej liczby cech. KaĔda z cech otoczona jest nawiasami okrñ- gäymi, a jeĔeli jest ich wiöcej niĔ jedna, sñ rozdzielane säowem klu- czowym and. W zapytaniach o media wykorzystywane sñ dwa lo- giczne säowa kluczowe: and ãñczy ze sobñ dwie lub wiöcej cech mediów w taki sposób, Ĕe wszystkie muszñ zaistnieè, aby caäe zapytanie byäo zrealizowane. Na przykäad definicja (color) and (orientation: landscape) and (min-device-width: 800px) oznacza, Ĕe aby zostaäa zreali- zowana, medium musi obsäugiwaè kolory, mieè orientacjö po- ziomñ, a szerokoĈè musi wynosiè minimum 800 pikseli. not Neguje caäe zapytanie: jeĔeli wszystkie warunki sñ speänione, arkusz stylów nie zostanie wykorzystany. Zapis (color) and (orientation: landscape) and (min-device-width: 800px) oznacza, Ĕe jeĔeli wszystkie warunki sñ speänione, zapytanie przyjmuje wartoĈè „faäsz”. Czyli jeĔeli medium obsäuguje kolory, ma orientacjö poziomñ, a szerokoĈè wynosi minimum 800 pikseli, arkusz stylów jest pomijany. Säowo kluczowe not moĔe byè wykorzystane jedynie na poczñtku zapytania. Niepoprawna bö- dzie definicja (color) and not (mid-device-width: 800px). W takich przypadkach zapytanie zostanie zignorowane. Przeglñ- darki zbyt stare, aby obsäuĔyè zapytania o media, zawsze po- minñ deklaracje rozpoczynajñce siö od not. Wewnñtrz zapytania nie ma moĔliwoĈci wykorzystania säowa klu- czowego or. W zapytaniach funkcjö tö peäniñ przecinki — zapis screen, print oznacza: „Wykorzystaj arkusz, jeĔeli medium to ekran lub drukarka”. Czyli zamiast zapisu screen and (max-color: 2) or (monochrome), który jest niepoprawny i, co za tym idzie, igno- rowany, naleĔy uĔyè screen and (max-color: 2), screen and (monochrome). Zapytania o media _ 61 Jest jeszcze jedno säowo kluczowe: only, które zostaäo stworzone w celu zapewnienia niekompatybilnoĈci wstecz. only Wykorzystywane, aby ukryè arkusz stylów przed przeglñdar- kami zbyt starymi, by zrozumiaäy zapytania o media. Na przy- käad aby arkusz stylów zostaä przypisany do wszystkich mediów, ale tylko dla przeglñdarek, które rozumiejñ zapytania o media, naleĔaäoby napisaè: @import url(new.css) only all. W prze- glñdarkach, które rozumiejñ zapytania o media, säowo kluczowe only jest ignorowane. Säowo kluczowe only moĔe byè wykorzy- stane tylko na poczñtku zapytania. Wartoļci zapytaħ o media Dla zapytaþ o media zostaäy wprowadzone dwa nowe typy mediów, które (w poäowie roku 2011) nie sñ wykorzystywane w Ĕadnym innym kontekĈcie. proporcja WartoĈè proporcji podawana jest jako dwie liczby caäkowite oddzielone ukoĈnikiem (/) z opcjonalnñ spacjñ. Pierwsza war- toĈè odnosi siö do szerokoĈci, druga do wysokoĈci. Czyli aby zapisaè stosunek szerokoĈci do wysokoĈci wynoszñcy 16:9, na- leĔy napisaè 16/9 lub 16 / 9. rozdzielczoŁð RozdzielczoĈè jest dodatniñ liczbñ caäkowitñ, po której nastö- puje znak jednostki: dpi lub dpcm. Miödzy liczbñ a jednostkñ nie jest dozwolona spacja. Cechy mediów ēadna z poniĔszych wartoĈci nie moĔe byè ujemna. width, min-width, max-width wartoĈci: szerokoŁð Odnosi siö do szerokoĈci obszaru roboczego. Dla przeglñdarki internetowej bödzie to obszar strony wraz z ewentualnymi pa- skami przewijania. W mediach stronicowanych jest to szerokoĈè ramki strony. Czyli min-width: 850px jest speänione, jeĔeli ob- szar roboczy ma przynajmniej 850 pikseli szerokoĈci. 62 _ CSS. Leksykon kieszonkowy device-width, min-device-width, max-device-width wartoĈci: szerokoŁð Odnosi siö do caäkowitej szerokoĈci renederowania urzñdzenia wyjĈciowego. W mediach ekranowych jest to szerokoĈè ekranu. W mediach stronicowanych jest to caäkowita szerokoĈè strony. Czyli max-device-width: 1200px bödzie speänione, jeĔeli caä- kowita powierzchnia wyjĈciowa ma nie wiöcej niĔ 1200 pikseli szerokoĈci. height, min-height, max-height wartoĈci: wysokoŁð Odnosi siö do wysokoĈci obszaru roboczego. Dla przeglñdarki internetowej bödzie to obszar strony wraz z ewentualnymi pa- skami przewijania. W mediach stronicowanych jest to wyso- koĈè ramki strony. Czyli min-height: 567px jest speänione, je- Ĕeli obszar roboczy ma przynajmniej 567 pikseli wysokoĈci. device-height, min-device-height, max-device-height wartoĈci: wysokoŁð Odnosi siö do caäkowitej wysokoĈci renederowania urzñdzenia wyjĈciowego. W mediach ekranowych jest to wysokoĈè ekranu. W mediach stronicowanych jest to caäkowita wysokoĈè strony. Czyli max-device-height: 400px bödzie speänione, jeĔeli caä- kowita powierzchnia wyjĈciowa ma nie wiöcej niĔ 400 pikseli wysokoĈci. aspect-ratio, min-aspect-ratio, max-aspect-ratio wartoĈci: proporcja Odnosi siö do proporcji wynikajñcej ze stosunku szerokoĈci medium do jego wysokoĈci. Czyli min-aspect-ratio: 2/1 odnosi siö do tych mediów, dla których stosunek szerokoĈci do wysokoĈci wynosi 2:1. device-aspect-ratio, min-device-aspect-ratio, ´max-device-aspect-ratio wartoĈci: proporcja Odnosi siö do proporcji wynikajñcej ze stosunku caäkowitej szerokoĈci medium do jego caäkowitej wysokoĈci. Czyli device- ´-aspect-ratio: 16/9 odnosi siö do tych mediów, dla których stosunek tych wartoĈci wynosi 16:9. color, min-color, max-color wartoĈci: liczba-caĪkowita Odnosi siö do zdolnoĈci wyĈwietlania kolorów przez medium wyjĈciowe, z opcjonalnñ liczbñ reprezentujñcñ liczbö bitów wy- korzystywanñ do zapisu skäadowej koloru. Czyli color odnosi Zapytania o media _ 63 siö do wszystkich mediów, które potrafiñ wyĈwietlaè kolory, na- tomiast min-color: 4 oznacza, Ĕe dla kaĔdej ze skäadowych kolo- ru muszñ byè wykorzystane przynajmniej cztery bity. Dla kaĔdego urzñdzenia nieobsäugujñcego kolorów zostanie zwrócone 0. color-index, min-color-index, max-color-index wartoĈci: liczba-caĪkowita Odnosi siö do caäkowitej liczby kolorów dostöpnej w tabeli sprawdzania kolorów dla urzñdzenia wyjĈciowego. JeĔeli urzñ- dzenie nie korzysta z tabeli sprawdzania kolorów, zwrócone zostanie 0. Czyli min-colorindex: 256 odnosi siö do wszyst- kich mediów, dla których dostöpne jest minimum 256 kolorów. monochrome, min-monochrome, max-monochrome wartoĈci: liczba-caĪkowita Odnosi siö do urzñdzeþ monochromatycznych, z opcjonalnñ liczbñ bitów na piksel w buforze ramki. KaĔde urzñdzenie, które nie jest monochromatyczne, zwróci 0. Czyli monochrome od- nosi siö do kaĔdego monochromatycznego urzñdzenia, natomiast min-monochrome:2 odnosi siö do urzñdzeþ monochromatycznych wykorzystujñcych przynajmniej dwa bity na piksel w buforze ramki. resolution, min-resolution, max-resolution wartoĈci: rozdzielczoŁð Odnosi siö do rozdzielczoĈci urzñdzenia wyjĈciowego w ujöciu göstoĈci pikseli, mierzonej liczbñ pikseli na cal (dpi) lub punk- tów na centymetr (dpcm). JeĔeli urzñdzenie wyjĈciowe ma piksele, które nie sñ kwadratowe, wykorzystywana jest najmniej gösta oĈ. Na przykäad jeĔeli urzñdzenie ma 120dpcm na jednej osi i 100dpcm na drugiej, to wykorzystana zostanie wartoĈè 100. Dodatkowo cecha resolution bez wartoĈci nigdy nie bödzie dopasowana (min-resolution i max-resolution mogñ zostaè dopasowane). orientation wartoĈci: portrait | landscape Odnosi siö do caäkowitego obszaru wyĈwietlania urzñdzenia wyj- Ĉciowego. WartoĈè portrait jest zwracana, jeĔeli wysokoĈè jest równa lub wiöksza niĔ szerokoĈè, w przeciwnym razie zwracane jest landscape. scan wartoĈci: progressive | interlace Odnosi siö do procesu skanowania dla urzñdzeþ o typie me- dium tv. 64 _ CSS. Leksykon kieszonkowy grid wartoĈci: 0 | 1 Odnosi siö do obecnoĈci (lub jej braku) wyĈwietlania opartego na siatce w urzñdzeniach takich, jak terminal tty. Urzñdzenie oparte na siatce zwróci 1, w przeciwnym razie zwrócone zostanie 0. Zapytania o media _ 65 @import, 8 A animation, 67 animation-delay, 68 animation-direction, 69 animation-duration, 70 animation-iteration-count, 70 animation-name, 71 animation-play-state, 72 animation-timing-function, 73 arkusze stylów zagnieĔdĔone, 7 zewnötrzne, 8 atrybut media, 9 scr, 15 style, 7 B backface-visibility, 73 background, 13, 74 background-attachment, 75 background-clip, 76 background-color, 77 background-image, 78 background-origin, 79 background-position, 80 background-repeat, 81 background-size, 82 blok deklaracji, 10 body, 13 border, 13, 17, 83 border-bottom, 83 border-bottom-color, 84 border-bottom-left-radius, 84 Skorowidz border-bottom-right-radius, 85 border-bottom-style, 86 border-bottom-width, 86 border-collapse, 87 border-color, 88 border-image, 88 border-image-outset, 89 border-image-repeat, 90 border-image-slice, 91 border-image-source, 92 border-image-width, 93 border-left, 94 border-left-color, 95 border-left-style, 95 border-left-width, 96 border-radius, 97 border-right, 98 border-right-color, 99 border-right-style, 100 border-right-width, 100 border-spacing, 101 border-style, 102 border-top, 102 border-top-color, 103 border-top-left-radius, 104 border-top-right-radius, 104 border-top-style, 105 border-top-width, 106 border-width, 106 bottom, 107 box-align, 108 box-decoration-break, 109 box-direction, 109 box-flex, 110 box-lines, 111 box-ordinal-group, 112 box-orient, 113 box-pack, 114 box-shadow, 114 211 box-sizing, 17, 115 break-after, 188 break-before, 189 break-inside, 190 C caption-side, 116 ciñgi znaków, 41 clear, 117 clip, 118 color, 119 column-count, 120 column-fill, 120 column-gap, 121 column-rule, 121 column-rule-color, 122 column-rule-style, 123 column-rule-width, 123 columns, 125 column-span, 124 column-width, 124 content, 126 context-box, 17 counter-increment, 127 counter-reset, 127 cue, 198 cue-after, 198 cue-before, 199 cursor, 128 D deklaracja, 11 direction, 129 display, 130 dopasowanie przez zmniejszenie, 23 dziedziczenie, 12, 13 E element body, 13 head, 13 html, 13 img, 15 212 _ CSS. Leksykon kieszonkowy input, 15 link, 9 element Ēródäowy, 13 elementy blokowe, 15 niezastöpowane, 14 päywajñce, 20 wierszowe, 15, 16 zastöpowane, 14 empty-cells, 131 F float, 132 font, 132 font-family, 133 font-size, 134 font-size-adjust, 135 font-style, 136 font-variant, 137 font-weight, 138 head, 13 height, 17, 138 html, 13 H I image-orientation, 191 img, 15 inherit, 67 initial, 67 input, 15 instrukcje przetwarzania xml- stylesheet, 9 J jednostka czasu, 41 jednostka czöstotliwoĈci, 41 jednostki däugoĈci bezwzglödne, 38 wzglödne, 38, 39 K kaskadowanie, 13 kñty, 40 komentarze, 11 korzeþ, 13 L left, 139 letter-spacing, 140 line-height, 141 link, 9 list-style, 142 list-style-image, 143 list-style-position, 144 list-style-type, 144 M margin, 13, 146 margin-bottom, 147 margin-left, 148 margin-right, 148 margin-top, 149 marks, 191 max-height, 150 max-width, 150 mechanizm kaskadowania, 12 media, 9 media dĒwiökowe, 198 min-height, 151 min-width, 152 N nagäówki HTTP, 10 O opacity, 152 orphans, 192 outline, 153 outline-color, 154 outline-offset, 155 outline-style, 155 outline-width, 156 overflow, 157 overflow-x, 157 overflow-y, 158 P padding, 13, 17, 159 padding-bottom, 160 padding-left, 160 padding-right, 161 padding-top, 162 page, 192 page-break-after, 193 page-break-before, 194 page-break-inside, 195 page-policy, 195 pause, 200 pause-after, 200 pause-before, 201 perspective, 163 perspective-origin, 163 phonemes, 202 position, 164 pozycja ustalona, 23 pozycjonowanie bezwzglödne, 22 statyczne, 22 ustalone, 22 wzglödne, 22 pseudoelement, 58 ::after, 58 ::before, 59 ::first-letter, 59 ::first-line, 60 pseudoklasa interakcji, 55 :active, 55 :enabled, 56 :focus, 56 :hover, 57 :link, 57 :target, 58 :visited, 58 pseudoklasa negujñca, 54 :not(e), 54 Skorowidz _ 213 pseudoklasa strukturalna, 48 :empty, 48 :first-child, 49 :first-of-type, 49 :lang, 49 :last-child, 50 :last-of-type, 50 :nth-child(an+b), 50 :nth-last-child(an+b), 51 :nth-last-of-type(an+b), 52 :nth-of-type(an+b), 52 :only-child, 53 :only-of-type, 53 :root, 53 quotes, 165 Q R resize, 166 rest, 202 rest-after, 203 rest-before, 204 right, 166 ruby-align, 167 ruby-overhang, 168 ruby-position, 168 ruby-span, 169 S scr, 15 selektor, 10 atrybutu jözyka, 48 czöĈci koþcowej wartoĈci atrybutu, 47 czöĈci obowiñzkowej wartoĈci atrybutu, 47 czöĈci poczñtkowej wartoĈci atrybutu, 47 czöĈciowej wartoĈci atrybutu, 46 elementu bezpoĈredniego rodzeþstwa, 44 214 _ CSS. Leksykon kieszonkowy elementu dziecka, 44 elementu potomnego, 43 elementu rodzeþstwa, 44 identyfikator atrybutu, 12 identyfikator elementu, 12 identyfikator ID, 12 identyfikator klasy, 12 identyfikator pseudoelementu, 12 identyfikator pseudoklasy, 12 identyfikatora ID, 45 klasy, 45 kombinacja, 12 prosty atrybutu, 46 styl lokalny, 12 Ĉcisäej wartoĈci atrybutu, 46 typu, 43 uniwersalny, 12 uniwersalny, 43 size, 196 säowo kluczowe, 35, 61 and, 61 inherit, 35 initial, 35 normal, 35 not, 61 only, 62 speak, 204 specyficznoĈè, 12 obliczanie, 12 wartoĈci, 12 style lokalne, 7 pierwszeþstwo, 12 T table-layout, 170 text-align, 170 text-decoration, 171 text-indent, 172 text-overflow, 173 text-shadow, 174 text-transform, 175 top, 176 transform, 176 transform-origin, 177 transform-style, 178 W wartoĈci kolorów, 35 wartoĈè däugoĈci, 38 liczbowa, 37 procentowa, 38 white-space, 185 widows, 197 width, 17, 185 wäaĈciwoĈè box-sizing, 17 width, 17 word-spacing, 186 word-wrap, 187 Z zagnieĔdĔone arkusze stylów, 7 zewnötrzne arkusze stylów, 8 z-index, 188 transition, 179 transition-delay, 180 transition-duration, 180 transition-property, 181 transition-timing-function, 182 typ run-in, 16 U ukäad tabel, 27 automatyczny, 29 ustalony, 29 unicode-bidi, 182 Uniform Resource Identifier, 40 V vertical-align, 183 visibility, 184 voice-balance, 205 voice-duration, 206 voice-family, 206 voice-pitch, 207 voice-pitch-range, 208 voice-rate, 209 voice-stress, 209 voice-volume, 210 Skorowidz _ 215
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

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