Esimerkkisivu 2 - CSS:

Sisältöä:

Kaksoisrivivälitys ilmaistaan määreellä line-height:2em. Toinen tapa osittaa se on line-height:200%. Kummankin pitäisi antaa sama tulos, mutta ainakin IE on joskus toiminut väärin tässä suhteessa.

Tekstialkioiden ja kuvien sijoittelu suhteessa toisiinsa

Tällainen on baseline box kuva.

Tällainen on middle box kuva

Tällainen on top box kuva.

Tällainen on bottom box kuva.

<p> Tällainen on baseline <img style="vertical-align:baseline" src="../myimg/toolpack.gif"> kuva. </p;gt;
<p>Tällainen on middle <img style="vertical-align:middle" src="../myimg/toolpack.gif"> kuva </p;gt;
<p> Tällainen on top <img style="vertical-align:top" src="../myimg/toolpack.gif"> kuva. </p;gt;
<p> Tällainen on bottom <img style="vertical-align:bottom" src="../myimg/toolpack.gif"> kuva.</p;>

Tekstin korostusmerkintöjä

overline
underline
line-through
blink(ei vilku IE:ssä)
none

Väritetään

Värikarttoja:

Reunuksen piirtotapoja

Elementtien sijoittelua

box box

Tämän tekstin pitäisi sijoittua kuvien väliin

<div style="position:relative; top:0px;left:0px; height:120px;">
<img style="position:absolute; left:30px; top:20px;" src="../myimg/toolpack.gif">
<img style="position:absolute; left:190px; top:70px;" src="../myimg/toolpack.gif">
<p style="position:absolute; left:100px; top:40px; width=100px;">
Tämän tekstin pitäisi sijoittua kuvien väliin</p> </div>