<![CDATA[
<body>
<h1 style="text-align:right; color: #40E0D0; font-size: 22pt">Kotisivujen uudet tyylit</h1>
<p style="font-size: 13pt; font-style: italic; text-align: right; position:relative; bottom: 25px; right: 10px; color: #2B9489; font-weight:bold;">Näytteitä CSS:n toiminnasta</p>
<p>Tällä sivulla esitellään eri CSS-ominaisuuksien mahdollisia arvoja. Joskus elementeille on tehty
joitakin muutoksia (esimerkiksi lisätty reunaviiva) havainnollisuuden vuoksi, vaikka se ei näy
esimerkkikoodissa.<br><br>
CSS:llä kannattaa leikkiä – kokeilla eri asioita ja arvoja (ja muistaa tehdä tärkeistä tyylitiedostoista
varmuuskopio, kun jokin asia tuntuu olevan kunnossa).</p>
<p>Mikäli jokin ei näytä toimivan sivulla, voi olla, ettei selaimesi tue kyseistä
CSS-ominaisuutta. Sivu on katsottu läpi IE 6.0:ssa, Mozilla
1.7.1:ssä, Firefox 1.0:ssa ja Opera 6.0:ssa enkä ole huomannut puutteita (selainten eroja
lukuunottamatta).</p>
<a name="fontit"></a>
<h2>Fontin ominaisuuksia</h2>
<p style="width: 450px;">Joissakin selaimissa voi muuttaa asetusta, jolla fonttiperhettä edustava fontti
valitaan.</p>
<dl>
<dt>font-family: sans-serif;</dt>
<dd><span style="font-family:sans-serif;">Sans-serif-fonttiperhe</span></dd>
<dt>font-family: serif;</dt>
<dd><span style="font-family:serif;">Serif-fonttiperhe</span></dd>
<dt>font-family: monospace;</dt>
<dd><span style="font-family:monospace;">Tasalevyinen fontti</span></dd>
<dt>font-family: cursive;</dt>
<dd><span style="font-family:cursive;">"Käsinkirjoitettu" fontti</span></dd>
<dt>font-family: fantasy;</dt>
<dd><span style="font-family:fantasy;">Erikoinen, "fantasiafontti"</span><br><br></dd>
<dt>font-weight: normal;</dt>
<dd><span style="font-weight: normal;">Normaali</span></dd>
<dt>font-weight: bold;</dt>
<dd><span style="font-weight: bold;">Lihavoitu teksti</span><br><br></dd>
<dt>font-style: normal;</dt>
<dd><span style="font-style: normal;">Normaali</span></dd>
<dt>font-style: italic;</dt>
<dd><span style="font-style:italic;">Italic</span></dd>
<dt>font-style: oblique;</dt>
<dd><span style="font-style:oblique;">Oblique</span><br><br></dd>
<dt>font-variant: normal;</dt>
<dd><span style="font-variant: normal">Normaali</span></dd>
<dt>font-variant: small-caps;</dt>
<dd><span style="font-variant: small-caps">Small-caps</span><br><br></dd>
<dt>line-height: 1.3;</dt>
<dd><span style="line-height: 1.3;">Harvaa<br>tekstiä</span></dd>
<dt>line-height: 0.6;</dt>
<dd><span style="line-height: 0.6;">Tiuhaa<br>tekstiä</span></dd>
</dl>
<h3>Kaikki yhdessä fonttimäärityksessä</h3>
(kaikkea mahdollista ei silti tarvitse määrittää)
<dl>
<dt>font: italic small-caps bold 100%/100% serif;</dt>
<dd><span style="font: italic small-caps bold 100%/100% serif;">Kursiivi, small-caps, lihavoitu, normaalikokoinen fontti, normaali rivinleveys, serif-fonttiperhe</span></dd>
</dl>
<a name="teksti"></a>
<h2>Tekstin ominaisuuksia</h2>
<dl>
<dt>word-spacing: 5px;</dt>
<dd><span style="word-spacing: 15px;">väliä sanoihin</span></dd>
<dt>letter-spacing: 3px;</dt>
<dd><span style="letter-spacing: 3px;">harvennettua tekstiä</span><br><br></dd>
<dt>text-decoration: none;</dt>
<dd><a href="http://www.enterlehti.fi" style="text-decoration:none;">linkki ilman alleviivausta</a></dd>
<dt>text-decoration: underline;</dt>
<dd><span style="text-decoration: underline;">alleviivaus</span></dd>
<dt>text-decoration: overline;</dt>
<dd><span style="text-decoration: overline;">yliviivaus</span></dd>
<dt>text-decoration: line-through;</dt>
<dd><span style="text-decoration: line-through;">läpiviivaus</span></dd>
<dt>text-decoartion: blink;</dt>
<dd><span style="text-decoration: blink;">välkkyy (ei IE:ssä)</span></dd>
<dt>text-decoration: underline overline;</dt>
<dd><span style="text-decoration: underline overline blink;">näitä voi myös yhdistellä</span><br><br></dd>
<dt>text-transform: capitalize</dt>
<dd><span style="text-transform:capitalize;">isot alkukirjaimet</span></dd>
<dt>text-transform: uppercase;</dt>
<dd><span style="text-transform:uppercase;">kaikki isolla</span></dd>
<dt>text-transform: lowercase;</dt>
<dd><span style="text-transform:lowercase;">KAIKKI PIENELLÄ</span></dd>
<dt>text-transform: none;</dt>
<dd><span style="text-transform: none;">normaali</span><br><br></dd>
<dt>text-indent: 3em;</dt>
<dd style="text-indent: 1em;">sisentää ensimmäisen<br>rivin</dd>
</dl>
<a name="varit"></a>
<h2>Väriä sivulle</h2>
<dl>
<dt>color: #2B9489;</dt>
<dd><span style="color:#2B9489">fontin väri vihreäksi</span></dd>
<dt>background-color: #40E0D0;</dt>
<dd><span style="background-color: #40E0D0">turkoosi tausta</span></dd>
</dl>
<a name="taustakuva"></a>
<h2>Taustakuva</h2>
<dl>
<dt>background-image: url(merkki.gif);<br>
background-repeat: repeat-x;</dt>
<dd><p style="width: 200px; height: 50px; background-image: url(merkki.gif); background-repeat: repeat-x; border: 1px solid black;"> </p></dd>
<dt>background-image: url(merkki.gif);<br>
background-repeat: repeat-y;</dt>
<dd><p style="width: 200px; height: 50px; background-image: url(merkki.gif); background-repeat: repeat-y; border: 1px solid black;"> </p></dd>
<dt>background-image: url(merkki.gif);<br>
background-repeat: repeat;</dt>
<dd><p style="width: 200px; height: 50px; background-image: url(merkki.gif); background-repeat: repeat; border: 1px solid black;"> </p></dd>
<dt>background-image: url(merkki.gif);<br>
background-repeat: no-repeat;</dt>
<dd><p style="width: 200px; height: 50px; background-image: url(merkki.gif); background-repeat: no-repeat; border: 1px solid black;"> </p></dd>
<dt>background-image: url(merkki.gif);<br>
background-repeat: no-repeat;<br>
background-position: right bottom;</dt>
<dd><p style="width: 200px; height: 50px; background-image: url(merkki.gif); background-repeat: no-repeat; background-position: bottom right; border: 1px solid black;"> </p></dd>
<dt>background-image: url(merkki.gif);<br>
background-repeat: no-repeat;<br>
background-position: 75% 50%;</dt>
<dd><p style="width: 200px; height: 50px; background-image: url(merkki.gif); background-repeat: no-repeat; background-position: 75% 50%; border: 1px solid black;"> </p></dd>
</dl>
<h3>Kaikki yhdessä</h3>
(kaikkea mahdollista ei silti tarvitse määrittää)
<dl>
<dt>background: #40E0D0 url(merkki.gif) no-repeat 25% 50%;</dt>
<dd><p style="width: 200px; height: 50px; background: #40E0D0 url(merkki.gif) no-repeat 25% 50%; border: 1px solid black;"> </p></dd>
</dl>
<a name="laatikko"></a>
<h2>Laatikkomallin ominaisuuksia</h2>
<a name="laatikko-reuna"></a>
<h3>Reunaviivat</h3>
<dl>
<dt>border: 3px solid #40E0D0;</dt>
<dd><span style="border: 3px solid #40E0D0; display: block; margin-bottom: 10px;">yhtenäinen viiva</span></dd>
<dt>border: 3px double #40E0D0;</dt>
<dd><span style="border: 3px double #40E0D0; display: block; margin-bottom: 10px;">kaksoisviiva</span></dd>
<dt>border: 3px dotted #40E0D0;</dt>
<dd><span style="border: 3px dotted #40E0D0; display: block; margin-bottom: 10px;">pisteviiva</span></dd>
<dt>border: 3px dashed #40E0D0;</dt>
<dd><span style="border: 3px dashed #40E0D0; display: block; margin-bottom: 10px;">katkoviiva</span></dd>
<dt>border: 3px groove #40E0D0;</dt>
<dd><span style="border: 3px groove #40E0D0; display: block; margin-bottom: 10px;">kaiverrettu viiva</span></dd>
<dt>border: 3px ridge #40E0D0;</dt>
<dd><span style="border: 3px ridge #40E0D0; display: block; margin-bottom: 10px;">kohokuvioinen viiva</span></dd>
<dt>border: 3px inset #40E0D0;</dt>
<dd><span style="border: 3px inset #40E0D0; display: block; margin-bottom: 10px;">"alaspainettu nappi"</span></dd>
<dt>border: 3px outset #40E0D0;</dt>
<dd><span style="border: 3px outset #40E0D0; display: block; margin-bottom: 10px;">"nappi"</span></dd>
<dt>border-top: 3px dotted red;<br>
border-right: 3px dashed green;<br>
border-bottom: 3px double blue;<br>
border-left: 3px groove purple;</dt>
<dd><span style="border-top: 3px dotted red; border-right: 3px dashed green; border-bottom: 3px double blue; border-left: 3px groove purple; display: block; margin-bottom: 10px;">vähän kaikkea</span></dd>
</dl>
<p>Voi myös määrittää viivan tyylin (border-style), värin (border-color) tai leveyden (border-width).</p>
<a name="laatikko-tayte"></a>
<h3>Täyte</h3>
<dl>
<dt>padding: 5px;</dt>
<dd><p style="padding: 5px; border: 1px solid black;">vähän tilaa reunaviivan ja sisällön välille</p></dd>
<dt>padding: 20px;</dt>
<dd><p style="padding: 20px; border: 1px solid black;">enemmän tilaa reunaviivan ja sisällön välille</p></dd>
</dl>
<p style="width: 450px;">Jokaiselle reunalle voi määrittää oman täytteen (<code>padding-top</code>,
<code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>) tai kaikki yhdessä
(<code>padding: top right bottom left</code>, jossa top/right/bottom/left saa siis jonkin mitan).</p>
<a name="laatikko-marginaali"></a>
<h3>Marginaali</h3>
<dl>
<dt>margin-left: 10px;</dt>
<dd><p style="margin-left: 10px; border: 1px solid black;">vasenta reunaa kauemmaksi muista elementeistä<br>
ilman margin-määrettä reunaviiva olisi samassa kohtaa kuin yllä</p></dd>
<dt>margin-left: 20px;</dt>
<dd><p style="margin-left: 20px; border: 1px solid black;">vasenta reunaa vieläkin kauemmaksi muista elementeistä</p></dd>
</dl>
<p style="width: 450px;">Jokaiselle reunalle voi määrittää oman marginaalin (<code>margin-top</code>,
<code>margin-right</code>, <code>margin-bottom</code>, <code>margin right</code>) tai kaikki yhdessä
(<code>margin: top right bottom left</code>, jossa top/right/bottom/left saa siis jonkin mitan). </p>
<a name="listat"></a>
<h2>Listan ominaisuuksia</h2>
<dl>
<dt>list-style-type: disc;</dt>
<dd><ul><li style="list-style-type: disc;">kiekko</li></ul></dd>
<dt>list-style-type: circle;</dt>
<dd><ul><li style="list-style-type: circle;">ympyrä</li></ul></dd>
<dt>list-style-type: square;</dt>
<dd><ul><li style="list-style-type: square;">neliö</li></ul></dd>
<dt>list-style-type: decimal;</dt>
<dd><ul><li style="list-style-type: decimal;">järjestysluku</li></ul></dd>
<dt>list-style-type: lower-roman;</dt>
<dd><ul><li style="list-style-type: lower-roman;">pieni roomalainen numero</li></ul></dd>
<dt>list-style-type: upper-roman;</dt>
<dd><ul><li style="list-style-type: upper-roman;">iso roomalainen numero</li></ul></dd>
<dt>list-style-type: lower-alpha;</dt>
<dd><ul><li style="list-style-type: lower-alpha;">pieni kirjain</li></ul></dd>
<dt>list-style-type: upper-alpha;</dt>
<dd><ul><li style="list-style-type: upper-alpha;">iso kirjain</li></ul></dd>
<dt>list-style-type: none;</dt>
<dd><ul><li style="list-style-type: none;">ei mitään</li></ul></dd>
<dt>list-style-image: url(merkki.gif);</dt>
<dd><ul><li style="list-style-image:url(merkki.gif)">oma kuva</li></ul></dd>
</dl>
<a name="overflow"></a>
<h2>Mitä tehdään jos teksti menee yli sille varatun tilan?</h2>
<dl>
<dt>overflow: hidden;</dt>
<dd>- 'hidden' piilottaa ylimenevän tekstin
<div style="width: 250px; height: 50px; overflow: hidden; border: 1px solid black;">maalamalla<br>tekstin Mozillassa tai<br>Firefoxissa voi nähdä<br> kyllä loputkin</div>
</dd>
<dt>overflow: scroll;</dt>
<dd>- 'scroll' tekee vaaka- ja pystyvierityspalkit
<div style="width: 250px; height: 50px; overflow: scroll; border: 1px solid black;">vierityspalkit tulevat yleensä<br>sekä pysty- että vaakasuuntaan<br>vaikkei niitä tarvittaisikaan</div>
</dd>
<dt>overflow: visible;</dt>
<dd>- 'visible' laittaa tekstin näkyviin hinnalla millä hyvänsä
<div style="width: 250px; height: 50px; overflow: visible; border: 1px solid black;">Mozillassa ja Firefoxissa teksti menee<br>muun sisällön päälle<br>IE:ssä tätä aluetta<br>suurennetaan</div>
<br><br></dd>
<dt>overflow: auto;</dt>
<dd>- selain määrittelee mitä 'auto' asetuksella tehdään
<div style="width: 250px; height: 50px; overflow: auto; border: 1px solid black;">'auto' tekee<br>yleensä vierityspalkin<br>pystysuuntaan<br>kun tila ei riitä</div>
</dd>
</dl>
<a name="osoitin"></a>
<h2>Osoittimen ominaisuuksia</h2>
<p>Osoittimen asetuksilla ei välttämättä kannata alkaa leikkiä. Mutta yksi käyttötapa on esimerkiksi
määrittää lyhenteet (<abbr> (ei toimi IE:ssä) ja <acronym>) näyttämään help-osoittimen:
<acronym title="Cascading Style Sheets" style="cursor: help; border-bottom: 1px dotted black;">CSS</acronym><br>
(osoitin vaihtuu kun hiirellä osoittaa ominaisuuden selitystä)</p>
<dl>
<dt>cursor: crosshair;</dt>
<dd><span style="cursor: crosshair;">tähtäin</span></dd>
<dt>cursor: default;</dt>
<dd><span style="cursor: default;">oletusarvoinen</span></dd>
<dt>cursor: hand;</dt>
<dd><span style="cursor: hand;">käsi (vain IE:ssä)</span></dd>
<dt>cursor: pointer;</dt>
<dd><span style="cursor: pointer;">käsi (Mozillassa, Firefoxissa)</span></dd>
<dt>cursor: move;</dt>
<dd><span style="cursor: move;">siirto</span></dd>
<dt>cursor: e-resize;</dt>
<dd><span style="cursor: e-resize;">oikean reunan siirto</span></dd>
<dt>cursor: ne-resize;</dt>
<dd><span style="cursor: ne-resize;">oikean yläkulman siirto</span></dd>
<dt>cursor: nw-resize;</dt>
<dd><span style="cursor: nw-resize;">vasemman yläkulman siirto</span></dd>
<dt>cursor: n-resize;</dt>
<dd><span style="cursor: n-resize;">yläkulman siirto</span></dd>
<dt>cursor: se-resize;</dt>
<dd><span style="cursor: se-resize;">oikean alakulman siirto</span></dd>
<dt>cursor: sw-resize;</dt>
<dd><span style="cursor: sw-resize;">vasemman alakulman siirto</span></dd>
<dt>cursor: s-resize;</dt>
<dd><span style="cursor: s-resize;">alareunan siirto</span></dd>
<dt>cursor: w-resize;</dt>
<dd><span style="cursor: w-resize;">vasemman reunan siirto</span></dd>
<dt>cursor: text;</dt>
<dd><span style="cursor: text;">tekstikursori</span></dd>
<dt>cursor: wait;</dt>
<dd><span style="cursor: wait;">kiireinen (tiimalasi)</span></dd>
<dt>cursor: help;</dt>
<dd><span style="cursor: help;">apua</span></dd>
</dl>
<a name="pseudo"></a>
<h2>Näennäisluokat ja -elementit</h2>
<a name="linkit"></a>
<h3>Linkin ominaisuudet</h3>
<div id="linkkitesti">
<dl>
<dt>a:link { font-style:italic; }<br>
a:visited { color: green; }<br>
a:hover { text-decoration: none; }<br>
a:active { font-weight: bold; }<br>
a.ulos:hover { text-transform: uppercase; }</dt>
<dd><a href="http://www.enterlehti.fi" target="_blank">linkki</a><br>
<a href="#">käyty linkki</a> (jos linkki on samanlainen kuin yllä, klikkaa ylläolevaa, jolloin siitä pitäisi tulla vihreä)<br>
<a href="http://www.enterlehti.fi" class="ulos" target="_blank">linkki jolle määritetty luokka 'ulos'</a><br>
(uusi linkki kursivoitu, käyty linkki vihreä, hiiren mennessä linkin päälle alleviivaus katoaa,
napsautettaessa linkkiä se lihavoidaan)</dd>
</dl>
</div>
<a name="pseudoelementit"></a>
<h3>Näennäiselementit</h3>
<dl>
<dt>p:first-letter { font-weight: bold; }</dt>
<dd><p id="fletter">ensimmäinen kirjain punaisella</p></dd>
<dt>p:first-line { color: green; }</dt>
<dd><p id="fline">ensimmäinen rivi<br>vihreällä</p></dd>
</dl>
<a name="tasaus"></a>
<h2>Tekstin ja kuvien tasaus</h2>
<dl>
<dt>text-align: left;</dt>
<dd><p style="text-align:left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede.</p>
</dd>
<dt>text-align: right;</dt>
<dd><p style="text-align:right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede.</p>
</dd>
<dt>text-align: justify;</dt>
<dd><p style="text-align:justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede.</p></dd>
<dt>text-align: center;</dt>
<dd><p style="text-align:center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede.</p></dd>
<dt>float: left;<br>
float: right;</dt>
<dd><img src="enterlogo.jpg" height="75" width="100" style="float: left; border: 1px solid black">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede.
<img src="enterlogo.jpg" height="75" width="100" style="float: right; border: 1px solid black">
Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque
a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</dd>
</dl>
<a name="lomake"></a>
<h2>Lomakkeen tyylittelyä</h2>
<p style="width: 450px;">Opera (ainakaan 6.0) ei suostu muuttamaan lomakkeen osien taustavärejä tai kenttiin kirjoitettavan tekstin väriä. Jos siis
katsot tätä sivua Operassa, et näe alla olevan ison tekstikentän taustaväriä tai taustakuvallista ja -värillistä
tekstikenttää.</p>
<h3><textarea> hienommaksi</h3>
<dl>
<dt>background-color: #B9E5E3;<br>
border: 3px double #2B9489;<br>
scrollbar-base-color: #B9E5E3;</dt>
<dd>
<form><textarea wrap="soft" rows="6" style="background-color: #B9E5E3; border: 3px double #2B9489; scrollbar-base-color: #B9E5E3;">Internet Explorerissa vierityspalkki olisi perusväriltään vihreä
</textarea></form>
</dd>
</dl>
<a name="tekstikentta"></a>
<h3>Taustakuva tekstikentälle</h3>
<dl>
<dt>background-image: url(input-bg.gif);<br>
border: 0;<br>
height: 25px;<br>
width: 130px;<br>
padding: 3px 10px 3px 10px;<br>
font-size: 18px;<br>
<span style="font-family: Verdana, Arial, Helvetica, sans-serif;">johon kannattaa lisätä taustaväri:</span><br>
background-color: #B9E5E3;</dt>
<dd>
<form>
Tässä on tekstikenttä<br>
<input type="text" style="background-image: url(input-bg.gif); border: 0; height: 25px; width: 130px; padding: 3px 10px 3px 10px; font-size: 18px;"><br>
joka ilman taustakuvaa näyttäisi tältä:<br>
<input type="text" style="border: 0; height: 25px; width: 130px; padding: 3px 10px 3px 10px; font-size: 18px;"> <small>(kyllä se siinä on)</small><br>
mutta onneksi taustavärin voi määritellä kuvan lisäksi:
<input type="text" style="border: 0; height: 25px; width: 130px; padding: 3px 10px 3px 10px; font-size: 18px; background-color: #B9E5E3;">
</form>
</dd>
</dl>
</body>
]]>