<html>
<head>
<title>A CSS example one</title>
<style type="text/css">
body { background: lightblue; color: green; }
p { border: 1px solid black; color: black; background: white;
margin: 10px 5px; padding: 3px 7px 5px; }
p.highlited { background: #c0c0c0; }
p:hover { border: 1px dashed green; background: #f0f0f0; }
p.highlited:hover { border: 2px dotted white; background: red; color: white;
font-weight: bold; }
span.attention { border: 1px solid black; background: yellow; color: black;
display: inline; font-weight: bold; font-size: large; padding: 0px 3px; }
h2 { color: black; }
div.second p { border-width: 2px; border-style: dashed; border-color: white;
background: lightgreen; color: black; }
a { text-decoration: none; border: 1px solid black; font-weight: bold;
padding: 2px; }
a:hover { text-decoration: underline; border: 2px dashed red; padding: 4px; }
</style>
</head>
<body>
<div align="right">Посмотри <a href="css1.src.html">исходник документа</a></div>
<h1>Top-level heading</h1>
Some text is here. It is not within a paragraph.
<p>
And this is the paragraph.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ut metus. Morbi vel ante nec elit volutpat elementum. Sed luctus blandit nibh. Vestibulum porta mauris non diam. Donec tempor. Aenean nibh augue, faucibus elementum, semper eu, rhoncus in, dolor. Vivamus et risus non tortor semper venenatis. Maecenas facilisis fringilla tellus. Aliquam erat volutpat. Nullam adipiscing odio eget arcu. Nulla facilisi. Nunc eu eros. Vestibulum ut ipsum bibendum felis ullamcorper hendrerit. Quisque ultricies ante a ipsum. Nulla nonummy ultricies leo. Phasellus nunc nibh, bibendum vitae, suscipit at, rutrum et, nulla.
</p>
<p class="highlited">
<span class="attention">Так как сделано в этом параграфе делать не
рекомендуется! Ну, и конечно, Internet Explorer как всегда неправ.</span>
Proin dictum viverra risus. Duis volutpat. Duis risus massa, interdum in, tincidunt a, ultrices eu, augue. Vestibulum sed neque eget lectus pretium aliquam. Curabitur tempor lorem vel orci. Sed mauris. Nulla nisi enim, elementum quis, elementum et, blandit non, massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed pretium hendrerit magna. In interdum porta nisi. Fusce egestas. Donec massa metus, adipiscing non, rhoncus vel, scelerisque fermentum, velit. Proin fringilla. Proin tincidunt fermentum tortor. Proin vestibulum ultrices urna. Mauris tortor justo, semper nonummy, rutrum non, convallis sed, nunc.
</p>
<p>
Quisque nonummy. Donec fermentum nonummy est. Quisque sodales urna sit amet velit. Maecenas eget mauris. Sed fringilla ante in tellus. Cras elit sapien, suscipit vitae, posuere id, tempus ac, ligula. Donec nonummy vehicula nisl. Vestibulum lobortis tortor porttitor eros. Curabitur vitae nulla vel urna aliquam lacinia. Vivamus felis. Pellentesque tristique, nisi non mollis porttitor, nulla enim cursus turpis, ac aliquam nisi nisi sed nulla. Praesent eu enim. Proin tellus urna, condimentum a, adipiscing non, sagittis a, lacus. Nam nisl ante, luctus non, euismod rhoncus, eleifend sed, leo. Vestibulum nisi lorem, dictum consectetuer, consectetuer non, consectetuer ut, massa. Duis laoreet suscipit orci.
</p>
<p>
Vestibulum enim. Fusce euismod, arcu sit amet sodales imperdiet, metus tellus pulvinar odio, at posuere leo felis at felis. Aenean ut nisl. Fusce sagittis dolor id tellus. Fusce magna purus, lacinia id, tempor a, egestas non, eros. Sed varius, arcu non pulvinar feugiat, metus augue elementum ante, at tincidunt massa lectus non purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi sodales. Quisque nonummy, tortor at feugiat tempor, neque dui interdum urna, vel tincidunt dolor lacus quis ipsum. Nulla dui. Suspendisse sed ipsum eu elit faucibus rutrum. In faucibus, urna at egestas rutrum, justo neque tincidunt tellus, ac pharetra libero leo quis arcu. Suspendisse in sapien et dolor adipiscing tincidunt. Donec consequat. Nam eu felis eu orci viverra interdum. Curabitur varius sollicitudin sem. In pede est, lacinia id, rhoncus eu, fermentum ac, odio.
</p>
<p>
Sed sed orci id nibh tempus commodo. Phasellus malesuada lobortis sem. Fusce pede lectus, ullamcorper a, dictum a, rhoncus eu, sapien. Phasellus id libero quis magna accumsan scelerisque. Mauris consectetuer suscipit nunc. Curabitur ac neque ut mauris bibendum varius. Vestibulum quis lorem. Nam luctus. Mauris facilisis. In molestie, arcu sit amet aliquet porttitor, nisl tellus rutrum nulla, eu facilisis neque elit in tortor. Donec mattis pede. Nulla facilisi. Cras vitae tellus.
</p>
<h2>Lorem ipsum continues</h2>
<div class="second">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris volutpat, ligula non facilisis tempus, nisl dolor lacinia nisl, id imperdiet eros risus at ipsum. Ut nonummy, eros vel bibendum tincidunt, nibh augue elementum eros, in laoreet pede purus rutrum nibh. Vivamus aliquet, augue ut luctus ullamcorper, mi lectus porttitor nibh, sit amet porttitor nisl elit et nunc. Aliquam in tortor. Etiam turpis nibh, feugiat at, cursus a, semper et, ipsum. Suspendisse vitae nisi sed tellus dapibus aliquam. Nulla a libero. Pellentesque porta felis sed tortor. Pellentesque ac pede. Quisque est lacus, blandit vitae, pellentesque in, iaculis eget, massa. Pellentesque dapibus, orci nec mollis posuere, mauris sapien imperdiet tortor, vitae euismod nunc erat a lectus. Maecenas blandit, purus eget hendrerit mollis, justo nunc tincidunt elit, sed posuere nunc magna ut odio. Proin egestas.
</p>
<p>
Suspendisse tempus. Mauris dapibus. Aliquam ipsum velit, rutrum et, aliquet a, mattis ut, enim. Pellentesque eros metus, condimentum ut, ultricies eget, adipiscing tristique, libero. Duis odio mauris, placerat et, varius ac, aliquam vitae, lacus. Donec euismod, sapien sed condimentum pretium, lorem magna nonummy erat, eu adipiscing nunc neque id orci. Suspendisse odio lectus, luctus tristique, auctor vitae, rhoncus accumsan, nisl. Sed non enim id ligula porttitor viverra. Nulla ullamcorper. Nam consequat, tellus nec dictum porttitor, libero mi sodales diam, id molestie magna est at arcu. Duis arcu orci, lacinia eget, dapibus sed, mattis vitae, quam. Nunc iaculis mattis ipsum. Donec et metus.
</p>
<p>
Donec a nulla. Integer suscipit. Nunc at nulla et nibh viverra consequat. Duis aliquet. Donec justo metus, rutrum eu, suscipit et, sodales elementum, nisl. Cras non odio. Duis blandit tempor orci. Sed ornare, nisi ut tincidunt iaculis, erat massa bibendum dolor, ac vulputate nunc elit sit amet augue. Donec felis. Donec dictum. Cras id magna. Nunc ut lorem vitae elit porta venenatis. Phasellus fringilla tempus nulla.
</p>
<p>
Cras turpis. Vivamus sed ipsum. Suspendisse tempus massa vel tortor. Integer sed sem et lectus cursus convallis. Maecenas sapien. Etiam quam. Duis quis quam. Aliquam metus urna, fermentum sit amet, eleifend at, tempor a, urna. Quisque dolor. Cras libero velit, sodales in, cursus at, fermentum nec, sem. Nullam nisi augue, pulvinar non, dapibus non, consequat sed, augue. Donec tellus sem, adipiscing sed, faucibus sit amet, dignissim quis, felis. Nam fermentum, libero ut sollicitudin tristique, lectus libero volutpat mi, vitae sodales tellus ligula a mauris. Nullam posuere mollis sapien. Fusce ullamcorper diam eget elit. Mauris a libero quis diam varius imperdiet. Maecenas lacus lorem, nonummy quis, lobortis et, dapibus a, magna. Curabitur rhoncus massa. Curabitur felis tortor, vestibulum ut, posuere id, molestie vel, leo. Quisque vitae nisi suscipit diam imperdiet aliquam.
</p>
<p>
Nulla facilisi. Fusce sapien. Aenean congue. Donec tincidunt egestas purus. Nullam neque erat, pulvinar quis, lacinia ut, ultrices sit amet, lectus. Ut orci magna, eleifend sed, ultrices vitae, euismod a, mi. Mauris ligula tellus, ultrices non, luctus in, auctor ac, lectus. Praesent vehicula dictum est. Mauris fringilla, erat quis interdum vehicula, justo augue blandit nisi, in euismod elit dolor at tellus. Nam semper accumsan dui. Phasellus mattis leo a erat volutpat posuere. Etiam hendrerit, massa ut laoreet pretium, nunc sem euismod quam, sed luctus arcu mauris vulputate ligula.
</p>
</div>
</body>
</html>