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 kuva.
Tällainen on middle kuva
Tällainen on top kuva.
Tällainen on bottom 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
- none
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset
Elementtien sijoittelua
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>