docstyle przykłady.
download 
Reklamacja Transkrypt
style przykłady.
Przykłady stylów css
Styl lokalny
1.
<p style="font-size: 12pt; font-weight: bold; font-family: 'Andale mono', 'Courier New',
monospace">Treść akapitu</p>
To jest akapit wyświetlany za pomocą czcionki Andale mono, Courier New lub innej
monotypicznej, pogrubionej, o wielkości 12 punktów.
2.
<h1 style="font-size: 25pt; font-weight: bold; font-family: Arial, sans-serif">Treść tytułu</h1>
Tytuł stopnia 1, Arial, pogrubiony, 25 punktów
3.
<ul style="font: italic bold 14pt Times; color: red">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
•pierwszy punkt
•drugi punkt
•trzeci punkt
4.
<p style="text-transform: capitalize">to jest akapit, w którym pierwsze litery wyrazów są
wyświetlane za pomocą kapitalików.</p>
5.
Pozioma linia z kilkoma atrybutami (tylko IE4 i 5)
<hr style="height: 3mm; width: 200pt; color: lime">
6.
<ul style="list-style: lower-roman inside">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
•pierwszy punkt
•drugi punkt
•trzeci punkt
7. klasa notatka.
.notatka
{font-family: verdana, arial; font-weight: bold; color: blue;
margin-left: 10%; margin-right: 10%}
<div class=notatka>
fragment dokumentu objęty blokiem
</div>
8. osadzony styl
<HTML>
<STYLE TYPE="text/css">
<!-BODY {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm}
P {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal; textindent: 3 em}
A {text-decoration: none; color: blue}
H1 {font-size: 24pt}
H2 {font-size: 20pt}
H3 {font-size: 16pt}
H1, H2, H3 {font-family: "Arial CE", Arial, Helvetica; font-weight: bold; color:
#808000}
TD {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal}
LI {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal}
-->
</STYLE>
</HTML>
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)
•Rodzina czcionek (font-family)
<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.
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 poslużyć się nazwą rodzajową, np. serif, akapit zostanie wyświetlony czcionką szeryfową
<p style="font-family: serif">Treść akapitu</p>
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.
T o je s t a k a p it w y ś w ie tlo n y z a p o m o c ą p ie r w s z e j d o s t ęp n e j c z c io n k i o z d o b n e j .
To jest akapit wyświetlony za pomocą pierwszej dostępnej czcionki
monotypicznej.
Oczywiście można mieszać definicje, podając nazwy imienne i rodzajowe, np. "Times, 'Times New Roman', serif".
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).
<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
Treść akapitu wyświetlana za pomocą wagi 200
Treść akapitu wyświetlana za pomocą wagi 300
Treść akapitu wyświetlana za pomocą wagi 400
Treść akapitu wyświetlana za pomocą wagi 500
Treść akapitu wyświetlana za pomocą wagi 600
Treść akapitu wyświetlana za pomocą wagi 700
Treść akapitu wyświetlana za pomocą wagi 800
Treść akapitu wyświetlana za pomocą wagi 900
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
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>
To jest tytuł stopnia pierwszego
To jest tytuł stopnia pierwszego 125%
Normalny akapit
Akapit 125%
Własności tekstu
•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)
•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.
Na razie nie akceptuje ich żadna przeglądarka
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-milimetrowe odstępy między literami, akceptowane przez IE.
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.
<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.
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
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...</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%.
Własności koloru i tła
•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 tekstemNumerowany 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
<p style="background-color: blue">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
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
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}
Pozycja tła
Tło może mieć różną pozycję. Najbardziej typowym przykładem jest tło strony, którym jest obrazek.
tło na środku strony
tło jako pojedynczy obrazek na środku ekranu, czyli za pomocą polecenia BODY {background: url(pcq.gif) fixed
no-repeat center}. background-position: wartość
W przykładowej tabeli (z jedną komórką) możemy wstawić grafikę jako tło, bez definiowania pozycji.
Możemy jednak określić pozycję tła:
background-position: top
background-position: center
background-position: 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
Możemy mieszać wartości pozycji pionowej i poziomej, na przykład top left czy bottom right:
background-position: top right
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
background-position: 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.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.
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
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
scrollbar-3dlight-color:blue
Pełna definicja kolorów suwaków :
body { scrollbar-3dlight-color:tan; scrollbar-arrow-color:#000000; scrollbar-base-color:black;
scrollbar-dark-shadow-color:#000000; scrollbar-face-color:#008080; scrollbar-highlightcolor:snow; scrollbar-shadow-color:lightblue}
cursor:styl_kursora
<img src="lupus.gif" width=176 height=200 alt="" border="0" style="cursor:help">
Oto cała lista kursorów
cursor:crosshair
cursor:hand
cursor:move
cursor:e-resize
cursor:ne-resize
cursor:nw-resize
cursor:n-resize
cursor:se-resize
cursor:sw-resize
cursor:s-resize
cursor:w-resize
cursor:text
cursor:wait
cursor:help
cursor:default
cursor:auto
