[ Pobierz całość w formacie PDF ]
.HeightOkreœla wysokoœæ elementu, do którego zastosowano styl.FloatPowoduje przemieszczenie elementu na lew¹ lub praw¹ stronê dokumentu.Jeœliprzesuwany element trafi w obszar tekstu, tekst zostanie ob³amany wokó³ niego.ClearTo ustawienie jest stosowane razem z Float.Zapobiega wyœwietlaniu elementu wtej samej p³aszczyŸnie horyzontalnej, w jakiej wyœwietlany jest elementruchomy.Ustawienia Float i Clear powinny mieæ t¹ sam¹ wartoœæ.Do wyboru s¹nastêpuj¹ce mo¿liwoœci: Left, Right, None.PaddingUstawienia tej sekcji umo¿liwiaj¹ zdefiniowanie odstêpu miêdzy elementem aobramowaniem lub marginesami.Z ka¿dej strony elementu mo¿na zdefiniowaæ innyodstêp (pola Top (od góry), Right (z prawej), Bottom (od do³u) i Left (zlewej)).MarginUstawienia tej sekcji umo¿liwiaj¹ zdefiniowanie marginesów miêdzy obramowaniemelementu a innymi elementami.Mo¿na okreœliæ cztery marginesy: Top (górny),Right (prawy), Bottom (dolny) i Left (lewy).Kategoria BorderUstawienia kategorii Border pokazane na rysunku 12.16 pozwalaj¹ skonfigurowaæ iwyœwietliæ obramowania wokó³ ró¿nych elementów, takich jak obrazy lub tekst.S¹one bardzo u¿yteczne przy umieszczaniu akapitów tekstu w ramkach.Poszczególneustawienia tej kategorii opisuje tabela 12.5.Rys.12.16.Style obramowania – kategoria BorderAtrybuty Width i Color mo¿na definiowaæ niezale¿nie dla ka¿dej z krawêdziobramowania (górnej (Top), prawej (Right), dolnej (Bottom) i lewej (Left)).Abyunikn¹æ powtórzeñ, tutaj omówimy tê procedurê tylko raz.Tabela 12.5.Style obramowania – kategoria BorderUstawienieDzia³anieWidthUmo¿liwia zdefiniowanie gruboœci obramowania w oparciu o miarê wzglêdn¹ lubliczbow¹.ColorUmo¿liwia wybranie koloru krawêdzi obramowania.*StylePozwala wybraæ styl obramowania (dla wszystkich czterech krawêdzi).Wœród opcjis¹: dotted (kropki), dashed (linia przerywana), solid (linia ci¹g³a), double(linia podwójna), groove (pseudo 3D – rowek), ridge (pseudo 3D – liniawypuk³a), inset (wypuk³e) i outset (wklês³e).Kategoria ListTa grupa ustawieñ zaprezentowana jest na rysunku 12.17.Pozwala onakonfigurowaæ listy HTML.Zamiast domyœlnych znaków wypunktowania, mo¿nazastosowaæ w³asny znak graficzny.Mo¿na tu tak¿e okreœliæ sposób ³amania tekstupozycji listy.Poszczególne ustawienia tej kategorii opisuje tabela 12.6.Rys.12.17.Style listy – kategoria ListTabela 12.6.Style listy – kategoria ListUstawienieDzia³anieTypeTo ustawienia okreœla typ znaku wypunktowania lub numerowania.Do wyboru s¹dyski, kó³ka, kwadraty, liczby dziesiêtne, liczby rzymskie pisane ma³ymi iwielkimi literami, ma³e i wielkie litery.Bullet ImageJeœli chcesz zast¹piæ domyœlny znak wypunktowania w³asnym, to pole umo¿liwiawskazanie ulokowania pliku zawieraj¹cego znak.PositionTo ustawienia wp³ywa na sposób ³amania tekstu pozycji listy do nastêpnegowiersza.Domyœlnie stosowane jest ³amanie tekstu wzglêdem wciêcia (Outside).Mo¿na to zmieniæ wybieraj¹c pozycjê Inside – wówczas tekst jest zawijanywzglêdem marginesu strony.Kategoria PositioningUstawienia tej kategorii zaprezentowane na rysunku 12.18 oferuj¹ wiêksz¹kontrolê i elastycznoœæ nad pozycjonowaniem elementów strony (aczkolwiek tylkow przypadku przegl¹darek obs³uguj¹cych je).Stanowi¹ tak¿e podstawê tworzeniawarstw (pozwalaj¹ zamieniæ blok tekstu lub zaznaczony tekst w now¹ warstwêpoprzez zastosowanie domyœlnego znacznika definiowania warstw – przypist³umacza).Pozwalaj¹ okreœliæ dok³adnie pozycje elementów wzglêdem ca³ej stronylub innego jej elementu.Szczegó³owy opis poszczególnych ustawieñ zawieratabela 12.7.Rys.12.18.Style pozycjonowania – kategoria PositioningTabela 12.7.Style pozycjonowania – kategoria PositioningUstawienieDzia³anieTypeOkreœla sposób definiowania pozycji elementu.Do wyboru s¹ trzy mo¿liwoœci:pozycjonowanie bezwzglêdne (opcja Absolute), wzglêdem innego elementu (opcjaRelative) i brak pozycjonowania (opcja Static).VisibilityOkreœla widzialnoœæ elementu.Wartoœæ Inherit wskazuje, ¿e widzialnoœæ jesttaka, jak w okreœlona znaczniku nadrzêdnym wzglêdem elementu.Z-indexTo ustawienia informuje o kolejnoœci u³o¿enia elementów w stosie.Im wiêkszaliczba, tym bli¿ej „szczytu” stosu znajduje siê element.OverflowUstawienia tej sekcji definiuj¹ miejsce elementu na ekranie (atrybuty Left iTop) oraz jego rozmiary (atrybuty Width i Height).ClipUstawienia tej sekcji okreœlaj¹ wyœwietlan¹ na ekranie czêœæ elementu (atrybutyTop, Right, Bottom i Left).Kategoria ExtensionsUstawienia tej kategorii pokazane na rysunku 12.19, takie jak Filter, s¹ nowe iczêsto radykalne w swej naturze.Nale¿y pamiêtaæ, ¿e s¹ one obs³ugiwane tylkoprzez przegl¹darkê Internet Explorer.Ich opis znajdziesz w tabeli 12.8.Rys.12.19.Style rozszerzeñ – kategoria ExtensionsTabela 12.8.Style rozszerzeñ – kategoria ExtensionsUstawienieDzia³aniePage BreakWymusza ³amanie strony w czasie drukowania przed lub po obiekcie, do któregozastosowano styl.CursorZmienia postaæ wskaŸnika myszki, gdy znajdzie siê on nad obrazem kontrolowanymprzez styl.Lista mo¿liwoœci jest bardzo rozbudowana.Niektórzy u¿ytkownicy nielubi¹, gdy ktoœ zmienia im postaæ wskaŸnika myszki, korzystaj wiêc z tejmo¿liwoœci z umiarem.FilterUmo¿liwia zastosowanie do obiektu kontrolowanego przez styl efektówspecjalnych.Ich natura jest podobna do dzia³ania filtrów programu PhotoShop.Spróbuj poeksperymentowaæ z tymi filtrami – niektóre efekty s¹ zadziwiaj¹ce.Wiêcej informacji na ten temat znajdziesz pod adresemwww.msdn.microsoft.com/workshop/author/filter/reference/reference.asp.PodsumowanieTen rozdzia³ dotyczy³ arkuszy CSS.Wœród podejmowanych tematów znalaz³a siêdyskusja o istocie arkuszy stylów i ich wp³ywie na mo¿liwoœci projektowe.Zajmowaliœmy siê tak¿e poszczególnymi stylami i ich atrybutami.Nauczy³eœ siêdefiniowaæ arkusz CSS i stosowaæ go w swoich dokumentach.Wiesz ju¿ tak¿e, jakajest ró¿nica miêdzy stylem HTML a stylem CSS [ Pobierz caÅ‚ość w formacie PDF ]