Polecenie | Przykładowe kody | Ilustracja | IE | FF | O | CSS | |||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Selektory | |||||||||||||
Selektor prosty | w Head | p {color : red; } LUB | To jest czerwony tekst |
||||||||||
w Body | <p style="color : red;">To jest czerwony tekst</p> | ||||||||||||
Selektor uniwersalny | w Head | * {color: #FF0000; font-weight:bold; } | ilustracja niemożliwa w tym miejscu | ||||||||||
Selektor potomka (kontekstowy) | w Head | h1 i {color : red; } ORAZ |
To jest tytuł H1 |
||||||||||
w Body | <h1>To jest <i>tytuł</i> H1</h1> | ||||||||||||
Selektor dziecka | w Head | p > u { color : green; } ORAZ | To jest zdanie z zielonym podkreśleniem |
||||||||||
w Body | <p>To jest zdanie z <u>zielonym podkreśleniem</u></p> | ||||||||||||
Selektor braci | w Head | b + i {color : green; } ORAZ | Akapit, pogrubienie oraz pochylenie i reszta akapitu |
||||||||||
w Body | <p>Akapit, <b>pogrubienie</b> oraz <i>pochylenie</i> i reszta akapitu</p> | ||||||||||||
Prosty selektor atrybutu | w Head | h3[title] {font-family: Verdana; color: olive; } ORAZ |
Tytuł st. 3 z atrybutem title o dowolnej wartości |
||||||||||
w Body | <h3 title="Jakiś tytuł">Tytuł st. 3 z atrybutem title o dowolnej wartości</h3> | ||||||||||||
Selektor atrybutu o określonej wartości | w Head | h4[title="rozdział"] {font-family: Arial; } ORAZ | Tytuł st. 4 z atrybutem title="rozdział" |
||||||||||
w Body | <h4 title="rozdział">Tytuł st. 4 z atrybutem title="rozdział"</h4> | ||||||||||||
Klasa selektorów | w Head | p.istotne {font-family: Times; font-size: 10pt; color: red; } ORAZ | To jest niesłychanie istotny akapit |
||||||||||
w Body | <p class="istotne">To jest niesłychanie istotny akapit</p> | ||||||||||||
Selektor ID | w Head | h1#chapter {letter-spacing: 0.5em; } ORAZ | Tytuł rozdziału |
||||||||||
w Body | <h1 id="chapter">Tytuł rozdziału</h1> | ||||||||||||
Pseudoklasa :link | w Head | a:link {color:white; background: black} ORAZ | Tutaj jest PC World Komputer | ||||||||||
w Body | <a href="http://www.pcworld.pl">Tutaj jest PC World Komputer</a> | ||||||||||||
Pseudoklasa: visited | w Head | a:visited {color:white; background: black} ORAZ | Tutaj jest PC World Komputer | ||||||||||
w Body | <a href="http://www.pcworld.pl">Tutaj jest PC World Komputer</a> | ||||||||||||
Pseudoklasa :hover | w Head | a:hover {color:white; background: black} ORAZ | Tutaj jest PC World Komputer | ||||||||||
w Body | <a href="http://www.pcworld.pl">Tutaj jest PC World Komputer</a> | ||||||||||||
Pseudoklasa :active | w Head | a:active {color:white; background: black} ORAZ | Tutaj jest PC World Komputer | ||||||||||
w Body | <a href="http://www.pcworld.pl">Tutaj jest PC World Komputer</a> | ||||||||||||
Pseudoklasa :lang | w Head | p:lang(en) {font-weight:bold} ORAZ | This is a paragraph in bold |
||||||||||
w Body | <p lang="en">This is a paragraph in bold</p> | ||||||||||||
Pseudoklasa :focus | w Head | :focus {color:white; background:black} ORAZ | |||||||||||
w Body | <textarea cols=20 rows=5 wrap=physical>Kliknij tutaj lub przenieś kursor za pomocą klawiszy tabulatora</textarea> | ||||||||||||
Pseudoklasa :first-child | w Head | ul:first-child {color : red;} ORAZ |
|
||||||||||
w Body | <ul> <li>pierwszy punkt</li> <li>drugi punkt</li> <li>trzeci punkt</li> </ul> |
||||||||||||
Pseudoelement :first-line | w Head | .pierwsza_linia:first-line {text-transform: uppercase} ORAZ | To jest akapit, w którym pierwszy wiersz będzie zamieniony na wersaliki. To jest akapit, w którym pierwszy wiersz będzie zamieniony na wersaliki. Proszę zauważyć, że zawartość pierwszego wiersza zmienia się przy zmianie wielkości okna przeglądarki. |
||||||||||
w Body | <p class="pierwsza_linia">To jest akapit, w którym pierwszy wiersz...</p> | ||||||||||||
Pseudoelement :first-letter | w Head | .pierwsza_litera:first-letter { font-size: 250%; float: left; color:red; font-weight:bold; margin-left: 2%} ORAZ | Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. |
||||||||||
w Body | <p class="pierwsza_litera">Pierwsza litera w tym akapicie jest różna od pozostałych. Pierwsza litera w tym akapicie jest różna od pozostałych. </p> | ||||||||||||
Pseudoelement :before | w Head | .uwaga:before {content : "Uwaga: "} ORAZ | Tu powinien się pojawić wyraz "uwaga" na początku zdania. |
||||||||||
w Body | <p class="uwaga">Tu powinien się pojawić wyraz "uwaga" na początku zdania.</p> | ||||||||||||
Pseudoelement :after | w Head | .koniec:after {content : " :Koniec"; color: red} ORAZ | Tu powinien się pojawić wyraz "koniec" na końcu zdania. |
||||||||||
w Body | <p class="koniec">Tu powinien się pojawić wyraz "koniec" na końcu zdania.</p> | ||||||||||||
Własności czcionek | |||||||||||||
Rodzina czcionek (font-family - czcionka, rodzina font - menu, caption, icon, small-caption, message-box, menu-bar) |
<p style="font-family: Courier, monospace>Treść akapitu</p> |
Treść akapitu |
4 | 1 | 1 | ||||||||
<p style="font: menu">Akapit z czcionką menu</p> | Akapit z czcionką menu |
||||||||||||
<p style="font: small-caption">Akapit z czcionką small-caption</p> | Akapit z czcionką small-caption |
||||||||||||
Styl czcionki (normal, italic, oblique) |
<p style="font-style: normal">Treść akapitu w stylu normal</p> | Treść akapitu w stylu normal |
4 | 1 | 1 | ||||||||
<p style="font-style: italic">Treść akapitu w stylu italic</p> | Treść akapitu w stylu italic |
||||||||||||
<p style="font-style: oblique">Treść akapitu w stylu oblique</p> | Treść akapitu w stylu oblique |
||||||||||||
Wariant czcionki (normal, small-caps) |
<p style="font-variant: normal">Treść akapitu w wariancie normal</p> | Treść akapitu w wariancie normal |
4 | 1 | 1 | ||||||||
<p style="font-variant: small-caps">Treść akapitu w wariancie small-caps</p> | Treść akapitu w wariancie small-caps |
||||||||||||
Waga czcionki (normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900) |
<p style="font-weight: normal">Treść akapitu o wadze normal</p> | Treść akapitu o wadze normal |
4 | 1 | 1 | ||||||||
<p style="font-weight: bold">Treść akapitu o wadze bold</p> | Treść akapitu o wadze bold |
||||||||||||
<p style="font-weight: 200">Treść akapitu o wadze 200</p> | Treść akapitu o wadze 200 |
||||||||||||
<p style="font-weight: 800">Treść akapitu o wadze 800</p> | Treść akapitu o wadze 800 |
||||||||||||
Wielkość czcionki (jednostki miary, procent normalnego, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger). |
<p style="font-size: 8mm">Akapit 8 mm</p> | Akapit 8 mm |
3 | 1 | 1 | ||||||||
<p style="font-size: 14pt">Akapit 14pt</p> | Akapit 14pt |
||||||||||||
<p style="font-size: 150%">Akapit 150%</p> | Akapit 150% |
||||||||||||
<p style="font-size: small">Akapit xx-small</p> | Akapit xx-small |
||||||||||||
<p style="font-size: x-large">Akapit x-large</p> | Akapit x-large |
||||||||||||
Własności tekstu | |||||||||||||
Odstępy między wyrazami (normal, wartości w jednostkach absolutnych (in, cm, mm, pc, pt) lub relatywnych (em, ex, px)) |
<p style="word-spacing: 1cm">Odstępy między wyrazami mają 1 cm</p> | Odstępy między wyrazami mają 1 cm |
|||||||||||
Odstępy między literami (normal, wartości w jednostkach absolutnych (in, cm, mm, pc, pt) lub relatywnych (em, ex, px)) |
<p style="letter-spacing: 1mm">1-milimetrowe odstępy między literami.</p> | 1-milimetrowe odstępy między literami |
|||||||||||
Odstępy między wierszami (normal, wielokrotność wysokości czcionki, procent wysokości czcionki) |
<p style="line-height: 1cm">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> | 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... |
|||||||||||
Dekoracja tekstu (none, underline, overline, line-through, blink) |
<p style="text-decoration: underline">To jest podkreślenie tekstu.</p> | To jest podkreś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. |
||||||||||||
Transformacja tekstu (capitalize, uppercase, lowercase, none) |
<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. |
||||||||||||
Białe znaki (normal, pre, nowrap, pre-wrap, pre-line) |
<p style="white-space: pre">Tutaj jest pięć widocznych spacji</p> | Tutaj jest pięć widocznych spacji |
|||||||||||
<p style="white-space: normal">Tutaj jest pięć spacji ściągniętych do jednej</p> | Tutaj jest pięć spacji ściągniętych do jednej |
||||||||||||
Wyrównanie tekstu (left, right, center, justify) |
<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. |
|||||||||||
<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. To jest przykładowy akapit, który powinien być wyrównany w stosunku do obu marginesów. |
||||||||||||
Wcięcie tekstu (długość w jednostkach lub procentach) |
<p style="text-indent: 10%">To jest akapit, w którym tylko pierwszy wiersz jest odsunięty od lewego marginesu o 10 procent , natomiast drugi i każdy następny wiersz rozpoczyna się już dokładnie od lewego marginesu.</p> | To jest akapit, w którym tylko pierwszy wiersz jest odsunięty od lewego marginesu o 10 procent , natomiast drugi i każdy następny wiersz 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... |
||||||||||||
Kolor i tło | |||||||||||||
Kolor | <h2 style="color: #FF0000">Czerwony tytuł drugiego stopnia</h2> | Czerwony tytuł drugiego stopnia |
|||||||||||
Kolor tła | <h2 style="background-color: yellow">Tytuł stopnia drugiego na żółtym tle</h2> | Tytuł stopnia drugiego na żółtym tle |
|||||||||||
Grafika jako tło | <h1 style="background-image: url(canvas2.gif)">Tytuł stopnia pierwszego na tle płótna</h1> | Tytuł na tle płótna |
|||||||||||
Powtarzanie tła dokumentu (repeat-y, repeat-x, repeat, no-repeat) |
BODY { background: #C0C0C0 url(greendot.gif); background-repeat: repeat-y } |
ilustracja niemożliwa w tym miejscu | |||||||||||
Zaczepienie tła dokumentu | BODY {background: url(nazwa_obrazka); background-attachment: fixed} | ilustracja niemożliwa w tym miejscu | |||||||||||
Pozycja tła (top, center, bottom, left, right, wartości w jednostkach miary, wartości w procentach) |
<td style="background-image: url(sufi-small.jpg); background-position: top; background-repeat: no-repeat"></td> | ||||||||||||
<td style="background-image: url(sufi-small.jpg); background-position: 20% 80%; background-repeat: no-repeat"></td> | |||||||||||||
<td style="background-image: url(sufi-small.jpg); background-position: bottom right; background-repeat: no-repeat"></td> | |||||||||||||
Marginesy i odstępy | |||||||||||||
Marginesy (margin-top, margin-bottom, margin-left, margin-right) |
<p style="margin-top: 2cm">To jest treść akapitu, który ma górny margines 2 cm</p> | To jest treść akapitu, który ma górny margines 2 cm. |
|||||||||||
<p style="margin-left: 2cm">To jest treść akapitu, który ma lewy margines 2 cm</p> | To jest treść akapitu, który ma lewy margines 2 cm |
||||||||||||
Odstępy (padding-top, padding-bottom, padding-left, padding-tight) |
<p style="border: dotted 1px; padding-bottom: 1cm">Akapit oddzielony od obramowania border dolnym, 1-centymetrowym odstępem.</p> | Akapit oddzielony od obramowania border dodatkowym, 1-centymetrowym odstępem. |
|||||||||||
<p style="border: dotted 1px; padding-left: 5mm; padding-right: 5mm">Akapit oddzielony od obramowania border prawym i lewym, 5-milimetrowym odstępem.</p> | Akapit oddzielony od obramowania border prawym i lewym, 5-milimetrowym odstępem. |
||||||||||||
Obramowania | |||||||||||||
Styl obramowania (none, dotted, dashed, solid, double, groove, ridge, inset, outset) |
<p style="border: dashed">Akapit</p> | Akapit |
|||||||||||
<p style="border: solid">Akapit</p> | Akapit |
||||||||||||
<p style="border: double">Akapit</p> | Akapit |
||||||||||||
Obramowanie cząstkowe (border-top, border-botom, border-left, border-right) |
<p style="border-left: double">Akapit</p> | Akapit |
|||||||||||
<p style="border-top: double; border-bottom: double">Akapit</p> | Akapit |
||||||||||||
Grubość obramowania (thin, medium, thick, jednostki miary) |
<p style="border-top: double 2mm; border-bottom: double 2mm">Akapit</p> | Akapit |
|||||||||||
<p style="border: groove thick">Akapit</p> | Akapit |
||||||||||||
Kolor obramowania (wartość koloru) |
<p style="border:solid; border-color: red">Akapit z czerwonym obramowaniem</p> | Akapit z czerwonym obramowaniem |
|||||||||||
<p style="border:solid; border-color: red; border-left-width:2mm; border-left-color:green; padding: 5px">Akapit z czerwonym obramowaniem, ale zielonym lewym brzegiem</p> | Akapit z czerwonym obramowaniem, ale zielonym lewym brzegiem |
||||||||||||
Wykazy (listy) | |||||||||||||
Style wykazu (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none; decimal-leading-zero, lower-greek, upper-greek lower-latin, upper-latin, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, armenian, georgian, hebrew |
<ul style="list-style-type: disc"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
|||||||||||
<ul style="list-style-type: square"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
||||||||||||
<ul style="list-style-type: decimal"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
||||||||||||
<ul style="list-style-type: upper-alpha"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
||||||||||||
<ul style="list-style-type: none"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
||||||||||||
<ul style="list-style-type: decimal-leading-zero"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
||||||||||||
<ul style="list-style-type: lower-greek"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
||||||||||||
<ul style="list-style-type: hebrew"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
||||||||||||
Graficzny wyróżnik | <ul style="list-style-image: url(greendot.gif)"> <li>pierwszy punkt <li>drugi punkt <li>trzeci punkt </ul> |
|
|||||||||||
Zawijanie wykazu (inside, outside) |
<ul style="list-style-position: inside"> <li>pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt <li>drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt <li>trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt </ul> |
|
|||||||||||
<ul style="list-style-position: outside"> <li>pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt pierwszy punkt <li>drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt drugi punkt <li>trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt </ul> |
|
||||||||||||
Odstęp wyróżnika (markera) | <ul> <li style="marker-offset: 5cm">punkt wykazu</li> </ul> |
|
|||||||||||
Tabele | |||||||||||||
Położenie tytułu (top, bottom; left, right) |
<table border="1"> <caption style="caption-side: left">Tytuł tabeli</caption> <tr><td>aa</td> <td>bb</td></tr> <tr><td>ee</td> <td>ff</td></tr> </table> |
|
|||||||||||
<table border="1"> <caption style="caption-side: bottom">Tytuł tabeli</caption> <tr><td>aa</td> <td>bb</td></tr> <tr><td>ee</td> <td>ff</td></tr> </table> |
|
||||||||||||
Obramowanie pustych komórek | <table border="1" STYLE="empty-cells: show"> <tr> <td>aa</td> <td>bb</td> <td></td> </tr> <tr> <td>dd</td> <td>ee</td> <td>ff</td> </tr> </table> |
|
|||||||||||
<table border="1" STYLE="empty-cells: hide"> <tr> <td>aa</td> <td>bb</td> <td></td> </tr> <tr> <td>dd</td> <td>ee</td> <td>ff</td> </tr> </table> |
|
||||||||||||
Wstępne generowanie układu tabeli | <table STYLE="table-layout: fixed"> | brak ilustracji w tym miejscu | |||||||||||
<table STYLE="table-layout: auto"> | brak ilustracji w tym miejscu | ||||||||||||
Odstępy między komórkami | <table border="1" STYLE="border-spacing: 5mm"> <tr><td>aa</td> <td>bb</td> <td>cc</td></tr> <tr><td>dd</td> <td>ee</td> <td>ff</td></tr> </table> |
|
|||||||||||
<table border="1" STYLE="border-spacing: 5mm
2mm"> <tr><td>aa</td> <td>bb</td> <td>cc</td></tr> <tr><td>dd</td> <td>ee</td> <td>ff</td></tr> </table> |
|
||||||||||||
Kondensowanie odstępów | <table STYLE="border-collapse: collapse"> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>dd</td> <td>ee</td> <td>ff</td> </tr> </table> |
|
|||||||||||
<table STYLE="border-collapse: separate"> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>dd</td> <td>ee</td> <td>ff</td> </tr> </table> |
|
||||||||||||
Rozmiary | |||||||||||||
Dokładna (wymuszona) szerokość elementu | <p style="width: 200px">Treść akapitu</p> | 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. |
|||||||||||
Minimalna (wymagana) szerokość elementu | <img border="0" src="sufi-small.jpg" width="171" height="177" style="min-width:300px"> |
![]() |
|||||||||||
Maksymalna (dopuszczalna) szerokość elementu | <img border="0" src="sufi-small.jpg" width="171" height="177" style="max-width:100px"> |
![]() |
|||||||||||
Dodatkowa przestrzeń nad i pod elementem | <p STYLE="line-height: 300%;>Treść</p> |
Zwykły akapit Zwykły akapit Akapit z dodatkową przestrzenią. Akapit z dodatkową przestrzenią. Akapit z dodatkową przestrzenią. Zwykły akapit Zwykły akapit |
|||||||||||
Dokładna (wymuszona) wysokość elementu | <table style="height: 8cm; width:100%" <tr> <td>To jest komórka 1.1 To jest komórka 1.1 To jest komórka 1.1</td> <td>To jest komórka 1.2 To jest komórka 1.2 To jest komórka 1.2</td> </tr> <tr> <td>To jest komórka 2.1 To jest komórka 2.1 To jest komórka 2.1</td> <td>To jest komórka 2.2 To jest komórka 2.2 To jest komórka 2.2</td> </tr> </table> |
|
|||||||||||
Minimalna (wymagana) wysokość elementu | <img border="0" src="sufi-small.jpg" width="171" height="177" style="min-height:300px"> | ![]() |
|||||||||||
Maksymalna (dopuszczalna) wysokość elementu | <img border="0" src="sufi-small.jpg" width="171" height="177" style="max-height:100px"> | ![]() |
|||||||||||
Pozycjonowanie | |||||||||||||
Pozycjonowanie absolutne (left, right; top, bottom) |
<img border="0" src="sufi-small.jpg" width="171" height="177" style="position:absolute; left:60%"> | ![]() |
|||||||||||
Pozycjonowanie względne (left, right; top, bottom) |
<p style="position: relative; left: 50px; top: 10px;">Ten akapit...</p> | Ten akapit ma pozycję względną (relative), jest odsunięty od lewego brzegu o 50 pikseli i o 10 pikseli w dół od naturalnej pozycji. |
|||||||||||
Pionowe wyrównanie (baseline, sub, super, top, text-top, middle, botom, text-bottom, długość, procent) |
<img src="sufi-small.jpg" width="171" height="177" style="vertical-align: middle">tekst | ![]() |
|||||||||||
<img src="sufi-small.jpg" width="171" height="177" style="vertical-align: top">tekst | ![]() |
||||||||||||
<p>Normalny akapit <span style="vertical-align: 3mm"><b>podniesienie tekstu o 3mm</b></span> a potem dalszy ciąg akapitu.</p> | Normalny akapit podniesienie tekstu o 3mm a potem dalszy ciąg akapitu. |
||||||||||||
<p>Normalny akapit <span style="vertical-align: -20%"><b>opuszczenie tekstu o 20%</b></span> a potem dalszy ciąg akapitu.</p> | Normalny akapit opuszczenie tekstu o 20% a potem dalszy ciąg akapitu. |
||||||||||||
<p>Normalny akapit <span style="vertical-align: super"><b>użycie super</b></span> a potem dalszy ciąg akapitu.</p> | Normalny akapit użycie super a potem dalszy ciąg akapitu. |
||||||||||||
<p>Normalny akapit <span style="vertical-align: sub"><b>użycie sub</b></span> a potem dalszy ciąg akapitu.</p> | Normalny akapit użycie sub a potem dalszy ciąg akapitu. |
||||||||||||
Pozycja w stosie | <img src="sufi-small.jpg" width="171" height="177"
style="position:relative; z-index:1"> <img src="canvas2.gif" width="136" height="147" style="position:relative; left: -30px; top: 20px; z-index:2"> |
![]() ![]() |
|||||||||||
Kadrowanie | <img src="sufi-small.jpg" width="171" height="177" style="position:absolute; clip: rect(10px 100px 100px 30px)"> | ![]() |
|||||||||||
Wypływanie treści (scroll, visible, auto, hidden) |
<p style="width:250px; height:60px; overflow:scroll">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> | zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu... |
|||||||||||
<p style="width:250px; height:60px; overflow:visible">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> | zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu... |
||||||||||||
<p style="width:250px; height:60px; overflow:auto">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> | zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu... |
||||||||||||
<p style="width:250px; height:60px; overflow:hidden">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</p> | |||||||||||||
Pływanie elementów (left, right, none) |
<img src="sufi-small.jpg" width="171" height="177" style="float: left"> Obrazek przepływający na lewo i tekst opływający go z prawej strony. | ![]() |
|||||||||||
<img src="sufi-small.jpg" width="171" height="177" style="float: right"> Obrazek przepływający na prawo i tekst opływający go z lewej strony. | ![]() |
||||||||||||
<img src="sufi-small.jpg" width="171" height="177" style="float: none"> Obrazek ustawiony bez opływania. | ![]() |
||||||||||||
Wyświetlanie elementów (none, block, inline list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption) |
<p style="display:inline"><b>Akapit
pierwszy </b></p> <p style="display:inline"><i>Akapit drugi</i></p> |
Akapit pierwszy Akapit drugi |
|||||||||||
<img src="sufi-small.jpg" width="171" height="177" style="display:block"> Tekst, który zostanie zrzucony pod obrazek. | ![]() |
||||||||||||
<img src="sufi-small.jpg" width="171" height="177" style="display:none"> | |||||||||||||
Widzialność elementów | <p style="visibility:hidden">Ten akapit ma być niewidoczny.</p> | ||||||||||||
<p style="visibility:visible">Ten akapit ma być widoczny, nawet jeśli dziedziczy niewidoczność.</p> | Ten akapit ma być widoczny. |
||||||||||||
<p style="visibility:collapse">Ten akapit ma być niewidoczny, nawet jeśli dziedziczy widoczność.</p> | Ten akapit ma być niewidoczny. |
||||||||||||
Obrys | |||||||||||||
Styl obrysu (none, dotted, dashed, solid. groove, ridge, inset, outset, double) |
<p style="outline-style: double">jakiś akapit</p> | jakiś akapit |
|||||||||||
Szerokość obrysu ( thin, medium, thick, wartość w jednostce miary) |
<p style="outline: double thick">jakiś akapit</p> | jakiś akapit |
|||||||||||
Kolor obrysu | <p style="outline: solid thick yellow">jakiś akapit</p> | jakiś akapit |
|||||||||||
Kursory | |||||||||||||
<p style="cursor:crosshair">Przykład crosshair</p> <p style="cursor:hand">Przykład hand</p> <p style="cursor:move">Przykład move</p> <p style="cursor:e-resize">Przykład e-resize</p> <p style="cursor:ne-resize">Przykład ne-resize</p> <p style="cursor:nw-resize">Przykład nw-resize</p> <p style="cursor:n-resize">Przykład n-resize</p> <p style="cursor:se-resize">Przykład se-resize</p> <p style="cursor:sw-resize">Przykład sw-resize</p> <p style="cursor:s-resize">Przykład s-resize</p> <p style="cursor:w-resize">Przykład w-resize</p> <p style="cursor:text">Przykład text</p> <p style="cursor:wait">Przykład wait</p> <p style="cursor:help">Przykład help</p> <p style="cursor:default">Przykład default</p> <p style="cursor:auto">Przykład auto</p> <p style="cursor:pointer">Przykład pointer</p> <p style="cursor:all-scroll">Przykład all-scroll</p> <p style="cursor:col-resize">Przykład col-resize</p> <p style="cursor:row-resize">Przykład row-resize</p> <p style="cursor:no-drop">Przykład no-drop</p> <p style="cursor:not-allowed">Przykład not-allowed</p> <p style="cursor:progress">Przykład progress</p> <p style="cursor:vertical-text">Przykład vertical-text</p> |
Przykład crosshair Przykład hand Przykład move Przykład e-resize Przykład ne-resize Przykład nw-resize Przykład n-resize Przykład se-resize Przykład sw-resize Przykład s-resize Przykład w-resize Przykład text Przykład wait Przykład help Przykład default Przykład auto Przykład pointer Przykład all-scroll Przykład col-resize Przykład row-resize Przykład no-drop Przykład not-allowed Przykład progress Przykład vertical-text |
||||||||||||