CSS/Teksti paigutamine

Allikas: Vikiõpikud
< CSS

Taandrida: text-indent[muuda]

Väärtus: <pikkus> | <protsent> | inherit

Atribuuti text-indent kasutatakse taandridade tekitamiseks. Null suvalist ühikut võrdub mõistagi taandrea puudumisega. Parim on taandrea jaoks kasutada teksti suurusega seotud ühikuid 'em' ja 'ex', sellisel juhul jääb taane alati proportsionaalseks fondi suurusega.

p { text-indent: 4em }

Kuna arvutiekraanilt on inimesel teksti raskem lugeda kui paberilt, siis kasutatakse üldlevinud praktika kohaselt lõikude eristamiseks taandridade asemel tühja ruumi nende vahel. Trükkimiseks mõeldud materjalide puhul on taandread aga igati õigustatud, sest erinevalt veebipinnast paber maksab.

Rasvane kiri==Joondamine: text-align==

Väärtus: left | right | center | justify | inherit

Atribuuti text-align kasutatakse teksti joondamiseks vasakule 'left', paremale 'right', keskele 'center' ning ühtlaselt 'justify'.

p { text-align: justify }

Reakõrgus: line-height[muuda]

Väärtus: normal | <arv> | <pikkus> | <protsent> | inherit

Atribuut line-height määrab reakõrguse. Kui reakõrgus on väiksem kui fondi suurus, siis üksteise all olevad read osaliselt kattuvad. Reakõrguse võib määrata kasutades pikkusühikut või protsenti. Pikkusühikutest on sobivaim em. Täpselt sama tulemuse kui em-i kasutamine annab ilma ühikuta antud arv. Järgnevad deklaratsioonid on võrdväärsed:

p { line-height: 1.5em }
p { line-height: 1.5 }
p { line-height: 150% }

Väärtus 'normal' on reakõrgus mida konkreetne brauser kasutab vaikimisi, harilikult võrdub see väärtusega '1.2'.

Taustavärv: background-color[muuda]

Väärtus: <värv> | transparent | inherit

Atribuut background-color määrab taustavärvi. Kui väärtuseks on 'transparent', siis on taust läbipaistev. Kui väärtuseks on värv, siis on taust kaetud selle värviga. Vaikimisi on kõigi elementide taust läbipaistev.

body { background-color: #fff }
em { background-color: #bac }

Ala, mille taustavärv hõlmab sõltub paljuski elemendist, millele see määratakse. Tekstisiseste elementide nagu 'em', 'strong' ja 'a' puhul värvitakse ära vaid see osa, mis jääb selle teksti taha. blokitasandi elementide nagu 'p', 'h1' ja 'pre' puhul täidab värv kogu tekstibloki, hõlmates ekraani servast servani. Näiteks elemendile 'body' taustavärvi määramine muudab kogu lehekülje tausta.

Teksti ja taustavärvi valimisel tasub silmas pidada, et värvid oleksid kontrastsed. Näiteks tumedad või mustad tähed heledal või kergelt kreemjal taustal või vastupidi. Näiteks järgnev värvivalik pole just kuigi hea:

body {
    color: #a00;
    background-color: 0a0;
}

Sest hoolimata sellest, et värvid on esmapilgul täiesti erinevad (punane ja roheline), on nad täpselt ühe heledusega ning seetõttu võib juhtuda, et puna-rohe värvipimedusega isikud näevad teksti asemel täiesti tühja lehte.