 | Peatüki sisukord |
5.4 CSS-i tekstitöötlus
Järgnevalt kirjeldame CSS-i olulisemaid võimalusi teksti kujundamiseks. Üldiselt, teksti kujundamisvahendeid saab määrata kõigile teksti sisaldavatele veebilehe osadele (pealkirjad, lõigud, loendid, lingid jne).
Alustame värvist. Vaikimisi kõikide tekstiobjektide värv on must. Parameeter color võimaldab määrata tekstiobjektidele teist värvi. Näiteks, kõikidele veebilehe tekstiobjektidele saab teksti värvi määrata märgendile <body> loodud stiilis:
body{
color:blue
}
Omaduse color saab lisada iga teksti sisaldava elemendi stiilile. Näiteks pealkirjale oranži värvi määramiseks kirjutatakse:
h1 {
color: #FF8040
}
Tekstiobjektidele saab määrata ka taustavärvi. Selleks tuleb soovitud elemendi kujundusele lisada tausta parameeter background-color:
p.highlight {
background-color: (255,255,0)
}
Toodud näites luuakse eraldi kujundusklass lõikudele (märgend <p>), millele on antud nimeks "highlight" ja määratud kollane taustavärv.
Kui sa võrdled kolme esimest näidet, siis märkad, et värve saab defineerida kolmel erineval viisil:
- värvi nime järgi – näiteks "blue";
- HEX väärtuse järgi – näiteks "#0000FF";
- RGB väärtue järgi – näiteks "rgb(0, 0, 255)";
HEX ning RGB väärtusi toetavad kõik populaarsemad veebilehitsejad ning nendega saab määrata kõiki värvitoone.
Järgmisena vaatame, kuidas joondada teksti. Parameeter text-align võimaldab joondada teksti vasakule left (vaikimisi kasutatav), paremale right, keskele centered või rööpjoondus justified. Näiteks pealkirja joondamine paremale näeb välja järgmiselt:
h1 {text-align: center}
Samuti saab muuta teksti kirjastiile, teksti paksust jms. Järgmine tabel annab lühiülevaate mõningatest parameetritest, väärtustest ning nende kasutamisest.
| Parameeter | Võimalikud väärtused | Näide ning kirjeldus |
| text-transform | uppercaselowercasecapitalize | p {text-transform: uppercase;} teksti tegemine suurtähtkirjaks |
| text-align | leftrightcenterjustified | p {text-align: justified;} Teksti joondamine (rööpjoondus) |
| text-decoration | noneunderlineoverlinelink-throught | a {text-decoration: none;} eemaldab linkidelt alakriipsu |
| text-indent | px (pikslite arv) % (protsentuaalselt) | p {text-indent: 100px;} lõigu esimesele reale taande lisamine |
| line-height | normalnumbriline väärtus px (pikslite arv) % (protsentuaalne) | p {line-height: 1.2;} määrab reavahe tekstis |
| font | p {font: 12px Calibri;} võimaldab ühes deklaratsioonis kirjeldada kirja kujunduse | |
| font-family | fondi nimi | p{font-family: Calibri, "Times New Roman", Times;} määrab tekstile fondi stiili |
| font-size | absoluutne suurus relatiivne suurus | p {font-size: 12px;} määrab kirja suuruse |
Meeles tuleks pidada, et parameetri font-family kasutamisel tuleb jutumärkide vahele kirjutada kirjastiilid, mille nimes on rohkem kui üks sõna. Samuti peab soovitud stiilid kirjutama prioriteetses järjekorras. Kui veebilehitseja ei suuda kuvada esimest kirjalaadi, valib ta järgmise jne.
Iseseisev ülesanne:
Kasutades ühte kolmest õpitud CSS-i paigutamise stiilist, võtke alltoodud tekst ning muutke see CSS-i abil kaldkirjaks ning lillakaks värviks. Seejärel joondage tekst keskele ning muutke reavahe 1.5 peale. Viimase asjana muutke vabal valikul teksti fondi suurus ja stiil.
Lorem ipsum nisi etiam et orci ut convallis enim. Ac dictumst platea leo donec fusce maecenas. Felis eget felis orci faucibus vitae etiam et. Dictum condimentum auctor ornare praesent cras morbi donec senectus. Pellentesque congue convallis commodo porta in cubilia fusce netus feugiat.