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>
Float elementit
Tämä tesksti on float elementissä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
<div style="border:solid thin blue; bacground-color:#F0F8FF">
<p style="background-color:yellow; width:100px; float:right; border: solid thin blue">
Tämä tesksti on float elementissä.
</p>
<p>Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
</p>
</div>
Tämä tesksti on float elementissä nro 1.
Tämä tesksti on float elementissä nro 2.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
<div style="border:solid thin blue; bacground-color:#F0F8FF">
<p style="background-color:yellow; width:100px; float:right; border: solid thin blue">
Tämä tesksti on float elementissä nro 1.
</p>
<p style="background-color:yellow; width:100px; float:right; border: solid thin blue">
Tämä tesksti on float elementissä nro 2.
</p>
<p>Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.
</p>
</div>
Kerrostuvat alueet
Ei kerrostusta
<div style="background-color:silver;width:600px; height:240px;
border:solid thin black;position:relative; top:0px;left:0px; ">
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute; left:20px; top:20px">Alue 1</div>
<div style="border:solid thin blue; width:200px; height:200px; background-color:#F0F8FF; position:absolute;left:240px; top:20px">Alue 2</div>
<div style="border:solid thin blue; width:200px; height:50px; background-color:#EEE8AA ; position:absolute; left:120px; top:60px">Alue 3</div>
</div>
Kerrokset: Alue 1:0, Alue 3: 1, Alue 2:2
<div style="bacKground-color:silver;width:600px; height:240px;
border:solid thin black;position:relative; top:0px;left:0px; ">
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute; left:20px; top:20px">Alue 1</div>
<div style="border:solid thin blue; width:200px; height:200px;
z-index:2; background-color:#F0F8FF; position:absolute;left:240px; top:20px">Alue 2</div>
<div style="border:solid thin blue; width:200px; height:50px;
z-index:1; background-color:#EEE8AA ; position:absolute; left:120px; top:60px">Alue 3</div>
</div>
Alue 3 päällä, läpinäkyvyys
<div style="bacKground-color:silver;width:600px; height:240px;
border:solid thin black;position:relative; top:0px;left:0px; ">
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute; left:20px; top:20px">Alue 1</div>
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute;left:240px; top:20px">Alue 2</div>
<div style="border:solid thin blue; width:200px; height:50px;
z-index:1; opacity:0.7; background-color:#EEE8AA ; position:absolute; left:120px; top:60px">Alue 3</div>
</div>