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

Tekstin ominaisuudet

CSS tarjoaa merkintäkieliä edistyneempää tekstin ulkomuodon hallintaa.

Word Spacing

Word Spacing -ominaisuudella vaikutetaan sanojen välien pituuteen.

Huomiot

• Normaalisti pituusmitta lisätään sanavälien oletuspituuteen, mutta myös negatiiviset arvot ovat sallittuja.
• CSS1-standardi antaa asiakasohjelmille oikeuden ohittaa tämä ilmoitus.

Esimerkit

<h2 style="word-spacing:0.5in">Selvät välit otsikkoon!</h2>

<p style="word-spacing:-2em">Tässä tiivistetään liikaa!</p>

<div style="word-spacing:2em">Ensin suurennetaan väliä,
sitten<span style="word-spacing:normal"> taas normaaliksi,</span>
sitten taas suurennettuna.</div>

Letter Spacing

Letter Spacing -ominaisuudella vaikutetaan kirjainten välien pituuteen.

Huomiot

• Normaalisti pituusmitta lisätään kirjainvälien oletuspituuteen, mutta myös negatiiviset arvot ovat sallittuja.
• CSS1-standardi antaa asiakasohjelmille oikeuden ohittaa tämä ilmoitus.

Esimerkit

<h2 style="letter-spacing:0.5cm">Hieman yliampuvaa?</h2>

<p style="letter-spacing:-0.2em">Tässä tiivistetään liikaa!</p>

<div style="letter-spacing:1em">Ensin suurennetaan väliä,
sitten<span style="letter-spacing:normal"> taas normaaliksi,</span>
sitten taas suurennettuna.</div>

Text Decoration

Text Decoration -ominaisuudella ilmoitetaan tekstin koristelusta.

Huomiot

• Nimensä mukaisesti ilmoituksen koristelu koskee vain tekstiä, ei esim. kuvia, tai tyhjiä elementtejä.
• Avainsanojen merkitykset ovat:
  • none - ei teksikoristelua
  • underline - alleviivaus
  • overline - ylleviivaus
  • line-through - yliviivaus
  • blink - vilkkuminen
• CSS1-standardi antaa asiakasohjelmille oikeuden ohittaa blink-avainsanan.

Esimerkit

<h2 style="text-decoration:overline">Katto pään päällä?</h2>

<p>Vältä turhaa alleviivausta, koska tyyli usein mielletään
<span style="text-decoration:underline"
 title="Tämä ei olekaan linkki...">linkiksi</span>.</p>

<blockquote>
<span style="text-decoration:blink">Vilkkuva teksti</span>
on <span style="text-decoration:line-through">makeaa</span>
kamalaa!</blockquote>

<div>Tästä <a
 href="javascript:alert('Tämä on vain esimerkki.')"
 style="text-decoration:none">linkistä</a>
on poistettu oletusalleviivaus.</div>

<p style="text-decoration:underline;color:green">Tekstikoristelu
<em style="color:red">tulisi ulottua myös
lapsielementteihin</em>, vaikkei se varsinaisesti peryidykään.
</p>

<div
 style="text-decoration:underline overline blink line-through">
Overkill!</div>

Vertical Align

Vertical Align -ominaisuudella ilmoitetaan elementin pystysuorasta kohdistumisesta suhteessa emoelementtiin, tai itse elementin rivikorkeuteen.

Huomiot

Seuraavat avainsanat ovat suhteessa emoelementtiin:

• baseline - asemoi elementin pohjaviivan emoelementin pohjaviivaan
• middle - asemoi elementin pystysuoran keskikohdan emolementin pohjaviivaan johon on lisätty puolet emoelementin x-korkeudesta (x-kirjaimen korkeus jaettu kahdella)
• sub - asemoi elementin alaindeksiksi
• super - asemoi elementin yläindeksiksi
• text-top - asemoi elementin ylälaidan emoelementin fontin ylälaitaan
• text-bottom - asemoi elementin alalaidan emoelementin fontin alalaitaan

Seuraavat avainsanat ovat suhteessa elementin rivikorkeuteen:

• top - asemoi elementin ylälaidan rivin korkeimman elementin kanssa
• bottom - asemoi elementin alalaidan rivin matalamman elementin kanssa

Esimerkit

<blockquote>
Hissillä pääsee, sekä <span style="vertical-align:super">ylös</span>,
että <span style="vertical-align:sub">alas</span>.</blockquote>

<h2>Vertical Align -ominaisuutta käytetään
<font size="1" style="vertical-align:text-bottom">yleisimmin</font>
<font size="1" style="vertical-align:text-top">kuvien</font>
yhteydessä.</h2>

<p><img src="testi.jpg" alt="Testikuva"
 width="75" height="75"
 style="vertical-align:middle" />
Tämä on <kbd>middle</kbd>.</p>

<p><img src="testi.jpg" alt="Testikuva"
 width="75" height="75"
 style="vertical-align:top" />
Tämä on <kbd>top</kbd>.</p>

<p><img src="testi.jpg" alt="Testikuva"
 width="75" height="75"
 style="vertical-align:bottom" />
Tämä on <kbd>bottom</kbd>.</p>

<p><img src="testi.jpg" alt="Testikuva"
 width="75" height="75"
 style="vertical-align:baseline" />
Tämä on <kbd>baseline</kbd>.</p>

<p><img src="testi.jpg" alt="Testikuva"
 width="75" height="75"
 style="vertical-align:-150%" />
Tämä on <kbd>-150%</kbd>.</p>

Text Transform

Text Transform -ominaisuudella pyydetään elementille tyylillistä tekstimuunnosta.

Huomiot

Avainsanojen merkitykset ovat:

• capitalize - esittää elementin jokaisen sanan alkukirjaimen isolla
• uppercase - esittää elementin jokaisen kirjaimen isolla
• lowercase - esittää elementin jokaisen kirjaimen pienellä
• none - ei tekstimuunnosta

CSS1-standardi antaa asiakasohjelmille oikeuden ohittaa Latin-1:n ulkopuoliset merkit.

Esimerkit

<h1 style="text-transform:capitalize">Englantilaistyylinen
otsikko</h1>

<h2 style="text-transform:uppercase">Amerikkalaistyylinen
otsikko</h2>

<h3 style="text-transform:lowercase">Nörttityylinen
otsikko</h3>

<p style="text-transform:uppercase">Ensin isolla, <span
 style="text-transform:none">sitten ilman muunnosta.</span></p>

Text Align

Text Align -ominaisuudella pyydetään elementin tekstille vaakasuoraa tasausta.

Huomiot

Avainsanojen merkitykset ovat:

• left - tasaa vasemmalle
• right - tasaa oikealle
• center - keskitä
• justify - tasaa molemmet reunat

CSS1-standardi antaa asiakasohjelmille oikeuden tulkita justify-avainsana käytetyn kielen oletustasauksen mukaan (esim. suomenkielinen teksti vasemmalle, hebreankielinen teksti oikealle).

Esimerkit

<h1 style="text-align:center">Keskitetty otsikko</h1>

<h2 style="text-align:right">Oikealle tasattu otsikko</h2>

<div style="text-align:justify">
<p>Tässä on paljon tekstiä, jonka tasaus periytyy DIV-emoelementistä.
Tässä on paljon tekstiä, jonka tasaus periytyy DIV-emoelementistä.
Tässä on paljon tekstiä, jonka tasaus periytyy DIV-emoelementistä.
Tässä on paljon tekstiä, jonka tasaus periytyy DIV-emoelementistä.
Tässä on paljon tekstiä, jonka tasaus periytyy DIV-emoelementistä.
Tässä on paljon tekstiä, jonka tasaus periytyy DIV-emoelementistä.</p>
<p style="text-align:left">
Tässä kappaleessa ohitetaan periytyvä tasaus.
Tässä kappaleessa ohitetaan periytyvä tasaus.
Tässä kappaleessa ohitetaan periytyvä tasaus.
Tässä kappaleessa ohitetaan periytyvä tasaus.</p></div>

Text Indent

Text Indent -ominaisuudella pyydetään sisennystä elementin ensimmäiselle riville.

Huomiot

Negatiiviset arvot ovat sallittuja.

Esimerkit

<p style="text-indent:2em">Tämän kappaleen ensimmäiselle
riville pyydetään reilu sisennys. Tämän kappaleen ensimmäiselle
riville pyydetään reilu sisennys. Tämän kappaleen ensimmäiselle
riville pyydetään reilu sisennys.</p>

<p style="text-indent:10%">Rivinvaihdot eivät aiheuta<br />
uutta sisennystä.</p>

<div style="text-indent:-1cm">Negatiiviset arvot voivat
kohdata sovellusriippuvaisia esteitä.</div>

Line Height

Line Height -ominaisuudella määritetään elementtien rivikorkeus, eli rivien pohjaviivojen etäisyys toisistaan.

Huomiot

• Käytettäessä numeroarvoja rivikorkeus lasketaan kertomalla numero elementin fonttikoolla.
• Negatiiviset arvot eivät ole sallittuja.
• Rivikorkeus voidaan asettaa myös font-ominaisuudella.

Esimerkit

<ul style="line-height:1.8">
<li>Listaan saadaan</li>
<li>väljyyttä</li>
<li>muuttamalla rivikorkeutta.</li>
</ul>

<p style="line-height:60%">Rivejä voidaan<br />
myös tiivistää.</p>