CSS Tekst
CSS teksti omadused määravad kindlaks, millisel kujul tekst kuvatakse.
Põhiline reegel teksti kirjutamisel on kerge loetavus. Liiga suur v. liiga väike tekst on halvasti loetav ja väsitab silmi. Samuti peaks olema kokkuhoidlik värvide ning teiste efektidega (näiteks lihtsalt allajoonitud tekst jätab petliku mulje, et tegemist on lingiga). Tavaliselt inimesed ei loe veebis teksti nagu raamatut vaid libisevad sellest üle. Mida ühtlasem on tekst, seda kergem on "libiseda". samuti pole mõtet kasutada liialt rõhutatud teksti. Rõhutada tuleb seda mis on tõesti oluline.
Lihtsaim viis teksti värvi muutmiseks on selline:
<p style="color : #f00;"> See paragrahv on punane</p>
Tulemuseks on selline paragrahv:
See paragrahv on punane.
Teksti erinevaid osi saab ka värvidega rõhutada, lisades värvi taustaks. CSS kirjaviis on selline:
<p style="background-color : #ffc0cb;"> See tekst on roosa taustaga.</p>
See paragrahv on roosa taustaga.
Teksti paigutamine
Teksti kujundamisel mängib olulist rolli ka selle paigutus. CSS'i abil saab teksti erinevaid osi liigutada paremale, vasakule ja keskele. Näiteks nii:
See paragrahv on nihutatud paremale.
CSS kirjaviis on selline:
<p style="float. right;"> See paragrahv on nihutatud paremale.</p>
Siin on veel üks näide teksti paigutusest kus on määratud teksti laiuse atribuut:
<p style="float: left; width:150px;"> see paragrahv on nihutatud vaskule laiusega 150px.</p>
See paragrahv on nihutatud vasakule laiusega 150px.
Tähtede ja sõnade vahekaugused
CSS'i abil saab muuta tähtede vahekaugusi, selleks, et muuta tekst kergemini loetavaks või lihtsalt kasutada seda võimalust teksti kujundamiseks. CSS kirjaviis on selline:
<p style="letter-spacing : 1em;"> Selle paragrahvi teksti tähtede vahekaugus on 1em.</p>
Tulemus peaks olema selline:
Selle paragrahvi teksti tähtede vahekaugus on 1em.
Samamoodi võib manipuleerida ka sõnade vahekaugustega:
<p style="word-spacing : 1em;"> Selle paragrahvi sõnade vahekaugus on 1em.</p>
Selle paragrahvi sõnade vahekaugus on 1em.
Teksti ridade paigutus
Nii nagu tähtede ja sõnadega, saab CSS'i abil manipuleerida teksti ridade paigutusega:
<p style="line-height: 1.5em;"> Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest. Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest. Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest. Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest. </p>
Pane tähele: ridade vahe väärtus ei tohi olla negatiivne!
Selline peaks olema tulemus:
Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest. Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest. Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest. Selle paragrahvi ridade vahe on 1.5 em ehk 150% fondi suurusest.
Vormindamata tekst
Veel üks võimalus teksti kujundada on jätta see nii nagu tekstiredaktorisse esialgu kirjutati.
CSS kirjaviis on siis selline:
<p style="white-space: pre;">
Selle paragrahvi kujundus
on selline nagu
tekstiredaktoris.</p>
Selle paragrahvi kujundus on selline nagu tekstiredaktoris.
Kursorid
Nii nagu Html'is saab CSS'is kujundada kursoreid. Oluline on meelespidada, et brauserid kuvavad kursoreid erinevalt!
"Auto" ütleb brauserile, et tegemist on vaikimisi kursori valikuga.
cursor: auto;
<a href="" style="cursor: auto;">cursor: auto;</a>
Kasutatakse siis kui kursori valik on määratlemata. Seega iga arvuti ja brauser valivad kursori ise (tavaliselt on selleks noole kujutis).
cursor: default;
<a href="" style="cursor: default;">cursor: default;</a>
Brauser ei kuva mitte mingit kursorit.
cursor: none;
<a href="" style="cursor: none;">cursor: none;</a>
"Help" kursor annab vaatajale märku, et tegemist on mingi elemendi informatsiooniga. Näiteks: tegemist on mittestandartse lingiga.
cursor: help;
<a href="" style="cursor: help;">cursor: help;</a>
Tavaliselt käe kujutis mis viitab mingile lingile.
cursor: pointer;
<a href="" style="cursor: pointer;">cursor: pointer;</a>
Nool koos liivakellaga. Annab vaatajale märku, et parasjagu käib mingi protsess. Näiteks: midagi laetakse alla.
cursor: progress;
<a href="" style="cursor: progress;">cursor: progress;</a>
Sarnane põhimõte nagu eelmisel kursoril. Mõned brauserid kuvavad "liivakella" animeeritult.
cursor: wait;
<a href="" style="cursor: wait;">cursor: wait;</a>
Kasutatkse tavaliselt graafikaprogrammides täpse asukoha määramiseks.
cursor: crosshair;
<a href="" style="cursor: crosshair;">cursor: crosshair;</a>
Selline kursor annab märku, et tekstiga saab midagi teha: märkida, printida, muuta, nihutada jne.
cursor: text;
<a href="" style="cursor: text;">cursor: text;</a>
Sellel teksti-kursoril on ainult firefox'i ja IE toetus.
cursor: vertical-text;
<a href="" style="cursor: vertical-text;">cursor: vertical-text;</a>
Seda kursorit kuvab ainult Firefox.
cursor: alias;
<a href="" style="cursor: alias;">cursor: alias;</a>
Seda kursorit kuvab ainult Firefox.
cursor: copy;
<a href="" style="cursor: copy;">cursor: copy;</a>
See kursor teavitab, et märgitud elementi on võimalik eemaldada.
cursor: move;
<a href="" style="cursor: move;">cursor: move;</a>
See kursor annab külastajale märku, et mingit elementi antud kohta ei saa paigutada. Firefox ja IE kuvavad neid kursoreid erinevalt.
cursor: no-drop;
<a href="" style="cursor: no-drop;">cursor: no-drop;</a>
See kursor on eelmisega sarnane kuid üldisem. Kõike mida proovitakse külastaja poolt, pole lubatud.
cursor: not-allowed;
<a href="" style="cursor: not-allowed;">cursor: not-allowed;</a>
<a href="" style="cursor: col-resize;">cursor: col-resize;</a>
<a href="" style="cursor: row-resize;">cursor: row-resize;</a>
<a href="" style="cursor: all-scroll;">cursor: all-scroll;</a>
<a href="" style="cursor: url(redball.cur);">cursor: url(redball.cur);</a>
Näited
Teksti värvi määramine
Selles näites demonstreeritakse, kuidas määrata teksti värvi.
Teksti taustavärvi määramine
Selles näites demonstreeritakse, kuidas määrata teksti taustavärvi.
Tähtede vahekaugused
Selles näites demonstreeritakse, kuidas määrata tähtede vahekaugusi tekstis.
Ridade vahekaugused
Selles näites demonstreeritakse, kuidas määrata ridade vahekaugusi tekstis.
Teksti nihutamine
Selles näites demonstreeritakse, kuidas paigutada teksti veebilehel.
Teksti dekoreerimine
Selles näites demonstreeritakse, kuidas lisada tekstile erinevaid dekoratsioone.
Taandrida
Selles näites demonstreeritakse, kuidas märkida paragrahvi esimese rea, taandrida.
Teksti tähtedega manipuleerimine
Selles näites demonstreeritakse, kuidas saavutada kontroll suurte ja väikeste tähtede üle.
Sõnade vahekaugused
Selles näites demonstreeritakse, kuidas määrata sõnade vahekaugusi.
Lause poolituse keeld
Selles näites demonstreeritakse, kuidas keelata brauseril lauset vaikimisi poolitada.
CSS Teksti Omadused
CSS teksti omadused võimaldavad kontrollida kogu kirjutatud teksti väljanägemist. Võid muuta teksti värvi, suurendada v. vähendada tähtede, sõnade, ridade vahekaugusi, nihutada teksti, muuta taanet jne. jne.
Teksti omaduste nimekiri
| Omadus | Kirjeldus | Väärtus | color | Määrab teksti värvi | color |
|---|---|---|
| direction | Määrab teksti suuna | ltr rtl |
| line-height | Määrab ridade vahekaugused | normal number lenght % |
| letter-spacing | Määrab tähtede vahekaugused | normal lenght |
| text-align | Määrab teksti paigutuse | left right center justify |
| text-decoration | Võimaldab teksti dekoreerida | none underline overline line-throught blink |
| text-indent | Määrab esimese rea taane | lenght % |
| text-transform | Kontroll suurte ja väikeste tähtede üle | none capitalize uppercase lowercase |
| word-spacing | Suurendab v. vähendab sõnade vahekaugusi | normal lenght |
