Päivitetty: 10.03.2003.

Teksti

CSS tarjoaa joukon uusia keinoja tekstin muotoiluun. Nämä typografiset tehosteet mahdollistavat HTML-sivujen entistä paremman muotoilun. Voit esimerkiksi määrittää tekstin välistyksen tai ensimmäisen rivin sisennyksen.


Teksti

word-spacing

Sanojen välinen etäisyys.

Yhteensopivuus: CSS1 ja CSS2 (Opera 3.6)
Sallitut arvot: normal | <pituus>
Oletusarvo: normal
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei

word-spacing esimerkki

Word-spacing: 20px jättää sanojen väliin tyhjää 20 pikeliä.

<< Alkuun


letter-spacing

Kirjainten välinen etäisyys.

Yhteensopivuus: CSS1 ja CSS2 (IE 4, Opera 3.6)
Sallitut arvot: normal | <pituus>
Oletusarvo: normal
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei

letter-spacing esimerkki

letter-spacing: 4px jättää kirjainten väliin 4 pikseliä.

<< Alkuun


text-decoration

Tekstin korostus.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: none | [ underline || overline || line-through || blink ]
Oletusarvo: none
Käyttö: Kaikki elementit ( ! )
Periytyvä: Ei
Prosenttiarvo: Ei

( ! ) Huomio tämä:
Kuten nimikin 'text-decoration' sanoo, tämä ominaisuus kuvaa tekstin koristamista. Näin ollen ominaisuus ei toimi muilla kun teksti elementeillä. Eli text-decoration ei toimi esim. <IMG> -elementin kanssa. Ominaisuus ei myöskään toimi tyhjien elementtien (<br> tai <hr>) kanssa.

text-decoration esimerkki

text-decoration: line-through

Lisää esimerkkejä.

!Arvo 'blink' toimii vain Netscape 4.x selaimilla, kun taas 'overline' ei niillä toimi.

<< Alkuun


vertical-align

Tekstin vertikaalinen (pystysuuntainen) tasaus.

Yhteensopivuus: CSS1 ja CSS2 (IE4, Opera 3.6)
Sallitut arvot: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <%>
Oletusarvo: baseline
Käyttö: Inline-elementit
Periytyvä: Ei
Prosenttiarvo: Prosentti viittaa elementin rivikorkeuteen.

vertical-align esimerkki

Normaali super sub

Lisää esimerkkejä.

<< Alkuun


text-transfor

Suuraakkoset pienaakkosiksi tai toisinpäin.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: none | capitalize | uppercase | lowercase
Oletusarvo: none
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei

text-transfor esimerkki

p {text-transform: uppercase}

<p>pienellä kirjoitettu!</p>

Lisää esimerkkejä.

<< Alkuun


text-align

Tekstin horisontaalinen (vaakasuora) tasaustapa.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: left | center | right | justify
Oletusarvo: Selaimen oletus arvo (yleensä left)
Käyttö: block-level elementit
Periytyvä: Kyllä
Prosenttiarvo: Ei

text-align esimerkki

text-align: center

Lisää esimerkkejä.

<< Alkuun


text-indent

Ensimmäisen tekstirivin sisennys.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: <pituus> | <%>
Oletusarvo: 0
Käyttö: block-level elementit
Periytyvä: Kyllä
Prosenttiarvo: Sisennys emoelementin suhteen.

text-indent esimerkki

Katso esimerkkejä.

<< Alkuun


line-height

Tekstirivin korkeus.

Yhteensopivuus: CSS1 ja CSS2 (IE4, NN4, Opera 3.6)
Sallitut arvot: normal | <numero> | <pituus> | <%>
Oletusarvo: normal
Käyttö: Kaikki elementit
Periytyvä: Kyllä
Prosenttiarvo: Suhteessa fontin kokoon.

line-height esimerkki

line-height:2 tekee väljää tekstiä (eli tässä ei ole kahta kappaletta tai <br> tagia)

Lisää esimerkkejä.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!