Tekstin ominaisuudet (Text Properties)

• Text Decoration
• Text Transformation
• Text Indention
• Text Alignment
• Vertical Alignment
• Line Height
• Word Spacing
• Letter Spacing

Text Decoration

text-decoration ominaisuus mahdollistaa tekstin koristelun viidellä eri tavalla: underline, overline , line-through , blink tai oletus none.

Esimerkiksi linkistä voi poistaa alleviivauksen (ei suositeltavaa) seuravalla tavalla:

A:link, A:visited, A:active { text-decoration : none }

Text Transformation

text-transformation ominaisuus mahdollistaa tekstin muotoilun neljällä eri tyylillä:

• capitalize (Muuttaa sanojen ensimmäiset kirjaimet isoiksi.)
• uppercase (Muuttaa koko tekstin isolla kirjoitetuksi.)
• lowercase (Muuttaa tekstin pienellä kirjoitetuksi.)
• none (Normaali teksti, oletusarvo)

Esimerkiksi:

H1 { text-transform : uppercase }
H2 { text-transform : capitalize }

text-transform ominaisuutta pitäisi käyttää vain tyylilliseen ilmaisemiseen. Esimerkiksi olisi epätarkoituksenmukaista käyttää text-transform ominaisuutta isojen kirjainten saamiseksi esim. maiden nimien listaan.

Text Indention

text-indent ominaisuus voidaan määrittää block-tason elementille (P, H1, jne.) elementin ensimmmäisen rivin sisennyksen määrittämiseksi. Arvon tätyy olla joko pituus tai prosenttiarvo; prosentit ovat suhteessa ylempään elementtiin. Yleinen käyttö text-indent ominaisuudelle on kappaleen sisennys:

P { text-indent : 5em }

Text Alignment

text-align ominaisuus voidaan määrittää mille tahansa block-tason elementille ( P, H1, jne.) elementin tekstin vaakasuuntaisen sijoittelun määrittämiseksi (vasen, oikea, keskitetty, tasattu.) Ominaisuus vastaa toiminnaltaan HTML:n ALIGN -attribuuttia kappaleille, otsikoille ja jakeille.

Joitain esimerkkejä:

H1 { text-align : center }
P.newspaper { text-align : justify }

Vertical Align

vertical-align ominaisuudella voidaan määrittää inline-elementin pystysuuntainen sijoittelu, suhteessa ylempään elementtiin. (inline eli rivinsisäinen elementti on sellainen jonka edessä ja jäljessä ei ole rivinvaihtoa, esim. EM, A ja IMG HTML:ssä)

Arvo voi olla prosentteina suhteellinen elementin line-height ominaisuuteen, joka nostaisi elementin perustasoa (baseline) määritellyn arvon verran ylemmän elementin perustasoa ylemmäs. Negatiiviset arvot ovat sallittuja.

Arvo voi olla myös avainsana, joka vaikuttaa sijoitukseen suhteessa ylempään elementtiin.

• baseline (Tasaa elementin perustason ylemmän elementin perustasoon
• middle (Tasaa pystysuuntaisen keskipisteen ylemmän elementin perustasoon+puolet ylemmän elementin x-kirjaimen korkeudesta)
• sub (Alaindeksi)
• super (Yläindeksi)
• text-top (Tasaa elementin yläreunan ylemmän elementin tekstin tasalle)
• text-bottom (Tasaa elementin alareunan ylemmän elementiin tekstin tasalle)

Seuraavat avainsanat vaikuttavat suhteessa elementin riviin

• top (Tasaa elementin yläreunan rivin korkeimman elementin mukaan)
• bottom (Tasaa elementin alareunan rivin matalimman elementin mukaan)

vertical-align ominaisuus on jossain määrin hyödyllinen kuvien sijoitteluun. Seuraavassa esimerkkejä:

IMG.middle { vertical-align : middle }
IMG { vertical-align : 50% }
.exponent { vertical-align : super }

Line Height

line-height ominaisuus määrää rivien perustasojen välin. Kun arvo on numero, rivinkorkeus lasketaan kertomalla elementin fontin korkeus numerolla. Prosenttiarvot ovat suhteellisia elementin fontin kokoon. Negatiiviset arvot ovat kiellettyjä

Rivin korkeus voidaan myös määrittää font ominaisuudella yhdessä fontin koon kanssa.

line-height ominaisuutta voidaan käyttää tekstin tilan kaksinkertaistamiseksi:

P { line-height : 200% }

Word Spacing

word-spacing ominaisuus määrittää ylimääräisen tilan sanojen välissä. Arvon täytyy olla pituus-muodossa. Negatiiviset arvot ovat sallittuja.

Esimerkkejä:

P EM { word-spacing : 0.4em }
P.note { word-spacing : -0.2em }

Letter Spacing

letter-spacing ominaisuus määrittää ylimääräisen tyhjän tilan merkkien välissä. Arvon täytyy olla pituus-muodossa, negatiiviset arvot ovat sallittuja.

H1 { letter-spacing : 0.1em }
P.note { letter-spacing : -0.1em }