<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Poziome wyrwnanie tekstu</title>
  <style type="text/css">
    p.left { text-align: left; }
    p.right { text-align: right; }
    p.center { text-align: center; }
    p.full { text-align: justify; }
  </style>
</head>
<body>
<div style="margin: 50px">
<h3>Wyrwnanie do lewej (domylne)</h3>
<p class="left">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit obortis nisl ut aliquip ex ea commodo consequat.</p>

<h3>Wyrwnanie do prawej</h3>
<p class="right">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit obortis nisl ut aliquip ex ea commodo consequat.</p>

<h3>Wyrwnanie do rodka</h3>
<p class="center">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit obortis nisl ut aliquip ex ea commodo consequat.</p>

<h3>Wyjustowanie</h3>
<p class="full">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit obortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Wyrwnanie kolumn w tabeli</title>
  <style type="text/css">
    td.dec { text-align: ","; }
  </style>
</head>
<body>
  <table border="1">
  <tr>
    <th>Klient</th>
    <th>Nalena kwota</th>
  </tr>
  <tr>
    <td>Firma Acme</td>
    <td class="dec">50,95 z</td>
  </tr>
  <tr>
    <td>RHI LLC</td>
    <td class="dec">2084,56 z</td>
  </tr>
  <tr>
    <td>EmrUs</td>
    <td class="dec">0,55 z</td>
  </tr>
  </table>
</body>
</html>

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Pionowe wyrwnanie tekstu</title>
  <style type="text/css">
    .baseline { vertical-align: baseline; }
    .sub { vertical-align: sub; }
    .super { vertical-align: super; }
    .top { vertical-align: top; }
    .text-top { vertical-align: text-top; }
    .middle { vertical-align: middle; }
    .bottom { vertical-align: bottom; }
    .text-bottom { vertical-align: text-bottom; }
    .length { vertical-align: .5em; }
    .percentage { vertical-align: -50%; }
     /*Wszystkie elementy otrzymuj ramk */
     body *  { border: 1px solid black; }
     /* Zmniejsza czcionk elementu span o 50% */
     p * { font-size: 50%; }
  </style>
</head>
<body>
  <p>Baseline: Rodzic
    <span class="baseline">tekst wyrwnany</span> tekst</p>
  <p>Sub: Rodzic
    <span class="sub">tekst wyrwnany</span> tekst</p>
  <p>Super: Rodzic
    <span class="super">tekst wyrwnany</span> tekst</p>
  <p>Top: Rodzic
    <span class="top">tekst wyrwnany</span> tekst</p>
  <p>Text-top Rodzic
    <span class="text-top">tekst wyrwnany</span> tekst</p>
  <p>Middle: Rodzic
    <span class="middle">tekst wyrwnany</span> tekst</p>
  <p>Bottom: Rodzic
    <span class="bottom">tekst wyrwnany</span> tekst</p>
  <p>Text-bottom: Parent
    <span class="text-bottom">tekst wyrwnany</span> tekst</p>
  <p>Length: Rodzic
    <span class="length">tekst wyrwnany</span> tekst</p>
  <p>Percentage: Rodzic
    <span class="percentage">tekst wyrwnany</span> tekst</p>
</body>
</html>

=====================================

<p style="text-indent: 25px;"> Lorem ipsum dolor sit amet,
Consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit obortis nisl ut aliquip ex ea commodo 
consequat.</p>

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Obraz przestawny</title>
</head>
<body>
  <p><b>Obraz przestawny</b><br>
  <img src="sphere.png" style="float: right;">
  Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation 
  ullamcorper suscipit obortis nisl ut aliquip ex ea commodo 
  consequat.</p>

  <p><b>Obraz nieprzestawny</b><br> 
  <img src="sphere.png">
  Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation 
  ullamcorper suscipit obortis nisl ut aliquip ex ea commodo 
  consequat.</p>
</body>
</html>

=====================================

h1,h2,h3,h4,h5,h6 { clear: both; }

=====================================

<p style="white-space:   pre;">Sowa          w    tym  akapicie        zawieraj   dodatkowe        odstpy,  ale bd wywietlane       dokadnie        tak    samo            w         przegldarce  uytkownika.</p>

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Wstawianie odstpw midzy literami</title>
  <style type="text/css">
    .normal { letter-spacing: normal; }
    .tight  { letter-spacing: -.2em; }
    .loose  { letter-spacing:  .2em; }
  </style>
</head>
<body>
  <h3>Normalne</h3>
  <p class="normal">Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation 
  ullamcorper suscipit obortis nisl ut aliquip ex ea commodo 
  consequat.</p>
  <h3>Ciasne</h3>
  <p class="tight">Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation 
  ullamcorper suscipit obortis nisl ut aliquip ex ea commodo 
  consequat.</p>
  <h3>Lune</h3>
  <p class="loose">Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exerci tation 
  ullamcorper suscipit obortis nisl ut aliquip ex ea commodo 
  consequat.</p>
</body>
</html>

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Definiowanie wielkich liter</title>
  <style type="text/css">
    .normal { text-transform: none; }
    .initcaps  { text-transform: capitalize; }
    .upper  { text-transform: uppercase; }
    .lower  { text-transform: lowercase; }
  </style>
</head>
<body>
  <h3>Normalne</h3>
  <p class="normal">Lorem ipsum DOLOR sit amet, consectetuer
  adipiscing elit, SED diam nonummy nibh euismod tincidunt
  ut laoreet doLore magna ALIQUAM erat volutpat.</p>
  <h3>Kady wyraz du liter</h3>
  <p class="initcaps">Lorem ipsum DOLOR sit amet, 
  consectetuer adipiscing elit, SED diam nonummy nibh euismod 
  tincidunt ut laoreet doLore magna ALIQUAM erat 
  volutpat.</p>
  <h3>Wielkie litery</h3>
  <p class="upper">Lorem ipsum DOLOR sit amet, consectetuer
  adipiscing elit, SED diam nonummy nibh euismod tincidunt
  ut laoreet doLore magna ALIQUAM erat volutpat.</p>
  <h3>Mae litery</h3>
  <p class="lower">Lorem ipsum DOLOR sit amet, consectetuer
  adipiscing elit, SED diam nonummy nibh euismod tincidunt
  ut laoreet doLore magna ALIQUAM erat volutpat.</p>
</body>
</html>

=====================================

<p style="text-decoration: none;">Bez dekoracji</p>
<p style="text-decoration: underline;">Podkrelenie</p>
<p style="text-decoration: overline;">Kreska nad tekstem</p>
<p style="text-decoration: line-through;">Przekrelenie</p>
<p style="text-decoration: blink;">Migotanie</p>

=====================================

text-shadow: "[kolor] odlego-pozioma
odlego-pionowa [rozmycie]"

=====================================

h1 { text-shadow: #666666 2em -2em; }

=====================================

h1 { text-shadow: #666666 2em -2em, #AAAAAA 0em 2em; }

=====================================

<ol>Lista numerowana
  <li>Krok 1
  <li>Krok 2
  <li>Krok 3
</ol>
<ul>Lista nienumerowana
  <li>Element 1
  <li>Element 2
  <li>Element 3
</ul>

=====================================

list-style: <typ-listy> <pozycja-znaku-wypunktowania> <graficzny-znak-wypunktowania>

=====================================

.item { display: list-item; }

=====================================

<p class="item">Teraz to jest element listy</p>

=====================================

Kod HTML:
<ol style="list-style-type:lower-roman;">
  Rzymska lista numerowana
  <li>Krok 1
  <li>Krok 2
  <li>Krok 3
</ol>

=====================================

Wynik:
Rzymska lista numerowana
  i.   Krok 1
 ii.   Krok 2
iii.   Krok 3

=====================================

HTML Code:
<ol style="list-style-type:lower-roman;">
  Rzymska lista numerowana
  <li>Krok 1
  <li style="list-style-type:none;">Krok 2
  <li>Krok 3
</ol>

=====================================

Wynik:
Rzymska lista numerowana
  i.    Krok 1
        Krok 2
iii.    Krok 3

=====================================

<ol>
  <li style="list-style-image: url(kulka.jpg)">
  Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat.
  <li style="list-style-image: url(rozek.jpg)">
  Lorem ipsum dolor sit amet, consectetuer
  adipiscing elit, sed diam nonummy nibh euismod tincidunt
  ut laoreet dolore magna aliquam erat volutpat.
</ol>

=====================================

quotes: <otwiera_pierwszy_poziom> <zamyka_pierwszy_poziom> <otwiera_drugi_poziom> <zamyka_drugi_poziom> ... ;

=====================================

quotes: '"' '"' "'" "'";

=====================================

blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

=====================================

content: counter(nazwa_licznika);

=====================================

h1:before { content: "Rozdzia " counter(rozdzia) "  "; }

=====================================

counter-increment: rozdzia 2;

=====================================

counter-increment: rozdzia 2 podrozdzia 2;

=====================================

counter-increment: rozdzia -1;

=====================================

counter-reset: nazwa_licznika [warto];

=====================================

counter-reset: rozdzia 1;

=====================================

h1:before {content: "Rozdzia " counter(rozdzia) ": ";
           counter-increment: rozdzia;
           counter-reset: podrozdzia; }

=====================================

<h1>Rozdzia pierwszy</h1>
<h1>Rozdzia drugi</h1>
<h1>Rozdzia trzeci</h1>
 
=====================================

h2:before {content: "Rozdzia " counter(rozdzia) "." 
           counter(podrozdzia) ": ";
           counter-increment: podrozdzia; }

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Automatyczne numerowanie rozdziaw</title>
  <style type="text/css">
    h1:before {content: "Rozdzia " counter(rozdzia) ": ";
               counter-increment: rozdzia;
               counter-reset: podrozdzia; }
    h2:before {content: "Rozdzia " counter(rozdzia) "." 
               counter(podrozdzia) ": ";
               counter-increment: podrozdzia; }
  </style>
</head>
<body>
  <h1>Rozdzia pierwszy</h1>
    <h2>Nazwa podrozdziau</h2>
    <h2>Nazwa podrozdziau</h2>
  <h1>Rozdzia drugi</h1>
    <h2>Nazwa podrozdziau</h2>
  <h1>Rozdzia trzeci</h1>
</body>
</html>

=====================================

body:before {counter-reset: rozdzia 12 podrozdzia 10}

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Automatyczne numerowanie listy</title>
  <style type="text/css">
    li:before {content: counter(list) ": ";
               counter-increment: list; }
  </style>
</head>
<body>
  <ol style="counter-reset: list 19;
       list-style-type:none;">
    <li>Pierwszy element
    <li>Drugi element
    <li>Trzeci element
  </ol>
</body>
</html>

=====================================


