Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Drukowanie

Email Drukuj PDF

Tematy: Tworzenie oddzielnych stylów dla wydruku | Łamanie tekstu | Wdowy i sieroty | Rozplanowanie wydruku

Dla wielu użytkowników Internetu sporym zaskoczeniem jest to, co „wypluwa” drukarka w chwili, gdy drukujemy niemal dowolną witrynę. Starsze wersje przeglądarek nie pozwalały na kontrolę wydruku z poziomu programu, a i w przypadku nowych rozwiązań możemy tylko minimalnie wpływać na wygląd wydruku.

Na szczęście w drugiej specyfikacji kaskadowych arkuszy stylów położono spory nacisk na rozwinięcie tej sfery kontrolowania i formatowania strony WWW. Za pomocą kaskadowych arkuszy stylów możemy określać m.in. rozmiar strony, miejsca łamania tekstu, marginesy, a nawet zawartość wydruku. Dzięki temu przynajmniej w teorii wydruk powinien być poprawny.

Tworzenie oddzielnych stylów dla wydruku

@media

Dostępne wartości:

all | braille | embossed | handheld | print | projection | screen | speech | tty | tv

Wartość domyślna:

-

Przykład:

@media print { }

Dziedziczenie:

-

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Korzystając z polecenia @media, można utworzyć oddzielny arkusz stylów przeznaczony wyłącznie dla wydruku czy oglądania na ekranie telewizora. Co ciekawe, rozwiązanie to jest poprawnie obsługiwane przez nowe przeglądarki.

Style odpowiedzialne za wydruk można zapisać w oddzielnym pliku, a następnie podłączyć do formatowanego dokumentu w sposób przedstawiony na poniższym przykładzie.

<head>

  <link rel="Stylesheet" href="glowny.css" type="text/css">

  <link rel="Stylesheet" href="wydruk.css" type="text/css" print="print">

</head>

Można również odpowiednie style wpisać bezpośrednio do dokumentu.

<head>

 <style type="text/css">

 BODY

  {

  background-color:black;

}

 @media print

{

background-color:white;

}

 </style>

</head>

Łamanie tekstu

page-break-before | page-break-after | page-break-inside

Dostępne wartości:

auto | avoid | always | left | right | inherit

Wartość domyślna:

auto

Przykład:

H1 {page-break-after:always;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer (częściowo), Chrome, Safari

Możliwości kaskadowych arkuszy stylów w zakresie łamania strony są zupełnie wystarczające i działają w sposób zadowalający w nowych przeglądarkach. Dokładniej mówiąc, opcje page-break-befor oraz page-break-after w połączeniu z wartością always działają bez większych problemów we wszystkich nowych przeglądarkach. Obsługa pozostałych wartości jest możliwa w Operze oraz Mozilli Firefox.

  • auto — wartość domyślna, przeglądarka łamie strony wedle własnego uznania;

  • always — wymusza bezwzględne złamanie strony;

  • avoid — sugeruje przeglądarce, by nie unikała złamania w przypadku elementu, dla którego zdefiniowano tę wartość;

  • left — w przypadku druku dwustronnego łamie tekst z podziałem na strony parzyste;

  • right — w przypadku druku dwustronnego łamie tekst z podziałem na strony nieparzyste.

W przypadku poleceń page-break-before oraz page-break-after można używać wszystkich wartości. Natomiast page-break-inside współpracuje jedynie z wartościami avoid i auto.

Aby wymusić na przeglądarce przeniesienie jakiegoś elementu na nową stronę, należy skorzystać z następującej deklaracji w arkuszu stylów:

H1

{

page-break-before:always;

}

W sytuacji, gdy strona ma być złamana po jakimś elemencie, możemy mu przypisać następującą klasę:

H1

{

page-break-after:always;

}

Ostatnia możliwość polega na umożliwieniu podzielenia na dwie strony większego elementu, np. bloku tekstu.

P

{

page-break-inside:always;

}

Wdowy i sieroty

widows | orphans

Dostępne wartości:

wartość liczbowa | inherit

Wartość domyślna:

2

Przykład:

P {widows:4;}

Dziedziczenie:

Tak

Obsługa:

Opera

Wdowy — widows, i sieroty — orphans, to pojęcia doskonale znane osobom, które miały styczność z DTP. Styl widows odpowiada za określenie liczby wierszy, które muszą znaleźć się na początku strony. W przeciwnym wypadku nie jest realizowany podział. Natomiast orphans pozwala na zdefiniowanie liczby wierszy, które muszą pojawić się na końcu strony.

<p style=”orphans:3;”>Akapit znajdzie się na końcu strony, jeżeli zawiera przynajmniej 3 linie. W innym przypadku zostanie przeniesiony na nową stronę.</p>

Rozplanowanie wydruku

Przykładowa strona, na której opieram się, opisując style związane z wydrukiem witryny, składa się z następujących elementów:

  • boczne menu nawigacyjne,

  • pięć nagłówków H1,

  • kilkanaście bloków tekstu.

Odpowiedni listing znajduje się poniżej.

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

DIV#nawigacja

{

position:fixed;

left:0;

top:0;

width:180px;

height:100%;

padding-top:30px;

background-color:#C0FFC0;

}

DIV#tresc

{

position:absolute;

left:200px;

top:20px;   

}

H1

{

padding:0;

margin-bottom:-20px;

margin-top:2%;

}

</style>

</head>

<body>

<div id="nawigacja">

<ul>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

</ul>

</div>

<div id="tresc">

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis pede, dapibus nec, aliquam sit amet, ullamcorper aliquet, nisl. Donec pretium. Nulla facilisi. Suspendisse leo. Nullam eu tortor. Nam suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae nulla ut arcu tristique tincidunt. Vivamus vel diam. Donec eget quam sit amet tellus tempus aliquam. Donec laoreet.

</p>

<p>

Nulla auctor aliquam nisl. Donec luctus aliquet libero. In sit amet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed ultrices. Etiam augue magna, semper quis, venenatis ut, accumsan quis, urna. Sed lacus felis, elementum vel, sollicitudin adipiscing, dapibus nec, lacus. Curabitur posuere, quam eu mattis auctor, enim tellus vestibulum lectus, vel convallis justo erat non ipsum. Nam enim est, tristique eu, dapibus vel, gravida ut, elit. Ut eu est. Mauris condimentum nisl sed mauris. Nullam imperdiet neque eget pede. Sed vulputate, quam ut dapibus congue, sapien nisi sagittis nulla, et mollis nisi ligula et elit. Curabitur dictum, est vel aliquam pharetra, purus pede aliquam eros, eget cursus sapien tellus et augue. Aenean id ipsum nec dui accumsan bibendum. Duis euismod, sapien et mattis laoreet, dolor urna euismod augue, sed blandit nunc enim vitae tellus.

</p>

<p>

Sed pharetra, ligula sed nonummy luctus, lectus eros facilisis purus, in aliquet neque tortor eu dui. Nam pretium risus quis est. Phasellus ultrices dignissim risus. Sed vehicula. Nullam id nisl vitae arcu suscipit vestibulum. Suspendisse porttitor, felis sed porta dignissim, massa pede vehicula lorem, sit amet convallis elit nibh et orci. Cras in elit. Aenean felis pede, laoreet eu, malesuada sed, pulvinar sit amet, massa. Nullam sit amet dolor. Aliquam ac nisi ut urna pretium lacinia. Nunc tempor condimentum sem. Donec nunc metus, tincidunt a, egestas ac, varius sit amet, tortor.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Ut rhoncus tempus lectus. Nulla urna. Donec condimentum dictum dolor. Nam justo. Morbi lacinia accumsan urna. Vivamus bibendum diam vel lacus. Maecenas vehicula sem. Suspendisse dignissim blandit risus. Aliquam cursus, lorem id malesuada pretium, ligula nibh ullamcorper lorem, non aliquet felis augue sit amet arcu. Sed pretium. Quisque tempor orci nec libero. Etiam ultricies, nunc luctus convallis rutrum, felis magna convallis eros, semper facilisis arcu urna ut libero. Aliquam vitae libero nec metus lacinia interdum.

</p>

<p>

Nullam elementum turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida aliquam lectus. Nulla sed pede id elit convallis posuere. Nunc erat eros, adipiscing vitae, iaculis sed, dignissim fringilla, nisl. Quisque consectetuer, felis in feugiat pharetra, purus augue ultricies neque, non rhoncus est tellus eu leo. Nam augue nisi, tincidunt suscipit, pharetra a, vulputate a, enim. Quisque mattis vulputate augue. In augue justo, sodales et, eleifend sit amet, elementum suscipit, leo. Integer felis dui, suscipit vel, auctor ac, pharetra a, nunc. Mauris non lectus et pede hendrerit venenatis. Nulla hendrerit. Sed eu felis non eros luctus porttitor.

</p>

<p>

Fusce euismod pulvinar ipsum. Praesent sapien lacus, sollicitudin ac, convallis ut, auctor vel, arcu. Proin sodales. Ut lectus arcu, fermentum ut, condimentum vitae, condimentum sed, mauris. Morbi pulvinar orci ut augue. Quisque ut eros. Maecenas accumsan dapibus diam. Vestibulum lacinia. Proin vehicula sodales turpis. Pellentesque viverra. Sed feugiat, nisi a mollis ultrices, mauris mauris tincidunt mi, vel rutrum quam lacus at pede. Pellentesque cursus pharetra diam. Vivamus ut augue. Integer gravida posuere ante. Quisque id tortor a turpis dapibus luctus. Donec elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut pede. Maecenas neque augue, consequat a, bibendum quis, lacinia quis, massa. Nullam mattis mauris.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Phasellus euismod laoreet velit. Curabitur facilisis dapibus nisi. Suspendisse potenti. Aenean sit amet mi tristique velit elementum sagittis. Mauris non turpis. Donec cursus, tortor sed pellentesque ornare, lorem sem feugiat sapien, sed ultrices tellus pede vel nisl. Maecenas non tortor et sapien adipiscing consectetuer. Etiam pulvinar dignissim nibh. Cras tempor, lorem eget luctus dictum, nulla velit lacinia quam, a aliquam elit tortor quis risus. Quisque tempus nibh quis risus. Integer ipsum. Duis nec ipsum id dui volutpat aliquet. Nulla quis sapien vitae massa facilisis tempus. Morbi lacus libero, blandit a, ullamcorper ut, pellentesque eu, justo. Phasellus mauris tellus, condimentum et, aliquet vel, varius id, lectus. Fusce aliquam, eros in lacinia ultricies, risus pede fringilla nibh, et semper ipsum ligula quis sapien. Mauris in ligula. Nunc elementum porta lectus.

</p>

<p>

Vestibulum auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut orci. Ut est enim, placerat vitae, vulputate eu, fringilla pretium, velit. Aliquam erat volutpat. Vivamus elementum lacus vitae lorem. Sed metus eros, venenatis id, tincidunt ac, tempus vitae, metus. Vestibulum viverra, lectus nonummy fermentum scelerisque, lectus enim consectetuer metus, non tempor sapien diam in augue. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eget neque vel sem lacinia lacinia. Maecenas ac est quis pede lobortis aliquet. Mauris iaculis ultricies arcu.

</p>

<p>

Ut nec est. In vehicula eleifend enim. Donec sed neque. Vestibulum quis purus ut neque molestie ullamcorper. Donec ligula massa, tincidunt faucibus, pharetra a, auctor et, libero. Nulla neque orci, mattis id, scelerisque sed, auctor non, tortor. Suspendisse id quam non ligula elementum luctus. Cras ut purus id lacus mattis mattis. Donec faucibus orci. Sed scelerisque nisl sit amet pede. Phasellus dui mauris, tempor in, sagittis et, fringilla a, libero. Aliquam leo.

</p>

<p>

Sed dapibus enim nec urna. Nulla auctor. Fusce laoreet tellus ac ligula. Nunc aliquet. Integer a pede. Nam magna. Integer blandit auctor justo. Cras sodales, ligula eu vehicula dapibus, arcu mi tempor quam, lacinia vulputate ante orci sit amet lectus. Integer eget augue interdum nisl porttitor adipiscing. Phasellus quam.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis pede, dapibus nec, aliquam sit amet, ullamcorper aliquet, nisl. Donec pretium. Nulla facilisi. Suspendisse leo. Nullam eu tortor. Nam suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae nulla ut arcu tristique tincidunt. Vivamus vel diam. Donec eget quam sit amet tellus tempus aliquam. Donec laoreet.

</p>

<p>

Nulla auctor aliquam nisl. Donec luctus aliquet libero. In sit amet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed ultrices. Etiam augue magna, semper quis, venenatis ut, accumsan quis, urna. Sed lacus felis, elementum vel, sollicitudin adipiscing, dapibus nec, lacus. Curabitur posuere, quam eu mattis auctor, enim tellus vestibulum lectus, vel convallis justo erat non ipsum. Nam enim est, tristique eu, dapibus vel, gravida ut, elit. Ut eu est. Mauris condimentum nisl sed mauris. Nullam imperdiet neque eget pede. Sed vulputate, quam ut dapibus congue, sapien nisi sagittis nulla, et mollis nisi ligula et elit. Curabitur dictum, est vel aliquam pharetra, purus pede aliquam eros, eget cursus sapien tellus et augue. Aenean id ipsum nec dui accumsan bibendum. Duis euismod, sapien et mattis laoreet, dolor urna euismod augue, sed blandit nunc enim vitae tellus.

</p>

<p>

Sed pharetra, ligula sed nonummy luctus, lectus eros facilisis purus, in aliquet neque tortor eu dui. Nam pretium risus quis est. Phasellus ultrices dignissim risus. Sed vehicula. Nullam id nisl vitae arcu suscipit vestibulum. Suspendisse porttitor, felis sed porta dignissim, massa pede vehicula lorem, sit amet convallis elit nibh et orci. Cras in elit. Aenean felis pede, laoreet eu, malesuada sed, pulvinar sit amet, massa. Nullam sit amet dolor. Aliquam ac nisi ut urna pretium lacinia. Nunc tempor condimentum sem. Donec nunc metus, tincidunt a, egestas ac, varius sit amet, tortor.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Ut rhoncus tempus lectus. Nulla urna. Donec condimentum dictum dolor. Nam justo. Morbi lacinia accumsan urna. Vivamus bibendum diam vel lacus. Maecenas vehicula sem. Suspendisse dignissim blandit risus. Aliquam cursus, lorem id malesuada pretium, ligula nibh ullamcorper lorem, non aliquet felis augue sit amet arcu. Sed pretium. Quisque tempor orci nec libero. Etiam ultricies, nunc luctus convallis rutrum, felis magna convallis eros, semper facilisis arcu urna ut libero. Aliquam vitae libero nec metus lacinia interdum.

</p>

<p>

Nullam elementum turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida aliquam lectus. Nulla sed pede id elit convallis posuere. Nunc erat eros, adipiscing vitae, iaculis sed, dignissim fringilla, nisl. Quisque consectetuer, felis in feugiat pharetra, purus augue ultricies neque, non rhoncus est tellus eu leo. Nam augue nisi, tincidunt suscipit, pharetra a, vulputate a, enim. Quisque mattis vulputate augue. In augue justo, sodales et, eleifend sit amet, elementum suscipit, leo. Integer felis dui, suscipit vel, auctor ac, pharetra a, nunc. Mauris non lectus et pede hendrerit venenatis. Nulla hendrerit. Sed eu felis non eros luctus porttitor.

</p>

<p>

Fusce euismod pulvinar ipsum. Praesent sapien lacus, sollicitudin ac, convallis ut, auctor vel, arcu. Proin sodales. Ut lectus arcu, fermentum ut, condimentum vitae, condimentum sed, mauris. Morbi pulvinar orci ut augue. Quisque ut eros. Maecenas accumsan dapibus diam. Vestibulum lacinia. Proin vehicula sodales turpis. Pellentesque viverra. Sed feugiat, nisi a mollis ultrices, mauris mauris tincidunt mi, vel rutrum quam lacus at pede. Pellentesque cursus pharetra diam. Vivamus ut augue. Integer gravida posuere ante. Quisque id tortor a turpis dapibus luctus. Donec elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut pede. Maecenas neque augue, consequat a, bibendum quis, lacinia quis, massa. Nullam mattis mauris.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Phasellus euismod laoreet velit. Curabitur facilisis dapibus nisi. Suspendisse potenti. Aenean sit amet mi tristique velit elementum sagittis. Mauris non turpis. Donec cursus, tortor sed pellentesque ornare, lorem sem feugiat sapien, sed ultrices tellus pede vel nisl. Maecenas non tortor et sapien adipiscing consectetuer. Etiam pulvinar dignissim nibh. Cras tempor, lorem eget luctus dictum, nulla velit lacinia quam, a aliquam elit tortor quis risus. Quisque tempus nibh quis risus. Integer ipsum. Duis nec ipsum id dui volutpat aliquet. Nulla quis sapien vitae massa facilisis tempus. Morbi lacus libero, blandit a, ullamcorper ut, pellentesque eu, justo. Phasellus mauris tellus, condimentum et, aliquet vel, varius id, lectus. Fusce aliquam, eros in lacinia ultricies, risus pede fringilla nibh, et semper ipsum ligula quis sapien. Mauris in ligula. Nunc elementum porta lectus.

</p>

<p>

Vestibulum auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut orci. Ut est enim, placerat vitae, vulputate eu, fringilla pretium, velit. Aliquam erat volutpat. Vivamus elementum lacus vitae lorem. Sed metus eros, venenatis id, tincidunt ac, tempus vitae, metus. Vestibulum viverra, lectus nonummy fermentum scelerisque, lectus enim consectetuer metus, non tempor sapien diam in augue. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eget neque vel sem lacinia lacinia. Maecenas ac est quis pede lobortis aliquet. Mauris iaculis ultricies arcu.

</p>

<p>

Ut nec est. In vehicula eleifend enim. Donec sed neque. Vestibulum quis purus ut neque molestie ullamcorper. Donec ligula massa, tincidunt faucibus, pharetra a, auctor et, libero. Nulla neque orci, mattis id, scelerisque sed, auctor non, tortor. Suspendisse id quam non ligula elementum luctus. Cras ut purus id lacus mattis mattis. Donec faucibus orci. Sed scelerisque nisl sit amet pede. Phasellus dui mauris, tempor in, sagittis et, fringilla a, libero. Aliquam leo.

</p>

<p>

Sed dapibus enim nec urna. Nulla auctor. Fusce laoreet tellus ac ligula. Nunc aliquet. Integer a pede. Nam magna. Integer blandit auctor justo. Cras sodales, ligula eu vehicula dapibus, arcu mi tempor quam, lacinia vulputate ante orci sit amet lectus. Integer eget augue interdum nisl porttitor adipiscing. Phasellus quam.

</p>

</div>

</body>

</html>

Już pierwszy rzut oka na układ witryny uświadamia, że zawiera ona elementy niepotrzebne na wydruku. Mam tutaj na myśli boczne menu, które tylko zajmuje cenne miejsce. W związku z tym dalsze formatowanie będzie miało na celu m.in. usunięcie tego elementu oraz poprawę czytelności prezentowanego tekstu.

Rozmieszczając elementy strony na wydruku, korzystamy ze stylów odpowiedzialnych za pozycjonowanie oraz prezentację treści, które zostały opisane w poprzednich częściach niniejszego kursu. W związku z tym poniżej zamieszczam wycinek kodu arkusza stylów wraz z przykładem działania.

DIV#nawigacja

{

position:fixed;

left:0;

top:0;

width:180px;

height:100%;

padding-top:30px;

background-color:#C0FFC0;

}

DIV#tresc

{

position:absolute;

left:200px;

top:20px;   

}

H1

{

padding:0;

margin-bottom:-20px;

margin-top:2%;

}

@media print

{

 DIV#nawigacja

       {

       display:none;

       }

DIV#tresc

        {

        position:static;

        text-align:justify;

        }

BODY

        {

        margin:1.5cm;

        }

H1

        {

        page-break-before:always;

        padding-top:2em;

        }

}

<<przykład>>

<html>

<head>

<meta http-equiv="Content-type" content="text/html;charset=ISO-8859-2">

<title>Tytuł Strony WWW</title>

<style type="text/css">

DIV#nawigacja

{

position:fixed;

left:0;

top:0;

width:180px;

height:100%;

padding-top:30px;

background-color:#C0FFC0;

}

DIV#tresc

{

position:absolute;

left:200px;

top:20px;   

}

H1

{

padding:0;

margin-bottom:-20px;

margin-top:2%;

}

@media print

{

 DIV#nawigacja

       {

       display:none;

       }

DIV#tresc

        {

        position:static;

        text-align:justify;

        }

BODY

        {

        margin:1.5cm;

        }

H1

        {

        page-break-before:always;

        padding-top:2em;

        }

}

</style>

</head>

<body>

<div id="nawigacja">

<ul>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

<li>Menu nawigacyjne</li>

</ul>

</div>

<div id="tresc">

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis pede, dapibus nec, aliquam sit amet, ullamcorper aliquet, nisl. Donec pretium. Nulla facilisi. Suspendisse leo. Nullam eu tortor. Nam suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae nulla ut arcu tristique tincidunt. Vivamus vel diam. Donec eget quam sit amet tellus tempus aliquam. Donec laoreet.

</p>

<p>

Nulla auctor aliquam nisl. Donec luctus aliquet libero. In sit amet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed ultrices. Etiam augue magna, semper quis, venenatis ut, accumsan quis, urna. Sed lacus felis, elementum vel, sollicitudin adipiscing, dapibus nec, lacus. Curabitur posuere, quam eu mattis auctor, enim tellus vestibulum lectus, vel convallis justo erat non ipsum. Nam enim est, tristique eu, dapibus vel, gravida ut, elit. Ut eu est. Mauris condimentum nisl sed mauris. Nullam imperdiet neque eget pede. Sed vulputate, quam ut dapibus congue, sapien nisi sagittis nulla, et mollis nisi ligula et elit. Curabitur dictum, est vel aliquam pharetra, purus pede aliquam eros, eget cursus sapien tellus et augue. Aenean id ipsum nec dui accumsan bibendum. Duis euismod, sapien et mattis laoreet, dolor urna euismod augue, sed blandit nunc enim vitae tellus.

</p>

<p>

Sed pharetra, ligula sed nonummy luctus, lectus eros facilisis purus, in aliquet neque tortor eu dui. Nam pretium risus quis est. Phasellus ultrices dignissim risus. Sed vehicula. Nullam id nisl vitae arcu suscipit vestibulum. Suspendisse porttitor, felis sed porta dignissim, massa pede vehicula lorem, sit amet convallis elit nibh et orci. Cras in elit. Aenean felis pede, laoreet eu, malesuada sed, pulvinar sit amet, massa. Nullam sit amet dolor. Aliquam ac nisi ut urna pretium lacinia. Nunc tempor condimentum sem. Donec nunc metus, tincidunt a, egestas ac, varius sit amet, tortor.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Ut rhoncus tempus lectus. Nulla urna. Donec condimentum dictum dolor. Nam justo. Morbi lacinia accumsan urna. Vivamus bibendum diam vel lacus. Maecenas vehicula sem. Suspendisse dignissim blandit risus. Aliquam cursus, lorem id malesuada pretium, ligula nibh ullamcorper lorem, non aliquet felis augue sit amet arcu. Sed pretium. Quisque tempor orci nec libero. Etiam ultricies, nunc luctus convallis rutrum, felis magna convallis eros, semper facilisis arcu urna ut libero. Aliquam vitae libero nec metus lacinia interdum.

</p>

<p>

Nullam elementum turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida aliquam lectus. Nulla sed pede id elit convallis posuere. Nunc erat eros, adipiscing vitae, iaculis sed, dignissim fringilla, nisl. Quisque consectetuer, felis in feugiat pharetra, purus augue ultricies neque, non rhoncus est tellus eu leo. Nam augue nisi, tincidunt suscipit, pharetra a, vulputate a, enim. Quisque mattis vulputate augue. In augue justo, sodales et, eleifend sit amet, elementum suscipit, leo. Integer felis dui, suscipit vel, auctor ac, pharetra a, nunc. Mauris non lectus et pede hendrerit venenatis. Nulla hendrerit. Sed eu felis non eros luctus porttitor.

</p>

<p>

Fusce euismod pulvinar ipsum. Praesent sapien lacus, sollicitudin ac, convallis ut, auctor vel, arcu. Proin sodales. Ut lectus arcu, fermentum ut, condimentum vitae, condimentum sed, mauris. Morbi pulvinar orci ut augue. Quisque ut eros. Maecenas accumsan dapibus diam. Vestibulum lacinia. Proin vehicula sodales turpis. Pellentesque viverra. Sed feugiat, nisi a mollis ultrices, mauris mauris tincidunt mi, vel rutrum quam lacus at pede. Pellentesque cursus pharetra diam. Vivamus ut augue. Integer gravida posuere ante. Quisque id tortor a turpis dapibus luctus. Donec elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut pede. Maecenas neque augue, consequat a, bibendum quis, lacinia quis, massa. Nullam mattis mauris.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Phasellus euismod laoreet velit. Curabitur facilisis dapibus nisi. Suspendisse potenti. Aenean sit amet mi tristique velit elementum sagittis. Mauris non turpis. Donec cursus, tortor sed pellentesque ornare, lorem sem feugiat sapien, sed ultrices tellus pede vel nisl. Maecenas non tortor et sapien adipiscing consectetuer. Etiam pulvinar dignissim nibh. Cras tempor, lorem eget luctus dictum, nulla velit lacinia quam, a aliquam elit tortor quis risus. Quisque tempus nibh quis risus. Integer ipsum. Duis nec ipsum id dui volutpat aliquet. Nulla quis sapien vitae massa facilisis tempus. Morbi lacus libero, blandit a, ullamcorper ut, pellentesque eu, justo. Phasellus mauris tellus, condimentum et, aliquet vel, varius id, lectus. Fusce aliquam, eros in lacinia ultricies, risus pede fringilla nibh, et semper ipsum ligula quis sapien. Mauris in ligula. Nunc elementum porta lectus.

</p>

<p>

Vestibulum auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut orci. Ut est enim, placerat vitae, vulputate eu, fringilla pretium, velit. Aliquam erat volutpat. Vivamus elementum lacus vitae lorem. Sed metus eros, venenatis id, tincidunt ac, tempus vitae, metus. Vestibulum viverra, lectus nonummy fermentum scelerisque, lectus enim consectetuer metus, non tempor sapien diam in augue. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eget neque vel sem lacinia lacinia. Maecenas ac est quis pede lobortis aliquet. Mauris iaculis ultricies arcu.

</p>

<p>

Ut nec est. In vehicula eleifend enim. Donec sed neque. Vestibulum quis purus ut neque molestie ullamcorper. Donec ligula massa, tincidunt faucibus, pharetra a, auctor et, libero. Nulla neque orci, mattis id, scelerisque sed, auctor non, tortor. Suspendisse id quam non ligula elementum luctus. Cras ut purus id lacus mattis mattis. Donec faucibus orci. Sed scelerisque nisl sit amet pede. Phasellus dui mauris, tempor in, sagittis et, fringilla a, libero. Aliquam leo.

</p>

<p>

Sed dapibus enim nec urna. Nulla auctor. Fusce laoreet tellus ac ligula. Nunc aliquet. Integer a pede. Nam magna. Integer blandit auctor justo. Cras sodales, ligula eu vehicula dapibus, arcu mi tempor quam, lacinia vulputate ante orci sit amet lectus. Integer eget augue interdum nisl porttitor adipiscing. Phasellus quam.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse turpis pede, dapibus nec, aliquam sit amet, ullamcorper aliquet, nisl. Donec pretium. Nulla facilisi. Suspendisse leo. Nullam eu tortor. Nam suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vitae nulla ut arcu tristique tincidunt. Vivamus vel diam. Donec eget quam sit amet tellus tempus aliquam. Donec laoreet.

</p>

<p>

Nulla auctor aliquam nisl. Donec luctus aliquet libero. In sit amet urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed ultrices. Etiam augue magna, semper quis, venenatis ut, accumsan quis, urna. Sed lacus felis, elementum vel, sollicitudin adipiscing, dapibus nec, lacus. Curabitur posuere, quam eu mattis auctor, enim tellus vestibulum lectus, vel convallis justo erat non ipsum. Nam enim est, tristique eu, dapibus vel, gravida ut, elit. Ut eu est. Mauris condimentum nisl sed mauris. Nullam imperdiet neque eget pede. Sed vulputate, quam ut dapibus congue, sapien nisi sagittis nulla, et mollis nisi ligula et elit. Curabitur dictum, est vel aliquam pharetra, purus pede aliquam eros, eget cursus sapien tellus et augue. Aenean id ipsum nec dui accumsan bibendum. Duis euismod, sapien et mattis laoreet, dolor urna euismod augue, sed blandit nunc enim vitae tellus.

</p>

<p>

Sed pharetra, ligula sed nonummy luctus, lectus eros facilisis purus, in aliquet neque tortor eu dui. Nam pretium risus quis est. Phasellus ultrices dignissim risus. Sed vehicula. Nullam id nisl vitae arcu suscipit vestibulum. Suspendisse porttitor, felis sed porta dignissim, massa pede vehicula lorem, sit amet convallis elit nibh et orci. Cras in elit. Aenean felis pede, laoreet eu, malesuada sed, pulvinar sit amet, massa. Nullam sit amet dolor. Aliquam ac nisi ut urna pretium lacinia. Nunc tempor condimentum sem. Donec nunc metus, tincidunt a, egestas ac, varius sit amet, tortor.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Ut rhoncus tempus lectus. Nulla urna. Donec condimentum dictum dolor. Nam justo. Morbi lacinia accumsan urna. Vivamus bibendum diam vel lacus. Maecenas vehicula sem. Suspendisse dignissim blandit risus. Aliquam cursus, lorem id malesuada pretium, ligula nibh ullamcorper lorem, non aliquet felis augue sit amet arcu. Sed pretium. Quisque tempor orci nec libero. Etiam ultricies, nunc luctus convallis rutrum, felis magna convallis eros, semper facilisis arcu urna ut libero. Aliquam vitae libero nec metus lacinia interdum.

</p>

<p>

Nullam elementum turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec gravida aliquam lectus. Nulla sed pede id elit convallis posuere. Nunc erat eros, adipiscing vitae, iaculis sed, dignissim fringilla, nisl. Quisque consectetuer, felis in feugiat pharetra, purus augue ultricies neque, non rhoncus est tellus eu leo. Nam augue nisi, tincidunt suscipit, pharetra a, vulputate a, enim. Quisque mattis vulputate augue. In augue justo, sodales et, eleifend sit amet, elementum suscipit, leo. Integer felis dui, suscipit vel, auctor ac, pharetra a, nunc. Mauris non lectus et pede hendrerit venenatis. Nulla hendrerit. Sed eu felis non eros luctus porttitor.

</p>

<p>

Fusce euismod pulvinar ipsum. Praesent sapien lacus, sollicitudin ac, convallis ut, auctor vel, arcu. Proin sodales. Ut lectus arcu, fermentum ut, condimentum vitae, condimentum sed, mauris. Morbi pulvinar orci ut augue. Quisque ut eros. Maecenas accumsan dapibus diam. Vestibulum lacinia. Proin vehicula sodales turpis. Pellentesque viverra. Sed feugiat, nisi a mollis ultrices, mauris mauris tincidunt mi, vel rutrum quam lacus at pede. Pellentesque cursus pharetra diam. Vivamus ut augue. Integer gravida posuere ante. Quisque id tortor a turpis dapibus luctus. Donec elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut pede. Maecenas neque augue, consequat a, bibendum quis, lacinia quis, massa. Nullam mattis mauris.

</p>

<h1>Lorem ipsum dolor sit amet</h1>

<p>

Phasellus euismod laoreet velit. Curabitur facilisis dapibus nisi. Suspendisse potenti. Aenean sit amet mi tristique velit elementum sagittis. Mauris non turpis. Donec cursus, tortor sed pellentesque ornare, lorem sem feugiat sapien, sed ultrices tellus pede vel nisl. Maecenas non tortor et sapien adipiscing consectetuer. Etiam pulvinar dignissim nibh. Cras tempor, lorem eget luctus dictum, nulla velit lacinia quam, a aliquam elit tortor quis risus. Quisque tempus nibh quis risus. Integer ipsum. Duis nec ipsum id dui volutpat aliquet. Nulla quis sapien vitae massa facilisis tempus. Morbi lacus libero, blandit a, ullamcorper ut, pellentesque eu, justo. Phasellus mauris tellus, condimentum et, aliquet vel, varius id, lectus. Fusce aliquam, eros in lacinia ultricies, risus pede fringilla nibh, et semper ipsum ligula quis sapien. Mauris in ligula. Nunc elementum porta lectus.

</p>

<p>

Vestibulum auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ut orci. Ut est enim, placerat vitae, vulputate eu, fringilla pretium, velit. Aliquam erat volutpat. Vivamus elementum lacus vitae lorem. Sed metus eros, venenatis id, tincidunt ac, tempus vitae, metus. Vestibulum viverra, lectus nonummy fermentum scelerisque, lectus enim consectetuer metus, non tempor sapien diam in augue. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eget neque vel sem lacinia lacinia. Maecenas ac est quis pede lobortis aliquet. Mauris iaculis ultricies arcu.

</p>

<p>

Ut nec est. In vehicula eleifend enim. Donec sed neque. Vestibulum quis purus ut neque molestie ullamcorper. Donec ligula massa, tincidunt faucibus, pharetra a, auctor et, libero. Nulla neque orci, mattis id, scelerisque sed, auctor non, tortor. Suspendisse id quam non ligula elementum luctus. Cras ut purus id lacus mattis mattis. Donec faucibus orci. Sed scelerisque nisl sit amet pede. Phasellus dui mauris, tempor in, sagittis et, fringilla a, libero. Aliquam leo.

</p>

<p>

Sed dapibus enim nec urna. Nulla auctor. Fusce laoreet tellus ac ligula. Nunc aliquet. Integer a pede. Nam magna. Integer blandit auctor justo. Cras sodales, ligula eu vehicula dapibus, arcu mi tempor quam, lacinia vulputate ante orci sit amet lectus. Integer eget augue interdum nisl porttitor adipiscing. Phasellus quam.

</p>

</div>

</body>

</html>

<</przykład>>

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15226294