SelektoryWłasności czcionekWłasności tekstuKolor i tłoMarginesy i odstępyObramowaniaWykazyTabeleRozmiaryPozycjonowanieObrysKursory

Kaskadowe arkusze stylów - tabela zbiorcza

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
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
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>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
<ul style="list-style-type: square">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
<ul style="list-style-type: decimal">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
<ul style="list-style-type: upper-alpha">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
<ul style="list-style-type: none">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
<ul style="list-style-type: decimal-leading-zero">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
<ul style="list-style-type: lower-greek">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
<ul style="list-style-type: hebrew">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
Graficzny wyróżnik <ul style="list-style-image: url(greendot.gif)">
<li>pierwszy punkt
<li>drugi punkt
<li>trzeci punkt
</ul>
  • pierwszy punkt
  • drugi punkt
  • trzeci punkt
       
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>
  • pierwszy punkt 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
  • trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
       
<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>
  • pierwszy punkt pierwszy punkt 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
  • trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt trzeci punkt
       
Odstęp wyróżnika (markera) <ul>
<li style="marker-offset: 5cm">punkt wykazu</li>
</ul>
  • punkt wykazu
       
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>
Tytuł tabeli
aa bb
ee ff
       
<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>
Tytuł tabeli
aa bb
ee ff
       
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>
aa bb
dd ee ff
       
<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>
 
aa bb
dd ee ff
       
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>
aa bb cc
dd ee ff
       
<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>
aa bb cc
dd ee ff
       
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>
aa bb cc
dd ee ff
       
<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>
aa bb cc
dd ee ff
       
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>
 
To jest komórka 1.1 To jest komórka 1.1 To jest komórka 1.1 To jest komórka 1.2 To jest komórka 1.2 To jest komórka 1.2
To jest komórka 2.1 To jest komórka 2.1 To jest komórka 2.1 To jest komórka 2.2 To jest komórka 2.2 To jest komórka 2.2
       
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 tekst        
<img src="sufi-small.jpg" width="171" height="177" style="vertical-align: top">tekst 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>

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...

       
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. 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. 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. 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. 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>

Ten akapit ma być niewidoczny.

       
<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