Style w przykładach Własności czcionek

Transkrypt

Style w przykładach
Odsyłacze prowadzą do stron zawierających przykłady stylów, które mogą być pojedynczo lub w grupach
aplikowane rozmaitym elementom dokumentu WWW. Wszystkie programy zaimplementowały już większość
stylów, ale ciągle istnieje jeszcze sporo luk
Własności czcionek
W przypadku czcionek rozróżniamy kilka bloków informacji.
Rodzina czcionek (font-family)
Styl czcionki (font-style))
Warianty czcionek (font-variant)
Waga czcionki (font-weight)
Wielkość czcionki (font-size)
Atrybuty mieszane (font)
Poziome rozstrzelenie czcionek (font-stretch)
Pionowe proporcje czcionek (font-size-adjust)
Uprzedzając opis sposobów wprowadzania stylów do dokumentu, założymy w tym miejscu, że posługujemy się
stylami lokalnymi (in-line) tworzonymi za pomocą konstrukcji:
<p style="definicja stylu">Treść akapitu</p>
Rodzina czcionek (font-family)
Aby zdefiniować rodzinę czcionek, należy wpisać w definicji stylu font-family: czcionka. Gdybyśmy sobie
zażyczyli, aby akapit był wyświetlany za pomocą czcionki Times, powinniśmy napisać
<p style="font-family: Times">Treść akapitu</p>
Efekt będzie następujący:
To jest akapit napisany za pomocą czcionki Times
Analogicznie, możemy podać czcionkę Courier:
To jest akapit napisany za pomocą czcionki Courier
Ponieważ nigdy nie wiemy, jakimi czcionkami dysponuje czytelnik strony, możemy się zabezpieczyć, podając
kilka kolejnych czcionek, np:
<p style="font-family: Times, 'Times New Roman', 'Times New Roman CE'">Treść akapitu</p>
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki.
Proszę zwrócić uwagę, że gdy podajemy kilka czcionek, rozdzielamy je przecinkami i spacją. Gdy czcionka ma
kilka wyrazów w nazwie, ujmujemy je w apostrof ', podczas gdy cała definicja jest objęta cudzysłowem.
Możemy także posłużyć się nazwą rodzajową, np. serif, co jeszcze bardziej zwiększa szansę, że akapit zostanie
wyświetlony czcionką szeryfową, gdyby zabrakło w systemie czytelnika czcionek Times, Times New Roman itd..
<p style="font-family: serif">Treść akapitu</p>
1
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki szeryfowej.
Możemy wykorzystywać także inne nazwy rodzajowe, np. sans-serif, cursive, fantasy, monospace. A oto
przykłady (niektóre wyświetlane z błędami):
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki bezszeryfowej.
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki pochyłej.
TO JEST AKAPIT WY WIETLONY ZA POMOC PIERWSZEJ DOST PNEJ CZCIONKI OZDOBNEJ.
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki monotypicznej.
Wynik wyświetlania może być odmienny w każdym konkretnym przypadku i nie jesteśmy w stanie przewidzieć,
jaka konkretna czcionka jest u Państwa angażowana do wyświetlania. Znamy tylko jej nazwę rodzajową.
Oczywiście można mieszać definicje, podając nazwy imienne i rodzajowe, np. "Times, 'Times New Roman',
serif".
Interpretacja: Internet Explorer, Netscape 6, Opera 5
Naturalnie, zagnieżdżając definicje w nagłówku HEAD, możemy rozbudować system klas, tworząc jakiś
dominujący styl dla zwykłych akapitów oraz kilka stylów z klasami dla szczególnych przypadków, jak akapity
zawierające przypisy, istotne uwagi itd. Rzecz jasna, możemy korzystać jednocześnie i ze stylów
zagnieżdżonych, i z lokalnych, a nawet ze stylów zewnętrznych, zawartych na innych stronach. Opisują to
rozdziały poświęcone klasom i wstawianiu stylów. Należy też pamiętać o zasadach pierwszeństwa
obowiązujących w takiej kaskadzie stylów.
W specyfikacji stylów CSS2 pojawiły się też nazwy fontów systemowych, które można wykorzystywać w
definicjach czcionek. Fonty systemowe mogą odmiennie wyglądać w różnych systemach operacyjnych.
akapit z czcionką caption
akapit z czcionką icon
akapit z czcionką menu
przycisk z font:menu
akapit z czcionką message-box
akapit z czcionką small-caption
akapit z czcionką menu-bar
Nawiasem mówiąc...
Nawiasem mówiąc, akapit wyświetlany za pomocą
czcionki systemowej menu wygląda całkiem
elegancko, co właśnie prezentuje tych kilka słów.
Można jej użyć na przykład do publikowania jakichś
krótkich wiadomości.
2
Styl czcionki (font-style)
Do dyspozycji mamy trzy style czcionki: normal, italic i oblique. Dwie ostatnie są wyświetlane w podobny sposób.
<p style="font-style: normal">Treść akapitu</p>
Treść akapitu wyświetlana w stylu normal
<p style="font-style: italic">Treść akapitu</p>
Treść akapitu wyświetlana w stylu italic
<p style="font-style: oblique">Treść akapitu</p>
Treść akapitu wyświetlana w stylu oblique
Wariant czcionki (font-variant)
Rozróżniane są dwa warianty czcionek: normal i small-caps (małe kapitaliki). Przewidywane poprzednio
warianty, jak condensed lub expanded, zostały ujęte w odrębnym bloku font-strech.
<p style="font-variant: normal">Treść akapitu</p>
Treść akapitu wyświetlana w wariancie normal
<p style="font-variant: small-caps">Treść akapitu</p>
TREŚĆ AKAPITU WYŚWIETLANA W WARIANCIE SMALL-CAPS
Waga czcionki (font-weight)
Do dyspozycji mamy aż 13 rozmaitych "wag" czcionki, różniących się stopniem pogrubienia (nawet trudno je
będzie niekiedy rozróżnić na ekranie): normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Pokażmy to na przykładach:
<p style="font-weight: waga">Treść akapitu wyświetlana za pomocą wybranej wagi</p>
Treść akapitu wyświetlana za pomocą wagi normal
Treść akapitu wyświetlana za pomocą wagi bold
Treść akapitu wyświetlana za pomocą wagi bolder
Treść akapitu wyświetlana za pomocą wagi lighter
Treść akapitu wyświetlana za pomocą wagi 100
3
Żadna tego nie obsługuje
Wielkość czcionki (font-size)
Wielkość czcionki możemy regulować za pomocą czterech metod: imiennych wielkości absolutnych, wielkości
relatywnych, wysokości w jednostkach miary i wysokości w procentach.
Imienne wielkości absolutne
xx-small, x-small, small, medium, large, x-large, xx-large
<p style="font-size: wielkość absolutna">Treść akapitu</p>
Treść akapitu wyświetlana za pomocą wielkości xx-small
Treść akapitu wyświetlana za pomocą wielkości x-small
Treść akapitu wyświetlana za pomocą wielkości small
Treść akapitu wyświetlana za pomocą wielkości medium
Treść akapitu wyświetlana za pomocą wielkości large
Treść akapitu wyświetlana za pomocą
wielkości x-large
Treść akapitu wyświetlana za
pomocą wielkości xx-large
Wielkości relatywne
4
larger, smaller (w stosunku do domyślnej)
<p style="font-size: wielkość relatywna">Treść akapitu</p>
Treść akapitu wyświetlana za pomocą wielkości larger
Treść akapitu wyświetlana za pomocą wielkości smaller
Wielkość w jednostkach miary
W dokumencie można użyć kilku klasycznych jednostek miary: centymetry (cm), cale (in), milimetry (mm),
punkty (pt) i pica (pc).
1in = 2.54cm
1pt=1/72in
1pc=12pt
Na przykład:
<p style="font-size: 1cm"></p>
Treść akapitu wyświetlana za pomocą
wielkości 1 cm
Treść akapitu wyświetlana za pomocą wielkości 8
mm
Treść akapitu wyświetlana za pomocą wielkości 0,1 cala
Treść akapitu wyświetlana za pomocą wielkości 14 punktów
Treść akapitu wyświetlana za pomocą wielkości 1,5 pica
Wielkość w procentach
Podanie wielkości w procentach powinno dać w efekcie procent wielkości domyślnej dla danego selektora, np.
akapitu, tytułu itp.
Wszystkie trzy przeglądarki interpretują to polecenie częściowo błędnie, np. w odniesieniu do tytułu, choć akapit
jest wyświetlany poprawnie.
Na przykład:
<h1 style="font-size: 125%">To jest tytuł stopnia pierwszego 125%</h1>
5
To jest tytuł stopnia pierwszego
To jest tytuł stopnia pierwszego 125%
Normalny akapit
Akapit 125%
Czcionka szeryfowa to czcionka zawierająca znaki z różnego rodzaju poprzecznymi lub ukośnymi ogonkami,
zawijasami – tzw. zaciosy. Zwiększają one czytelność czcionki i pomagają w czytaniu. Zakończenie linii liter w
takiej czcionce jest smukłe, delikatne. Doskonale nadaje się do publikacji papierowych, jednakże męczy wzrok
przy użyciu w publikacjach elektronicznych.
Do krojów tych należą między innymi: Garamond, Georgia, Palatino oraz Times New Roman.
Popularnymi krojami bezszeryfowymi są: Arial, Helvetica, Tahoma, Trebuchet MS oraz Verdana
Atrybuty mieszane (font)
Możliwe jest użycie mieszanej definicji czcionki, obejmującej różne atrybuty, np. rodziny czcionek, wagi,
wielkości itp. Nie jest konieczne podawanie cech - wystarczą same wartości po początkowej deklaracji font:.
<h3 style="font: italic bold 20pt Arial, Helvetica, sans-serif"></h3>
Tytuł stopnia trzeciego, italic, bold, 20 pkt, Arial...
<p style="font: small-caps bold 14pt/18pt Times, 'Times New Roman', serif"></p>
AKAPIT MAŁE KAPITALIKI, POGRUBIONY, 14 PKT, 18 PKT ODSTĘPU MIĘDZY LINIAMI
BAZOWYMI WIERSZY, TIMES...
Należy zwracać uwagę na kolejność atrybutów. Poprawna kolejność to:
font-style font-variant font-weight font-size line-height font-family
Zmiana kolejności MOŻE (choć nie musi) spowodować wypadnięcie atrybutu, który nie został umieszczony we
właściwym porządku.
Poziome rozstrzelenie czcionek (font-stretch)
Czcionki mogą mieć rozmaitą szerokość - specyfikacja stylów przewiduje tutaj następujące wartości od
najbardziej zwężonych do najbardziej rozszerzonych:
ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extraexpanded, ultra-expanded
Przykład definicji:
<p style="font-stretch: ultra-condensed">To jest akapit ultra-condensed</p>
Żadna przeglądarka nie obsługuje tych wartości.
6
To jest akapit ultra-condensed
To jest akapit extra-condensed
To jest akapit condensed
To jest akapit semi-condensed
To jest akapit normal
To jest akapit semi-expanded
To jest akapit expanded
To jest akapit extra-expanded
To jest akapit ultra-expanded
Pionowe proporcje czcionek (font-size-adjust)
Niekiedy się zdarza, że zadeklarowana przez autora czcionka nie jest obecna w systemie czytelnika strony. U
tego drugiego przeglądarka usiłuje zastąpić nieobecną czcionkę jakąś inną (lub sami ją podajemy jako
alternatywę). Rozmaite czcionki mają odmienny stosunek wysokości małej litery do wysokości całej czcionki, np.
w czcionce Verdana wynosi on 0,58, gdy w Times tylko 0,46. Dlatego właśnie Verdana o tej samej wysokości co
Times wydaje się większa, co jest pozorem, ale na pewno jest czytelniejsza.
Gdyby autor zechciał utrzymać tę czytelną proporcję, mógłby ją zadeklarować w stylu, za pomocą polecenia:
<p style="font-size-adjust: 0.58">To jest jakiś akapit</p>
To jest jakiś akapit
Wtedy, gdy czytelnik nie dysponuje Verdaną, ale ma Times, przeglądarka przyjmie zapewne Times i podwyższy
stopień pisma, aby zachować właśnie nie wysokość, ale jego czytelność. Times zostałby zwiększony np. z 12
punktów do 12*(0.58/0.46) czyli do ok. 15 pkt.
Przeglądarki akceptują to polecenie.
Niektóre wartości: Verdana 0,58, Comic Sans MS 0,54, Trebuchet MS 0,53, Georgia 0,50, Minion Web 0,47,
Flemish Script 0,28.
Zauważmy, że na pierwszych pozycjach znajdują się czcionki stosunkowo niedawno wprowadzone do obiegu,
właśnie z myślą o czytelności stron WWW.
Własności tekstu
Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację
stylów. Communicator może błędnie pozycjonować niektóre elementy, zwłaszcza grafikę.
Odstępy między wyrazami (word spacing)
Odstępy między literami (letter spacing)
Dekoracja tekstu (text decoration)
Pusta przestrzeń (white space)
Transformacja tekstu (text transformation)
Wyrównanie tekstu (text alignment)
Wcięcie tekstu (text indent)
7
Odstępy między wierszami (line height)
Odstępy między wyrazami
Odstępy między wyrazami podajemy jednostkach miary. Na przykład:
<p style="word-spacing: 1cm">1-centymetrowe odstępy między wyrazami.</p>
1-centymetrowe odstępy między wyrazami.
Obsługiwane
Odstępy między literami
Odstępy między literami podajemy jednostkach miary. Na przykład:
<p style="letter-spacing: 2mm">2-milimetrowe odstępy między literami.</p>
2 - m i l i m e t r o w e o d s t ę p y m i ę d z y
a k c e p t o w a n e p r z e z I E i O p e r ę
l i t e r a m i ,
7 .
Dekoracja tekstu
Rozróżnia się pięć rodzajów dekoracji tekstu: pozostawienie bez zmiany (none), podkreślenie (underline),
nadkreślenie (overline), przekreślenie (line-throguh) i migotanie (blink)
<a style="text-decoration: none" href="http://www.corel.com">To jest odsyłacz do firmy Corel.</a>
To jest odsyłacz do firmy Corel.
Jak widać, można się w ten sposób pozbyć domyślnego podkreślenia w odsyłaczu.
<p style="text-decoration: underline">To jest podkreślenie tekstu.</p>
To jest podkreślenie tekstu.
<p style="text-decoration: overline">To jest nadkreślenie tekstu.</p>
To jest nadkreślenie tekstu.
<p style="text-decoration: line-through">To jest przekreślenie tekstu.</p>
To jest przekreślenie tekstu.
<p style="text-decoration: blink">To jest migotanie tekstu.</p>
To jest migotanie tekstu w NC4.
Pusta przestrzeń
Polecenie white-space określa, w jaki sposób mają być wyświetlane spacje w tekście.
white-space: normal powoduje zamianę wielu sąsiadujących spacji na jedną.
white-space: pre powoduje wyświetlenie wszystkich sąsiadujących spacji.
white-space: nowrap nie pozwala na przełamanie wiersza, do momentu napotkania polecenia <br>.
8
Przykłady:
<p style="white-space: normal">Tutaj jest
pięć spacji ściągniętych do jednej</p>
Tutaj jest pięć spacji ściągniętych do jednej.
<p style="white-space: pre">Tutaj jest
Tutaj jest
pięć widocznych spacji</p>
pięć widocznych spacji.
<p style="white-space: nowrap"><font color="#0000FF">.Ten akapit nie będzie przełamany, gdyż zostało w nim
zawarte polecenie nowrap. Dlatego na dole okienka przeglądarki powinien się pojawić pasek przewijania.</p>
.Ten akapit nie będzie przełamany, gdyż zostało w nim zawarte polecenie nowrap. Dlatego na dole okienka
przeglądarki powinien się pojawić pasek przewijania.
Transformacja tekstu
Możliwa są cztery rodzaje transformacji tekstu: pozostawienie bez zmiany (none), zamiana pierwszych liter
wyrazów na wielkie (capitalize), zamiana wszystkich liter na wielkie (uppercase) i zamiana wszystkich liter na
małe (lowercase).
To jest jakiś przykładowy akapit. Poddamy go transformacjom.
<p style="text-transform: capitalize">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p>
To Jest Jakiś Przykładowy Akapit. Poddamy Go Transformacjom.
<p style="text-transform: uppercase">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p>
TO JEST JAKIŚ PRZYKŁADOWY AKAPIT. PODDAMY GO TRANSFORMACJOM.
<p style="text-transform: lowercase">To jest jakiś przykładowy akapit. Poddamy go transformacjom.</p>
to jest jakiś przykładowy akapit. poddamy go transformacjom.
Wyrównanie tekstu
Tekst w bloku możemy wyrównywać za pomocą czterech sposobów: do lewego marginesu (left), do prawego
marginesu (right), do środka (center) i do obu marginesów jednocześnie).
<p style="text-align: left">To jest przykładowy akapit wyrównany do lewego marginesu.</p>
To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany do lewego
marginesu. To jest przykładowy akapit wyrównany do lewego marginesu. To jest przykładowy akapit wyrównany
do lewego marginesu. To jest przykładowy akapit wyrównany do lewego marginesu.
<p style="text-align: right">To jest przykładowy akapit wyrównany do prawego marginesu.</p>
To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do
prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu. To jest przykładowy akapit
wyrównany do prawego marginesu. To jest przykładowy akapit wyrównany do prawego marginesu.
<p style="text-align: center">To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów.</p>
To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który
środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu
9
marginesów. To jest przykładowy akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy
akapit, który środkujemy w stosunku do obu marginesów. To jest przykładowy akapit, który środkujemy w
stosunku do obu marginesów.
<p style="text-align: justify">To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu
marginesów.</p>
To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów, jak w edytorach
tekstów - prawy brzeg akapitu powinien być równy, a nie postrzępiony. To jest przykładowy akapit, który
powinien być wyrównany w stosunku do obu marginesów, jak w edytorach tekstów - prawy brzeg akapitu
powinien być równy, a nie postrzępiony. .
Wcięcie tekstu
Wcięcie tekstu odnosi się do bloków tekstu i oznacza odstęp pierwszego wiersza bloku od lewego marginesu
strony.
<p style="text-indent: 10%">To jest akapit, w którym pierwszy wiersz jest odsunięty od lewego marginesu o 10
procent , natomiast drugi wiersz i każdy następny rozpoczyna się już dokładnie od lewego marginesu.</p>
To jest akapit, w którym pierwszy wiersz jest odsunięty od lewego marginesu o 10 procent ,
natomiast drugi wiersz i każdy następny rozpoczyna się już dokładnie od lewego marginesu.
<h2 style="text-indent: 1in">Tytuł rozpoczynający się w odległości 1 cala...</h2>
Tytuł rozpoczynający się w odległości 1 cala od lewego
marginesu
Odstępy między wierszami
Style pozwalają regulować odstępy między liniami bazowymi elementów, np wierszy akapitu. Możemy podać
wielkość absolutną, np. w centymetrach, albo względną, w procentach. 200% oznacza podwojenie odstępu, 50%
- zmniejszenie o połowę.
<p style="line-height: 1cm">To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm...</p>
To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od
siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze
są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w
którym wiersze są odsunięte od siebie o 1 cm. To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm.
To jest akapit, w którym wiersze są odsunięte od siebie o 1 cm.
<p style="line-height: 50%">To jest akapit, w którym odstęp między wierszami wynosi 50 proc. normalnego</p>
To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od
siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są
odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To jest akapit, w
którym wiersze są odsunięte od siebie o 50%. To jest akapit, w którym wiersze są odsunięte od siebie o 50%. To
jest akapit, w którym wiersze są odsunięte od siebie o 50%.
10
Własności koloru i tła
stylów.
Kolor (color)
Kolor tła (background color)
Grafika jako tło (background image)
Powtarzanie tła (background repeat)
Zaczepienie tła (background attachment)
Pozycja tła (background position)
Mieszane atrybuty tła (background)
Kolor
Kolor możemy przypisywać dowolnym elementom. Kilka przykładów:
<h2 style="color: #FF0000">Czerwony tytuł drugiego stopnia</h2>
Czerwony tytuł drugiego stopnia
<p style="color: #FF00FF">Akapit w kolorze Fuchsia</p>
Akapit w kolorze Fuchsia
<table border>
<tr>
<td style="color: #808000">Komórka tabeli z oliwkowym tekstem</td>
</tr>
</table>
Komórka tabeli z oliwkowym tekstem
Numerowany wykaz w kolorze niebieskim
<ol style="color: blue">
<li>punkt pierwszy
<li>punkt drugi
<li>punkt trzeci
</ol>
1. punkt pierwszy
2. punkt drugi
3. punkt trzeci
Kolor tła
Wiele elementów może mieć przypisany kolor tła. Przykłady (IE i NN wyświetlają je nieco odmiennie):
<h2 style="background-color: yellow">Tytuł stopnia drugiego na żółtym tle</h2>
Tytuł stopnia drugiego na żółtym tle
11
<p style="background-color: aqua">Akapit na tle Aqua</p>
Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle
Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit
na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua. Akapit na tle Aqua.
Akapit na tle Aqua.
<table border>
<tr>
<td style="background-color: #808000">Komórka tabeli z zielonym tłem</td>
</tr>
</table>
Komórka tabeli z zielonym tłem
Specyfikacja CSS2 wprowadza 28 kolorów systemowych (pochodzących z systemu operacyjnego), które
integrują się z kolorami środowiska użytkownika. Ich rolę widać np. wyraźnie po zmianie schematu
odpowiedzialnego za wyświetlanie środowiska Windows. Niniejszy akapit jest wyświetlany przy użyciu stylu <p
style="color:background">, a więc za pomocą koloru pulpitu Windows. Każdy czytelnik widzi więc ten kolor, który
ma na swoim własnym pulpicie.
Są to następujące kolory (według specyfikacji CSS2):
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
ActiveBorder - Active window border.
ActiveCaption - Active window caption.
AppWorkspace - Background color of multiple document interface.
Background - Desktop background.
ButtonFace - Face color for three-dimensional display elements.
ButtonHighlight - Dark shadow for three-dimensional display elements (for edges facing away
from the light source). Shadow color for three-dimensional display elements.
ButtonShadow - Shadow color for three-dimensional display elements.
ButtonText - Text on push buttons.
CaptionText - Text in caption, size box, and scroll bar arrow box.
GrayText - Grayed (disabled) text. This color is set to #000 if the current display driver does not
support a solid gray color.
Highlight - Item(s) selected in a control.
HighlightText - Text of item(s) selected in a control.
InactiveBorder - Inactive window border.
InactiveCaption - Inactive window caption.
InactiveCaptionText - Color of text in an inactive caption.
InfoBackground - Background color for tooltip controls.
InfoText - Text color for tooltip controls.
Menu - Menu background.
MenuText - Text in menus.
Scrollbar - Scroll bar gray area.
ThreeDDarkShadow - Dark shadow for three-dimensional display elements.
ThreeDFace - Face color for three-dimensional display elements.
ThreeDHighlight - Highlight color for three-dimensional display elements.
ThreeDLightShadow - Light color for three-dimensional display elements (for edges facing the
light source).
ThreeDShadow - Dark shadow for three-dimensional display elements.
Window - Window background.
WindowFrame - Window frame.
WindowText - Text in windows.
12
Grafika jako tło
Rozmaitym elementom możemy przypisywać grafikę jako tło. Przykłady:
<h1 style="background-image: url(canvas2.gif)">Tytuł stopnia pierwszego na tle płótna</h1>
Tytuł stopnia pierwszego na tle płótna
<table border>
<tr>
<td style="background-image: url(greendot.gif)”>Komórka tabeli z zieloną kropką jako tłem</td>
</tr>
</table>
Komórka tabeli z zieloną kropką jako tłem
Powtarzanie tła
Tło dokumentu może się powtarzać tylko w pionie, tylko w poziomie, w obu kierunkach lub nie powtarzać się w
ogóle. Definiując w stylach ciało dokumentu (BODY), możemy podać następujące, przykładowe polecenie:
<style type="text/css">
<!-BODY { background: #C0C0C0 url(greendot.gif);
background-repeat: repeat-y }
-->
</style>
Inne wartości to repeat-x, repeat, no-repeat.
Przykłady:
repeat-y | repeat-x | repeat | no-repeat |
Zaczepienie tła
Tłem strony może być grafika. Wystarczy podać w stylu definicję BODY {background: url(nazwa_obrazka)}, aby
obrazek pojawił się w tle dokumentu. Obrazek może się przesuwać w miarę przewijania dokumentu (czyli tkwić
w miejscu w stosunku do treści) lub pozostawać nieruchomo (tkwić w miejscu w stosunku do ekranu). W tym
drugim przypadku powinniśmy podać definicję:
BODY {background: url(nazwa_obrazka); background-attachment: fixed}
Proszę porównać dwa przykłady, przesuwając pionowy suwak przeglądarki (IE4, Opera 7):
obrazek przesuwa się na ekranie | obrazek tkwi nieruchomo na ekranie
Pozycja tła
Tło może mieć różną pozycję. Najbardziej typowym przykładem jest tło strony, którym jest obrazek.
13
Przykład: tło na środku strony
W tym akurat przykładzie zdefiniowaliśmy tło jako pojedynczy obrazek na środku ekranu, czyli za pomocą
polecenia BODY {background: url(pcq.gif) fixed no-repeat center}. Najważniejszy jest tutaj parametr center.
To było tzw. polecenie mieszane, natomiast pełna składnia dla pozycji tła wygląda następująco (realizuje ją IE4):
background-position: wartość
W przykładowej tabeli (z jedną komórką) możemy wstawić grafikę jako tło, bez definiowania pozycji.
bez definiowania pozycji bez
definiowania pozycji bez
definiowania pozycji
Możemy jednak określić pozycję tła:
background-position: top
pozycja top pozycja top pozycja top
pozycja top
background-position: center
pozycja center pozycja center
14
background-position: bottom
pozycja bottom pozycja bottom
pozycja bottom
W powyższych przykładach grafika ustawiała się domyślnie na środku, jeśli chodzi o położenie poziome.
Możemy jednak definiować także wartości dla położenia poziomego:
background-position: left
pozycja left pozycja left pozycja
left
background-position: center
pozycja center
background-position: right
pozycja right pozycja right pozycja
right
15
Zauważmy, że parametr center daje ten sam wynik w pionie i poziomie.
Możemy mieszać wartości pozycji pionowej i poziomej, na przykład top left czy bottom right:
background-position: top right
pozycja top right pozycja top right
pozycja top right
background-position: bottom left
pozycja bottom left pozycja bottom
left pozycja bottom left
Możliwe jest wreszcie podanie wartości liczbowych, np. background-position: 1cm 2cm, czyli 1 centymetr od
lewego brzegu i 2cm od prawego.
background-position: 1cm 2cm
pozycja 1cm 2cm pozycja 1cm 2cm
pozycja 1cm 2cm
background-position: 20% 80%
16
pozycja 20% 80% pozycja 20%
80% pozycja 20% 80%
Mieszane atrybuty tła
Najwygodniejszym sposobem definiowania tła jest oczywiście wykorzystanie tzw. definicji mieszanej, w której nie
powtarza się całego zestawu "zaklęć" background-repeat, background-position itd. Wykorzystujemy tu
polecenie:
background: kolejne wartości
Na przykład, polecenie dla komórki tabeli:
<td style="background: url(obrazek) no-repeat bottom right>
spowoduje, że w komórce pokaże się dany obrazek (url), nie będzie się powtarzał (no-repeat) i będzie
umieszczony w dolnym prawym rogu (bottom right).
Pokazana wyżej strona z pojedynczym obrazkiem jako tłem ma mieszaną definicję:
BODY {background: url(pcq.gif) fixed no-repeat center}
Dzięki takiej definicji strona ma tło w postaci pojedynczego (no-repeat) obrazka (url), który jest umieszczony na
środku ekranu i nie porusza się (center fixed).
Suwaki
Nowsze wersje Internet Explorera interpretują definicję kolorów suwaków (scrollbar), pojawiających się w
oknie przeglądarki, gdy dokument jest dłuższy lub szerszy niż okno. Definicja taka została zastosowana
m.in. w naszym kursie. Domyślny wygląd suwaków zależy od schematu kolorów przyjętego przez
użytkownika w jego systemie. Definiowanie kolorów suwaków pozwalają zastosować kolorystykę
odpowiadającą np. dominującym kolorom strony.
Definicja może dotyczyć wszystkich elementów, w których pojawiają się suwaki. Typowym użyciem jest
BODY, choć może to być np. także IFRAME, SELECT czy TEXTAREA. W tym miejscu zaprezentujemy
przykłady dla ciała dokumentu.
Uwaga: definicji tej nie ma w specyfikacji stylów CSS - dotyczy jedynie Internet Explorera 5.5.
Pełna definicja zawiera 7 możliwych części suwaków:
Scrollbar-Base-Color: kolor powierzchni suwaka i strzałek oraz rynny suwaka
Scrollbar-Face-Color: kolor powierzchni suwaka i strzałek, a także kolor składowy rynny suwaka
Scrollbar-Arrow-Color: kolor strzałek
Scrollbar-Highlight-Color: kolor składowy rynny suwaka
Scrollbar-Shadow-Color: kolor płytszego cienia
Scrollbar-Dark-Shadow-Color: kolor głębszego cienia
Scrollbar-3dLight-Color: kolor zewnętrznego cienia
17
scrollbar-base-color:blue
scrollbar-face-color:blue
scrollbar-arrow-color:blue
scrollbar-highlight-color:blue
scrollbar-shadow-color:blue
scrollbar-dark-shadow-color:blue
18
scrollbar-3dlight-color:blue
Sprawne posługiwanie się tymi wartościami wymaga poeksperymentowania - najlepiej nadaje się do tego
testowa strona na serwerze Microsoftu, gdzie obiektem jest element TEXTAREA.
Pełna definicja kolorów suwaków w naszym kursie ma postać:
body {
scrollbar-3dlight-color:tan;
scrollbar-arrow-color:#000000;
scrollbar-base-color:black;
scrollbar-dark-shadow-color:#000000;
scrollbar-face-color:#008080;
scrollbar-highlight-color:snow;
scrollbar-shadow-color:lightblue}
W tworzeniu definicji warto się posługiwać np. zestawieniem kolorów w kursie.
Marginesy zewnętrzne i wewnętrzne
stylów.
Górny margines (top margin)
Prawy margines (right margin)
Dolny margines (bottom margin)
Lewy margines (left margin)
Mieszane atrybuty marginesu (margin)
Górny wewnętrzny margines (top padding)
Dolny wewnętrzny margines (bottom padding)
Prawy wewnętrzny margines (right padding)
Lewy wewnętrzny margines (left padding)
19
Mieszane atrybuty wewnętrznego marginesu (padding)
Górny margines
Polecenie margin-top: xxx pozwala wprowadzić górny margines dla danego elementu, a więc dodatkowy odstęp
między nim a poprzedzającym go elementem.
<p style="margin-top: 2cm">To jest treść akapitu</p>
To jest pierwszy akapit.
To jest drugi akapit, w którym górny margines ma 2 cm.
Prawy margines
Polecenie margin-right: xxx pozwala wprowadzić prawy margines dla danego elementu, a więc dodatkowy
odstęp między nim a prawym brzegiem strony czy następującym po nim elementem.
<p style="margin-right: 2cm">To jest treść akapitu</p>
To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy
margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w
którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma 2 cm. To jest
drugi akapit, w którym prawy margines ma 2 cm. To jest drugi akapit, w którym prawy margines ma
2 cm.
Dolny margines
Polecenie margin-bottom: xxx pozwala wprowadzić dolny margines dla danego elementu, a więc dodatkowy
odstęp między nim a następującym po nim elementem.
<p style="margin-bottom: 2cm">To jest treść akapitu</p>
To jest pierwszy akapit, w którym dolny margines ma 2 cm.
To jest drugi akapit.
Lewy margines
Polecenie margin-left: xxx pozwala wprowadzić lewy margines dla danego elementu, a więc dodatkowy odstęp
między nim a lewym brzegiem strony czy poprzedzającym go elementem.
<p style="margin-left: 10%">To jest treść akapitu</p>
To jest akapit, w którym lewy margines ma 10 procent.
20
Mieszane atrybuty marginesu
Możemy podawać mieszane wartości marginesów dla danego elementu, posługując się poleceniem margin:.
Przykładowo:
p style="margin: 1cm" wprowadzi 1-centymetrowy margines ze wszystkich stron.
p style="margin: 1cm 2cm" wprowadzi 1-centymetrowy margines u góry i u dołu oraz 2-centymetrowy margines z
lewej i z prawej strony.
p style="margin: 1cm 2cm 0.5cm 1.5cm" wprowadzi odrębne marginesy dla każdej ze stron.
Górny wewnętrzny margines
Różne elementy możemy oddzielać od innych, definiując dodatkowy wewnętrzny margines, poszerzający
"naturalny" odstęp.
<p style="padding-top: 1cm">Akapit oddzielony od innego elementu dodatkowym, 1-centymetrowym
odstępem.</p>
Akapit oddzielony od górnego brzegu obramowania 1-centymetrowym odstępem.
Akapit oddzielony od górnego brzegu komórki tabeli 5-milimetrowym odstępem.
Akapit oddzielony od obrazka dodatkowym, 1-centymetrowym odstępem.
Dolny wewnętrzny margines
W analogiczny sposób tworzymy dolny wewnętrzny margines.
<p style="padding-bottom: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym
odstępem.</p>
Akapit oddzielony od dolnego brzegu obramowania 1-centymetrowym odstępem.
Lewy wewnętrzny margines
<p style="padding-left: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym
odstępem.</p>
21
Akapit oddzielony od lewego brzegu obramowania 1-centymetrowym odstępem.
Prawy wewnętrzny margines
<p style="padding-right: 1cm">Akapit oddzielony od od innego elementu dodatkowym, 1-centymetrowym
odstępem.</p>
Akapit oddzielony od prawego brzegu obramowania 1-centymetrowym odstępem. Akapit oddzielony od prawego
brzegu obramowania 1-centymetrowym odstępem.
Mieszane atrybuty wewnętrznego marginesu
Możemy ustalić kilka atrybutów padding jednocześnie. Na przykład:
<p style="padding: 1cm">Akapit oddzielony od obramowania dodatkowymi odstępami.</p>
Akapit oddzielony od obramowania dodatkowymi odstępami
Możemy także podać odrębne wartości dla kolejnych marginesów, np. 1cm 2cm - górny/dolny prawy/lewy
(realizowane z błędami).
Obramowania
stylów.
Szerokość górnego obramowania (top border width)
Szerokość prawego obramowania (right border width)
Szerokość dolnego obramowania (bottom border width)
Szerokość lewego obramowania (left border width)
Mieszane atrybuty szerokości obramowania (border width)
Kolor obramowania (border color)
Styl obramowania (border style)
Mieszane atrybuty górnego obramowania (top border)
Mieszane atrybuty prawego obramowania (right border)
Mieszane atrybuty dolnego obramowania (bottom border)
Mieszane atrybuty lewego obramowania (left border)
Mieszane atrybuty obramowania (border)
Szerokość górnego obramowania
Wielu elementom można nadawać obramowanie - z jednej lub kilku stron. Górny brzeg obramowania
definiujemy następująco (tylko NC4 - IE4 realizuje polecenie w ramach definicji mieszanej):
<p style="border-top-width: 1mm">Akapit z górnym obramowaniem</p>
Akapit z górnym obramowaniem (tylko NC4, ale nie Netscape 6)
22
Szerokość prawego obramowania
<p style="border-right-width: 1mm">Akapit z prawym obramowaniem</p>
Akapit z prawym obramowaniem (tylko NC4, ale nie Netscape 6)
Szerokość dolnego obramowania
<p style="border-bottom-width: 1mm">Akapit z dolnym obramowaniem</p>
Akapit z dolnym obramowaniem (tylko NC4, ale nie Netscape 6)
Szerokość lewego obramowania
<p style="border-left-width: 1mm">Akapit z lewym obramowaniem</p>
Akapit z lewym obramowaniem (tylko NC4, ale nie Netscape 6)
Mieszane atrybuty szerokości obramowania
Elementowi można przypisać obramowanie, podając szerokości obramowania kilku stron jednocześnie
(realizowane z błędami).
<p style="border-width: 3mm 2mm">Akapit</p>
Akapit
Kolor obramowania
Dodatkowym atrybutem, który można zastosować w obramowaniu, jest kolor.
<p style="border-bottom-width: thick; border-color: red">Akapit z dolnym, grubym czerwonym
obramowaniem</p>
Akapit z dolnym, grubym czerwonym obramowaniem (tylko NC4)
<p style="border-top-width: thin; border-color: red">Akapit z górnym, cienkim czerwonym obramowaniem</p>
Akapit z górnym, cienkim czerwonym obramowaniem (tylko NC4)
<p style="border-left-width: medium; border-color: red">Akapit z lewym, średnim czerwonym obramowaniem</p>
Akapit z lewym, średnim czerwonym obramowaniem (tylko NC4)
Styl obramowania
Dodatkowe polecenie umożliwia zdefiniowanie stylu obramowania (IE4 realizuje tylko częściowo i odmiennie od
NN). Border-style przybiera wartości: none, dotted (nie realizowane), dashed (nie realizowane), solid, double,
groove, ridge, inset, outset.
<p style="border: styl">Akapit</p>
Przykłady:
border: none
23
border: dashed
border: dotted
border: solid 2mm
border: double 3mm
border: groove 5mm red
border: ridge 5mm
border: inset 5mm
border: outset 5mm
Mieszane atrybuty górnego obramowania
Górne obramowanie może mieć definicję mieszaną, np.:
<p style="border-top: solid red thick">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Proszę zauważyć, że IE nie dostrzega polecenia border-top-width, ale poprawnie interpretuje definicję mieszaną!
Odwrotnie zachowuje się NN!! To jeszcze jeden powód zachowywania należnej ostrożności w posługiwaniu się
stylami.
Mieszane atrybuty prawego obramowania
Prawe obramowanie może mieć definicję mieszaną, np.:
<p style="border-right: solid olive double">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To
jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Mieszane atrybuty dolnego obramowania
Dolne obramowanie może mieć definicję mieszaną, np.:
<p style="border-bottom: solid red fuchsia">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Mieszane atrybuty lewego obramowania
24
Lewe obramowanie może mieć definicję mieszaną, np.:
<p style="border-left: groove yellow 2mm">Akapit</p>
To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To jest treść akapitu. To
jest treść akapitu. To jest treść akapitu. To jest treść akapitu.
Mieszane atrybuty obramowania
Definiując obramowanie, możemy stosować definicję mieszaną, w której podamy jedynie polecenie border i
wartości, rezygnując z wymieniania własności. Zamiast:
border-width: thick; border-style: double; border-color: red
Możemy wpisać po prostu:
border: thick double red
Obrys
stylów.
Informacje ogólne
Kolor obrysu (outline color)
Styl obrysu (outline style)
Szerokość obrysu (outline-width)
Mieszane atrybuty obrysu (outline)
Informacje ogólne
Obrys elementu (outline) jest podobny do obramowania, ale istnieje między nimi kilka różnic: obrys nie musi być
prostokątem, nie da się oddzielnie regulować rozmaitych boków obrysu (wszystkie mają te same cechy),
wreszcie obrys nie zabiera miejsca, tzn. jest tworzony na elemencie, a nie na zewnątrz elementu.
Obrysy interpretuje w dużej mierze Opera 7.
Kolor obrysu
Kolor obrysu jest wprowadzany za pomocą polecenia outline-color: kolor. Na przykład, grafikę można obrysować
na czerwono poleceniem:
<img SRC="../grafika/enter.gif" style="outline-color: red">
Tak to wygląda w Operze 7:
25
Styl obrysu
Styl obrysu wprowadzamy za pomocą polecenia outline-style: styl
<p style="outline-style: double">jakiś akapit</p>
jakiś akapit
Wartości dla stylów są następujące: none, dotted, dashed, solid. groove, ridge, inset, outset, double.
Szerokość obrysu
Szerokość obrysu jest definiowana za pomocą polecenia outline-width. Na przykład:
<p style="outline-style: solid; outline-width: thick; outline-color: red">jakiś akapit</p>
jakiś akapit
Wartości dla szerokości są następujące: thin, medium, thick, wartość w jednostce miary.
Wykazy
stylów.
Typ stylu wykazu (list style type)
Obrazek jako wyróżnik wykazu (marker) (list style image)
Zawijanie punktów wykazu (pozycja markera) (list style position)
Mieszane atrybuty wykazu (list style)
Odstęp markera (marker offset)
Typ stylu wykazu
Punkty wykazu mogą być wyróżniane na kilka sposobów:
<ul style="list-style-type: disc">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
•
•
•
pierwszy punkt
drugi punkt
trzeci punkt
26
list-style-type: circle
o
o
o
pierwszy punkt
drugi punkt
trzeci punkt
list-style-type: square
pierwszy punkt
drugi punkt
trzeci punkt
list-style-type: decimal
1. pierwszy punkt
2. drugi punkt
3. trzeci punkt
list-style-type: lower-roman
i.
ii.
iii.
pierwszy punkt
drugi punkt
trzeci punkt
list-style-type: upper-roman
I.
II.
III.
pierwszy punkt
drugi punkt
trzeci punkt
list-style-type: lower-alpha
a. pierwszy punkt
b. drugi punkt
c. trzeci punkt
list-style-type: upper-alpha
A. pierwszy punkt
B. drugi punkt
C. trzeci punkt
list-style-type: none
•
•
•
pierwszy punkt
drugi punkt
trzeci punkt
Netscape 6 obsługuje niektóre wartości z przewidzianych list-style-type, jak decimal-leading-zero (wiodące zero,
np. 01, 02, 03...), lower-greek, lower-latin, upper-latin, cjk-ideographic, hiragana, katakana, hiragana-iroha,
katakana-iroha, armenian, georgian, hebrew.
list-style-type: decimal-leading-zero
27
•
•
•
pierwszy punkt
drugi punkt
trzeci punkt
list-style-type: lower-greek
•
•
•
pierwszy punkt
drugi punkt
trzeci punkt
Obrazek jako wyróżnik wykazu
Możliwe jest zastosowanie grafiki jako wyróżnika pozycji wykazu. Na przykład (IE 5, Netscape 6, Opera 7):
<ul style="list-style-image: url(greendot.gif)">
•
•
•
pierwszy punkt
drugi punkt
trzeci punkt
Zawijanie punktów wykazu
Style pozwalają określić, czy punkty wykazu dłuższe niż jeden wiersz na ekranie będą zawijane z wcięciem do
pozycji pierwszego wiersza (outside), czy też bez wcięcia, a więc do pozycji wyróżnika (markera) punktu (inside).
Innymi słowy, czy markery będą "wewnątrz", czy też "na zewnątrz" punktów. Polecenie realizują IE 5, Netscape
6, Opera 7 - przykłady ze zwykłymi wyróżnikami i grafiką jako markerem.
<ul style="list-style-position: wartość">
list-style-position: inside
•
•
•
•
•
•
pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt
drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi
punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt
trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci
punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
list-style-position: outside
•
•
pierwszy punkt
drugi punkt
28
•
•
•
•
Mieszane atrybuty wykazu
Podobnie jak w przypadku wielu innych elementów, możemy się posługiwać mieszanymi definicjami wykazu.
Zamiast kolejno wyliczać poszczególne własności, możemy podać polecenie list-style, za którym znajdą się od
razu wartości. Na przykład:
Zamiast
list-style-image: url(greendot.gif); list-style-type: circle; list-style-position: outside
Możemy użyć
list-style: url(greendot.gif) circle outside
Odstęp markera
Specyfikacja CSS2 przewiduje jawne deklarowanie odstępu markera od treści punktów wykazu. Można to
realizować za pomocą polecenia marker-offset: wartość. Na przykład:
<li style="marker-offset: 5cm">punkt wykazu</li>
•
punkt wykazu
Żadna z przeglądarek nie obsługuje tego polecenia.
Rozmiary
stylów.
Szerokość (width)
Szerokość minimalna (min-width)
Szerokość maksymalna (max-width)
Wysokość elementu inline (line-height)
Wysokość (height)
Wysokość minimalna (min-height)
Wysokość maksymalna (max-height)
Szerokość
Ustala szerokość elementu blokowego.
29
<p style="width: 150px"> pozwoli uzyskać akapit o szerokości 150 pikseli. pozwoli uzyskać akapit o
szerokości 150 pikseli. pozwoli uzyskać akapit o szerokości 150 pikseli. pozwoli uzyskać akapit o szerokości 150
pikseli.</p> pozwoli uzyskać akapit o szerokości 150 pikseli.
To jest akapit. To jest akapit. To jest akapit. To jest akapit. To jest akapit. To jest akapit. To jest akapit. To jest
akapit. To jest akapit. To jest akapit. To jest akapit. To jest akapit. To jest akapit. To jest akapit. To jest akapit.
Akapit o szerokości 15 cm
Akapit o szerokości 110% (elementu nadrzędnego w hierarchii, czyli tutaj szerokości strony) - width:110%.
Tabela o szerokości 10cm
<table style="width: 10cm" border=1>
To jest komórka 1.1 To jest
komórka 1.1 To jest
komórka 1.1
komórka 1.2
komórka 2.1
komórka 2.2
Obrazek o wymuszonej szerokości 4cm.
<IMG SRC="kubus.jpg" WIDTH="263" HEIGHT="236" BORDER="0" ALT="Rozmiar: 12008
bajtów" style="width: 4cm">
Wykaz o szerokości 7cm
30
<ul style="width: 7cm">
punkt 1 punkt 1 punkt 1 punkt 1 punkt 1 punkt 1
Linia o szerokości 50 procent (strony)
<hr style="width: 50%">
Szerokość minimalna
Ustala minimalną szerokość dla elementu. Składnia: min-width: wartość. Interpretują je Netscape 6 i Opera.
Przykład obrazka - pierwszy ma min-width większe od nominalnych rozmiarów):
<IMG SRC="kubus.jpg" WIDTH="263" HEIGHT="236" BORDER="1" ALT="Kubuś" style="minwidth:350px">
Przykład tekstu - tytuł ma min-width ustalone na 400px, więc przy zmniejszeniu okna przeglądarki pojawił się
poziomy pasek przewijania. Zawinięcie tekstu jest możliwe dopiero po przekroczeniu 400 pikseli.
<H2 style="min-width:400px">Jakiś tekst sformatowany jako tytuł stopnia 2</H2>
Szerokość maksymalna
31
Określa dozwolone maksimum szerokości dla elementu. Składnia: max-width: wartość. Interpretują je Opera 6 i
Netscape 6.
Przykład ograniczenia tekstu:
<H1 style="max-width:250px">Ten tytuł ma maksymalną szerokość 250 pikseli</H1>
Przykład ograniczenia grafiki - zwróć uwagę, że obrazek ma nominalną szerokość 303 piksele, zaś max-width
wynosi tylko 150px:
<IMG style="max-width:150px" SRC="maxwidth1.gif" WIDTH="303" HEIGHT="180"
BORDER="0" ALT="Rozmiar: 3124 bajtów">
Wysokość elementu inline
Polecenie wstawia dodatkową przestrzeń nad i pod elementem, rozdzielając ją równo (Netscape akurat dodaje u
góry).
Polecenie: line-height: wartość.
Poniższy przykład (<div STYLE="line-height: 300%; font-size: 11pt"></div>), pokazany na tle
zwykłego przełamania wiersza, pokazuje sens użycia.
Jakaś tam treść jakaś tam treść jakaś tam treść jakaś tam treść przełamanie
jakaś tam treść jakaś tam treść jakaś tam treść jakaś tam treść
tekst w bloku tekst w bloku tekst w bloku tekst w bloku
Jakaś tam treść jakaś tam treść przełamanie
jakaś tam treść jakaś tam treść jakaś tam treść jakaś tam treść jakaś tam treść jakaś tam treść
Wysokość
32
<p style="height: 1cm">Akapit Akapit Akapit Akapit Akapit Akapit </p>
Normalny Akapit Akapit Akapit Akapit Akapit Akapit
Akapit o wysokości 1 cm Akapit Akapit Akapit Akapit Akapit
Normalny Akapit Akapit Akapit Akapit Akapit Akapit
Tabela o wysokości 4 cm
<table style="height: 4cm; width:100%" border=1>
To jest komórka 1.1 To jest komórka 1.1 To jest
komórka 1.1 To jest komórka 1.1 To jest komórka komórka 1.2 To jest komórka 1.2 To jest komórka
1.1 To jest komórka 1.1
komórka 2.1 To jest komórka 2.1 To jest komórka komórka 2.2 To jest komórka 2.2 To jest komórka
Wysokość minimalna
Określa minimalną dozwoloną wysokość elementu. Składnia: min-height: wartość. Interpretują je Netscape i
Opera w wersjach 6.
Przykład grafiki:
<IMG SRC="kubus.jpg" WIDTH="263" HEIGHT="236" BORDER="0" ALT="Kubuś" style="minheight:300px">
Przykład tekstu:
<P style="min-height:3cm">akapit</P>
33
Wysokość maksymalna
Określa maksymalną dozwoloną wysokość elementu. Składnia: max-height: wartość.
Przykład tekstu:
<P style="max-height:3mm; color:red">Akapit z maksymalną wysokością 3mm</P>
34

Style w przykładach Własności czcionek

Transkrypt

Podobne dokumenty

Dziewczyna i chłopak, czyli heca na 14 fajerek -

Wzór listu motywacyjnego

TWORZYMY AKAPITY W EDYTORZE TEKSTU

Schemat listu motywacyjnego Akapit I Akapit II Akapit III Akapit IV

Ćwiczenie 5. Synonimy

Odstępy między wierszami i wypunktowania

Formatowanie akapitów dytor tekstu – program komputerowy

ZADANIE 1:

ZADANIE 1. FORMATOWANIE TEKSTU ORAZ WYRÓŻNIENIA

polish - TheLeavingCert.com