Siirry sivun sisältöön Avut CSS HTML JS Wp

Luokitusominaisuudet

Nämä ominaisuudet erittelevät elementtejä luokkiin.

Display

Display-ominaisuudella vaikutetaan elementin näyttötapaan, eli tulostetaanko se (näytölle, paperille, jne.) ja miten.

Huomiot

• Avainsanojen merkitykset ovat:
  • block - luokittelee elementin esitettäväksi lohkotason elementtinä (katkaisee rivin ennen elementtiä ja elementin jälkeen)
  • inline - luokittelee elementin esitettäväksi tekstitason elementtinä (ei rivin katkaisua ennen elementtiä, eikä sen jälkeen)
  • list-item - luokittelee elementin esitettäväksi listakappaleena (sama kuin block, mutta luettelomerkillä varustettuna)
  • none - luokittelee elementin ei-esitettäväksi (elementtiä ei tulosteta)
• Käytännössä display-ominaisuuden alkuarvolla (block) ei ole merkitystä, koska kaikki selaimet antavat kaikille elementeille oletus-display-arvon, joka perustuu HTML:n elementtiluokitukseen.
• CSS1-standardi antaa asiakasohjelmille oikeuden ohittaa tämän ilmoituksen.

Esimerkit

<div><p style="display:inline">Display-ominaisuudella voidaan
ohittaa asiakasohjelman elementtiluokituksen oletusarvot.</p> 
<p style="display:inline">Varsinkin vanhemmilla
selaimilla tulos voi olla ailahteleva.</p></div>

<div><p style="display:list-item">Ensimmäinen kappale...</p>
<p style="display:list-item">2. kappale...</p></div>

<div>Tässä yritetään saada tekstitason kuvaa
<img src="../text/testi.jpg" alt="Testikuva"
 width="75" height="75" style="display:block" />
tulostumaan lohkotason elementin kaltaisesti.</div>

<p>Kun taas tässä kuva määritetään ei-tulostettavaksi.
<img src="../text/testi.jpg" alt="Testikuva"
 width="75" height="75" style="display:none" /></p>

Whitespace

Whitespace-ominaisuudella vaikutetaan tyhjän tilan esittämiseen elementin sisällä.

Huomiot

• Avainsanojen merkitykset ovat:
  • normal - kutistaa tyhjän tilan yhdeksi välilyönniksi (tyypillinen HTML:ssa)
  • pre - ei kutista tyhjää tilaa (kuten HTML:n PRE-elementti)
  • nowrap - ei salli tekstitason rivitystä (ilman pakotettua rivinvaihtoa [BR-elementtiä])
• Käytännössä white-space-ominaisuuden alkuarvolla (normal) ei ole merkitystä, koska selaimet esittävät elementit HTML:n esityssuosituksen mukaan.
• CSS1-standardi antaa asiakasohjelmille oikeuden ohittaa tämän ilmoituksen.
• Ominaisuus on myöhemmin korjattu koskemaan kaikkia elementtejä (CSS1- ja CSS2).

Esimerkit

<p style="white-space:nowrap">Tässä pyydetään ohittamaan
elementin oletuskäyttäyminen luokittelemalla elementti
sellaiseksi, ettei rivinvaihtoja sallita ilman erillistä käskyä.</p> 


<p style="white-space:pre">
Tässä
	pyydetään
		säilyttämään
			tekstimuotoilu.</p>

<pre style="white-space:normal">
Tässä
 pyydetään
  ristiriitaisia
   asioita.
</pre>

List Style Type

List Style Type -ominaisuudella vaikutetaan luettelomerkkien ulkomuotoon.

Huomiot

• Avainsanojen merkitykset ovat:
  • disc - kiekko
  • circle - ympyrä
  • square - neliö
  • decimal - juokseva kokonaisluku
  • lower-roman - juokseva roomalainen numero pienaakkosilla
  • upper-roman - juokseva roomalainen numero suuraakkosilla
  • lower-alpha - juokseva kirjain pienaakkosilla
  • upper-alpha - juokseva kirjain suuraakkosilla
  • none - ei luettelomerkkiä
• Ominaisuus on voimassa kun list-style-image -ominaisuuden arvo on none, tai kun sillä määritettyä kuvaa ei voida esittää.

Esimerkit

<p>Järjestämättömiin listoihin sopivat:</p>
<ul style="list-style-type:square">
<li style="list-style-type:disc">kiekko</li>
<li style="list-style-type:circle">ympyrä</li>
<li>neliö</li>
</ul>

<p>Järjestettyihin listoihin sopivat:</p>
<ol>
<li style="list-style-type:decimal">
 juokseva kokonaisluku</li>
<li style="list-style-type:lower-roman">
	juokseva roomalainen numero pienaakkosilla</li>
<li style="list-style-type:upper-roman">
	juokseva roomalainen numero suuraakkosilla</li>
<li style="list-style-type:lower-alpha">
	juokseva kirjain pienaakkosilla</li>
<li style="list-style-type:upper-alpha">
	juokseva kirjain suuraakkosilla</li>
</ol>

<ul
 style="list-style-type:none"
 lang="en" xml:lang="en">
<li>Look Ma!</li>
<li>No marker!</li>
</ul>

<div>
<p style="display:list-item;list-style-type:circle">
	Tekstikappale luettelomerkillä...</p>
<p>Tavallinen tekstikappale...</p>
</div>

List Style Image

List Style Image -ominaisuudella määritetään kuva luettelomerkiksi.

Huomiot

List Style Image -ominaisuudella korvataan oletus- tai list-style-type -ominaisuudella merkitty luettelomerkki, mikäli asiakasohjelma tukee kuvia ja kuvatuki on päällä.

Esimerkit

<ul style="list-style-image:url('smile.gif')">
<li>Vitsi #1</li>
<li>Vitsi #2</li>
<li style="list-style-image:none">Ei kuvaa tähän</li>
</ul>

<div style="display:list-item;
 list-style-image:url(star.gif)">
Tälle elementille on määritetty
<kbd>display</kbd>-arvoksi <kbd>list-item</kbd>.
</div>

<p style="display:list-item;
 list-style-image:url(http://www.example.com/example.png)">
Tälle elementille on määritetty <kbd>display</kbd>-arvoksi
<kbd>list-item</kbd>, mutta kuvan osoite on kuvitteellinen,
jolloin oletusluettelomerkki astuu voimaan, mikäli
asiakasohjelma tukee  <kbd>display</kbd>:n
<kbd>list-item</kbd> ominaisuutta.</p>

List Style Position

List Style Position -ominaisuudella määritetään luettelomerkin sijainti suhteessa elementin sisältöön.

Huomiot

CSS1-spesifikaatio on varsin epäselvä luettelomerkkien täsmällisestä sijainnista, mutta avainsanat voidaan mieltää seuraavasti:

• outside - luettelomerkki sijoittuu elementin ulkopuolelle
• inside - luettelomerkki sijoittuu elementin sisäpuolelle

Esimerkki

<ul style="list-style-position:outside">
<li>Ensimmäinen lista-alkio</li>
<li style="list-style-position:inside">Toinen lista-alkio</li>
<li>Kolmas lista-alkio</li>
<li style="list-style-position:inside">Neljäs lista-alkio</li>
</ul>

List Style

List Style on pikakirjoitusominaisuus, jolla voidaan yhdistää luettelo-ominaisuudet (list-style-type, -position ja -image) yhdeksi ilmoitukseksi.

Huomiot

• url-arvo voidaan yhdistää vapaasti muiden arvojen kanssa.
• none-arvo yksistään vaikuttaa molempiin, sekä list-style-type-, että list-style-image -arvoihin.

Esimerkit

<ul style="list-style:url('smile.gif') outside">
<li>Vitsi #1</li>
<li>Vitsi #2</li>
<li style="list-style:inside">Vitsi #3</li>
</ul>

<ol style="list-style:url(http://tietomies.com/yksi.png) lower-roman">
<li>Kuvan osoite on kuvitteellinen,</li>
<li>jolloin luettelomerkiksi pitäisi</li>
<li>tulostua juokseva roomalainen numero pienaakkosilla.</li></ol>

<ul style="list-style:url(http://tietomies.com/yksi.png) none">
<li>Kuvan osoite on kuvitteellinen,</li>
<li>jolloin luettelomerkkiä ei pitäisi tulostua ollenkaan.</li>
</ul>

<p style="display:list-item;list-style:url(star.gif) inside">
Epätoivottujen tulosten välttämiseksi sisäkkäisissä luetteloissa
on suositeltavampaa yhdistää tyylimääritykset lista-alkioihin
periytymisen kautta (UL, OL), kuin suoraan LI-elementteihin.</p>