CSS Referensbok

Med textegenskaper kan du i detalj specificera hur texten/orden/bokstäverna ska placeras både vertikalt och horisontellt i förhållande till varandra och i vissa fall även till kanvas.

Det finns 8 olika textegenskaper: word-spacing, letter-spacing, text-decoration, text-transform, text-align, text-indent, line-height, vertical-align. Alla deklareras var för sig då egenskaperna inte kan förkortas.

* word-spacing

värden: normal | <length> (utgångsvärde - normal)
kan tilldelas: alla element
arv: ja

Med denna egenskap kan du förstora eller förminska standardavståndet mellan varje ord. Enheten em relaterar till själva elementets fontstorlek som i det här fallet är H1.

H1 {word-spacing: 0.5em}

kommer att förstora avståndet mellan orden med 0.5 em.

H1 {word-spacing: -0.1em}

kommer att förminska avståndet mellan orden med 0.1 em.

Det specificerade avståndet kan påverkas om texten har raka marginaler.

* letter-spacing

värden: normal | <length> (utgångsvärde - normal)
kan tilldelas: alla element
arv: ja

Med denna egenskap kan du förstora eller förminska standardavståndet mellan varje bokstav. Enheten em relaterar till själva elementets fontstorlek som i det här fallet är H1.

H1 {letter-spacing: 0.1em}

kommer att förstora avståndet mellan varje bokstav med 0.1 em.

H1 {letter-spacing: -0.1em}

kommer att förminska avståndet mellan varje bokstav med 0.1 em.

Det specificerade avståndet kan påverkas om texten har raka marginaler.

* text-decoration

värden: none | underline | overline | line-through | blink (utgångsvärde - none)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du understryka eller stryka över text, skapa en linje över den eller göra texten blinkande. För att få texten understruken skriver du till exempel:

H1 {text-decoration: underline}

Med denna egenskap kan du även ta bort understrykningen från länkar:

A {text-decoration: none}
eller
A:link, A:visited, A:active {text-decoration: none}
(se pseudoklasser)

* text-transform

värden: capitalize | uppercase | lowercase | none (utgångsvärde - none)
kan tilldelas: alla element
arv: ja

Med denna egenskap kan du specificera hur bokstäverna kommer att visas:

capitalize första bokstaven i varje ord visas med versaler
uppercase alla bokstäver visas med versaler
lowercase alla bokstäver visas med versaler
none neutraliserar ärvda värden

H1 {text-transform: capitalize}

kommer att visa första bokstaven i varje ord som finns i rubriken med versaler, efterföljande bokstäver visas med gemena.

* text-align

värden: left | right | center | justify (utgångsvärde - bestäms av www-klienten)
kan tilldelas: alla blockelementen
arv: ja

Med denna egenskap kan du högerjustera, vänsterjustera, centrera texten eller skapa raka marginaler. Om www-klienter inte stödjer raka marginaler kommer texten vänsterjusteras.

H1 {text-align: center} /* centrerar texten */

* text-indent

värden: <length> | <percentage> (utgångsvärde - 0)
kan tilldelas: alla blockelementen
arv: ja

Med denna egenskap kan du göra indrag, t ex i ett stycke. Indraget görs i styckets första rad. Negativa värden kan uppges.

P {text-indent: 5em}
P {text-indent: 3cm}
P {text-indent: 2%}

kommer att visa första raden i ett stycke med respektive 5 em eller 3 cm eller 2% indrag.

* line-height

värden: normal | <number> | <length> | <percentage> (utgångsvärde - normal)
kan tilldelas: alla element
arv: ja

Med denna egenskap kan du specificera radhöjden. Om t ex rubriken är 24 punkter stor kan en lämplig radhöjd vara 28 punkter; 2 punkter ovan och 2 under. Var försiktig med radhöjder. Om en rubrik (eller vilket annat element som helst) innehåller en bild eller ett annat element vars radhöjd är större än rubrikens kommer bilden överlappa det som finns under eller ovanför rubriken.

H1 { line-height: normal; font-size: 24pt } /* normal - www-klient anpassar värdet till fontstorleken*/
H1 { line-height: 2.8; font-size: 24pt } /* number */
H1 { line-height: 2.8em; font-size: 24pt } /* length */
H1 { line-height: 280%; font-size: 24pt } /* percentage */

Som de flesta egenskaper ärvs även egenskapen line-height. Om du vill att ett antal element ska ha en och samma radhöjd kan du tilldela förälderelementet denna egenskap, t ex DIV.

DIV { line-height: 18pt; font-size: 14pt }

Om du till exempel skriver i ditt HTML-dokument,:

<DIV>
<TABLE>Här kommer tabellen</TABLE>
<P>Ett stycke</P>
<P>Ett annat stycke</P>
</DIV>

kommer både tabellen och styckena ärva egenskapen (radhöjden) tilldelade föräldern (DIV), dvs 18 punkter.

* vertical-align

Med denna egenskap kan du vertikalt placera olika element i förhållande till föräldraelement, t ex en bild i förhållande till stycket/rubriken den befinner sig i.

IMG {vertical-align: bottom}

kommer att placera bilden längs ner i förhållande till texten, t ex i en rubrik:

<H1>Text<IMG></H1> visar:

Text bild

Om ett antal olika element innehåller varandra, t ex en division innehåller en tabell som innehåller ett stycke som innehåller en bild, kommer egenskapen vertical-align att placera det berörda elementet, t ex en bild, antingen i förhållande till förälderelementet eller det element som finns högst upp eller längst ner.

* Exempel:

Rubrik: fontstorlek 24 pt, radhöjd 28 pt, typsnitt helvetica, fetstil, mellanrum mellan orden förstoras med 0.5 em, texten (rubriken) är centrerad:

H1 {font: 24pt/28pt helvetica bold; word-spacing: 0.5em; text-align: center}

Länk: fontstorlek större än förälders, ingen understrykning

A {font: larger; text-decortion: none}

Stycke som finns i en tabellcell (kontext-selektor): fontstorlek mindre än tabellens, texten högerjusteras

TD P {font: smaller; text-align: right}

Alla element med klassen .eva: understryks och visas i fet stil

.eva {text-decoration: underline; font-weight: bold}

Upp | CSS-referensbok | Referensböcker

Textegenskaper

Inledning