Z lastnostmi za besedilo v CSS določamo barvo, poravnavo, razmike, način prikaza belih znakov, senco in druge značilnosti izpisa besedila. Te lastnosti močno vplivajo na berljivost, preglednost in videz spletne strani.
Pomni: Pri oblikovanju besedila ni pomemben samo videz. Pomembno je tudi, da besedilo ostane jasno, pregledno in dobro berljivo.
Sodobni CSS prinaša tudi nekaj novejših možnosti za oblikovanje besedila. Pri podčrtovanju in drugih okraskih lahko poleg text-decoration uporabimo še text-decoration-color, text-decoration-style, text-decoration-thickness in text-underline-offset. Pri poravnavi besedila sta poleg klasičnih vrednosti uporabni tudi logični vrednosti start in end, pri obravnavi belih znakov pa je danes na voljo tudi vrednost break-spaces.
color
Lastnost color določa barvo besedila. Barvo lahko določimo z imenom barve, s šestnajstiškim zapisom, z zapisom rgb(), rgba(), hsl() ali hsla(). Kako določimo barvo, je podrobneje opisano na strani Barve v CSS.
Pozor: Pri določanju barve besedila moramo paziti na dovolj velik kontrast med besedilom in ozadjem, sicer je besedilo slabše berljivo.
<h1>Glavni naslov</h1>
<h2>Podnaslov</h2>
<p class="zelena">Ta odstavek je zelene barve.</p>
<p class="transparent">Ta odstavek je prosojne barve, zato je neviden.</p>
<p class="oranzna">Ta odstavek je oranžne barve.</p>h1 { color: red; }
h2 { color: rgb(0, 0, 255); }
.zelena { color: #008000; }
.transparent { color: transparent; }
.oranzna { color: rgba(255, 126, 0, 1); }Glavni naslov
Podnaslov
Ta odstavek je zelene barve.
Ta odstavek je prosojne barve, zato je neviden.
Ta odstavek je oranžne barve.
text-decoration
Lastnost text-decoration določa okraske, ki jih lahko dodamo besedilu, na primer podčrtavanje, nadčrtavanje ali prečrtavanje. V sodobnem CSS je to bližnjica, s katero lahko hkrati določimo tudi barvo, slog in debelino črte.
| Vrednost | Pomen |
|---|---|
none |
brez okraskov |
underline |
podčrtano |
overline |
nadčrtano |
line-through |
prečrtano |
wavy, dashed, dotted, double |
slog okrasne črte |
barva |
barva okrasne črte |
debelina |
debelina črte, na primer 2px |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p>
<span class="none">none</span>,
<span class="underline">underline</span>,
<span class="overline">overline</span>,
<span class="line-through">line-through</span>
</p>
<p class="kombinirano">kombinirano</p>
<p class="moderno">moderno podčrtavanje</p>.none { text-decoration: none; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.kombinirano { text-decoration: underline overline line-through; }
.moderno {
text-decoration: underline wavy #cc0000 2px;
text-underline-offset: 3px;
}none, underline, overline, line-through
kombinirano
moderno podčrtavanje
Pozor: Nepotrebno podčrtavanje običajnega besedila lahko bralca zmede, ker podčrtano besedilo pogosto povezuje s povezavami.
Pri podčrtovanju je dobro paziti na berljivost. Sodobni brskalniki omogočajo tudi natančnejšo nastavitev odmika podčrtaja in boljši prikaz črte prek spustov črk.
text-transform
Lastnost text-transform določa pretvorbo besedila.
| Vrednost | Pomen |
|---|---|
none |
brez pretvorbe |
capitalize |
velika začetnica vsake besede |
uppercase |
velike črke |
lowercase |
male črke |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p>
<span class="none">none</span>,
<span class="capitalize">capitalize besedilo</span>,
<span class="uppercase">uppercase</span>,
<span class="lowercase">LOWERCASE</span>
</p>.none { text-transform: none; }
.capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }none, capitalize besedilo, uppercase, LOWERCASE
Pomni: Lastnost text-transform spremeni način prikaza besedila, ne pa nujno tudi same vsebine v izvorni kodi.
Pri vrednosti capitalize se dejansko vedenje lahko nekoliko razlikuje glede na jezik besedila in pravila pretvorbe znakov, zato je pri večjezičnih vsebinah dobro preveriti rezultat v praksi.
text-align
Lastnost text-align določa vodoravno poravnavo vrstičnega besedila znotraj blokovnega elementa. Poleg klasičnih vrednosti left, right, center in justify sodobni CSS pozna tudi logični vrednosti start in end, ki sta uporabni pri različnih smereh pisanja.
| Vrednost | Pomen |
|---|---|
left |
leva poravnava |
right |
desna poravnava |
center |
sredinska poravnava |
justify |
obojestranska poravnava |
start |
poravnava na začetek smeri pisanja |
end |
poravnava na konec smeri pisanja |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p class="left">In bibendum vulputate finibus...</p>
<p class="right">Praesent vel dui lorem. Donec feugiat...</p>
<p class="center">Curabitur faucibus commodo mollis. Integer...</p>
<p class="justify">Donec imperdiet pharetra eros quis bibendum...</p>
<p class="start">To besedilo je poravnano na začetek smeri pisanja.</p>.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
.start { text-align: start; }In bibendum vulputate finibus. Donec hendrerit libero nunc, eu euismod mi vulputate et. Sed non risus metus. Vestibulum vel sagittis nisi. Duis pretium, felis at tristique vestibulum, ligula arcu molestie ante, nec aliquet enim diam quis libero. Pellentesque lobortis, leo eu aliquam feugiat, ex dolor lobortis magna, nec semper felis augue ac augue.
Praesent vel dui lorem. Donec feugiat quis lorem non sollicitudin. Proin mattis luctus ante in pretium. Nunc ullamcorper sollicitudin sollicitudin. Integer sed nulla vel enim bibendum euismod. Nulla est justo, scelerisque a orci a, tempus vestibulum nibh. Integer lacinia imperdiet interdum.
Curabitur faucibus commodo mollis. Integer tincidunt, libero non egestas lobortis, enim nisl mollis nunc, sit amet rutrum risus leo id velit. Ut sagittis dui ipsum. Fusce vel ligula dapibus, facilisis urna sit amet, condimentum nunc. Integer sed gravida urna. Ut sed ornare eros.
Donec imperdiet pharetra eros quis bibendum. Phasellus ut tellus ut lectus finibus congue. Nulla id urna id nisl imperdiet condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
To besedilo je poravnano na začetek smeri pisanja.
Pozor: Obojestranska poravnava lahko pri ozkih stolpcih povzroči neenakomerne presledke med besedami, zato jo uporabljamo premišljeno.
text-indent
Lastnost text-indent določa zamik prve vrstice besedila. Če zamik določimo kot dolžino, ostane enak ne glede na širino odstavka. Če ga določimo v odstotkih, je odvisen od širine nadrejenega elementa. Na druge vrstice odstavka ta lastnost ne vpliva.
| Vrednost | Pomen |
|---|---|
dolžina |
vrednost zamika prve vrstice, npr. v mm, cm, in, pt, pc, em, ex ali px |
% |
vrednost zamika prve vrstice v % |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
Primer zamika prve vrstice:
<p class="odmik-dolzina">Phasellus sed aliquet turpis, quis ullamcorper lectus. Cras rhoncus arcu sit amet scelerisque vulputate. Integer non felis non lectus hendrerit euismod. Proin tincidunt dapibus urna, non ornare turpis viverra ac.</p>
<p class="odmik-odstotek">Maecenas eget purus sit amet turpis varius sagittis in ut nulla. Duis ut dignissim orci, vel vestibulum nunc. Ut luctus lacinia leo nec gravida.</p>.odmik-dolzina { text-indent: 1cm; }
.odmik-odstotek { text-indent: 20%; }Phasellus sed aliquet turpis, quis ullamcorper lectus. Cras rhoncus arcu sit amet scelerisque vulputate. Integer non felis non lectus hendrerit euismod. Proin tincidunt dapibus urna, non ornare turpis viverra ac.
Maecenas eget purus sit amet turpis varius sagittis in ut nulla. Duis ut dignissim orci, vel vestibulum nunc. Ut luctus lacinia leo nec gravida.
text-shadow
Lastnost text-shadow določi senco besedilu. Pri uporabi moramo paziti, da senca ne zmanjša berljivosti, zlasti pri daljših besedilih. Modul CSS Text Decoration jo obravnava kot del oblikovanja besedilnih okraskov.
| Vrednost | Pomen |
|---|---|
h-shadow |
velikost sence v vodoravni smeri (zahtevana vrednost, lahko je tudi negativna) |
v-shadow |
velikost sence v navpični smeri (zahtevana vrednost, lahko je tudi negativna) |
blur |
razpršenost sence (neobvezna vrednost) |
color |
barva sence (neobvezna vrednost) |
none |
privzeta vrednost, brez sence |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p class="shadow1">To besedilo ima senco 3px vodoravno in 3px navpično srebrne barve.</p>
<p class="shadow2">To besedilo ima senco 1px vodoravno in 1px navpično oranžne barve.</p>
<p class="shadow3">To besedilo ima senco -2px vodoravno, -2px navpično zelene barve in 3px razpršenosti sence.</p>.shadow1 { text-shadow: 3px 3px silver; }
.shadow2 { text-shadow: 1px 1px orange; }
.shadow3 { text-shadow: -2px -2px 3px green; }To besedilo ima senco 3px vodoravno in 3px navpično srebrne barve.
To besedilo ima senco 1px vodoravno in 1px navpično oranžne barve.
To besedilo ima senco -2px vodoravno, -2px navpično zelene barve in 3px razpršenosti sence.
Pozor: Močne ali nejasne sence pri daljšem besedilu hitro zmanjšajo berljivost, zato je senca navadno primernejša za krajše poudarke ali naslove.
letter-spacing
Lastnost letter-spacing določa razmik med znaki besedila. Pozitivne vrednosti znake razmaknejo, negativne pa jih približajo. Uporabljamo jo zmerno, ker prevelik razmik hitro poslabša berljivost.
| Vrednost | Pomen |
|---|---|
normal |
brez dodatnega prostora med znaki, privzeta vrednost |
dolžina |
vrednost razmika med znaki v mm, cm, in, pt, pc, em, ex ali px |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p class="normal">To besedilo ima privzet razmik med znaki.</p>
<p class="letter-spacing_1px">To besedilo ima razmik med znaki 1px.</p>
<p class="letter-spacing_2px">To besedilo ima razmik med znaki 2px.</p>
<p class="letter-spacing_5px">To besedilo ima razmik med znaki 5px.</p>
<p class="letter-spacing_10px">To besedilo ima razmik med znaki 10px.</p>
<p class="letter-spacing_-1px">To besedilo ima razmik med znaki -1px.</p>
<p class="letter-spacing_-5px">To besedilo ima razmik med znaki -5px.</p>.letter-spacing_1px { letter-spacing: 1px; }
.letter-spacing_2px { letter-spacing: 2px; }
.letter-spacing_5px { letter-spacing: 5px; }
.letter-spacing_10px { letter-spacing: 10px; }
.letter-spacing_-1px { letter-spacing: -1px; }
.letter-spacing_-5px { letter-spacing: -5px; }To besedilo ima privzet razmik med znaki.
To besedilo ima razmik med znaki 1px.
To besedilo ima razmik med znaki 2px.
To besedilo ima razmik med znaki 5px.
To besedilo ima razmik med znaki 10px.
To besedilo ima razmik med znaki -1px.
To besedilo ima razmik med znaki -5px.
word-spacing
Lastnost word-spacing določa razmik med besedami v besedilu. Tudi pri tej lastnosti je priporočljiva zmerna uporaba, ker pretiran razmik oteži branje.
| Vrednost | Pomen |
|---|---|
normal |
brez dodatnega prostora med besedami, privzeta vrednost |
dolžina |
vrednost razmika med besedami v mm, cm, in, pt, pc, em, ex ali px |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p class="normal">To besedilo ima privzet razmik med besedami.</p>
<p class="word-spacing_1px">To besedilo ima razmik med besedami 1px.</p>
<p class="word-spacing_2px">To besedilo ima razmik med besedami 2px.</p>
<p class="word-spacing_5px">To besedilo ima razmik med besedami 5px.</p>
<p class="word-spacing_10px">To besedilo ima razmik med besedami 10px.</p>
<p class="word-spacing_-1px">To besedilo ima razmik med besedami -1px.</p>
<p class="word-spacing_-5px">To besedilo ima razmik med besedami -5px.</p>.word-spacing_1px { word-spacing: 1px; }
.word-spacing_2px { word-spacing: 2px; }
.word-spacing_5px { word-spacing: 5px; }
.word-spacing_10px { word-spacing: 10px; }
.word-spacing_-1px { word-spacing: -1px; }
.word-spacing_-5px { word-spacing: -5px; }To besedilo ima privzet razmik med besedami.
To besedilo ima razmik med besedami 1px.
To besedilo ima razmik med besedami 2px.
To besedilo ima razmik med besedami 5px.
To besedilo ima razmik med besedami 10px.
To besedilo ima razmik med besedami -1px.
To besedilo ima razmik med besedami -5px.
white-space
Lastnost white-space določa obravnavo belih znakov v besedilu. Med bele znake spadajo presledki, tabulatorji, prelomi vrstic in podobni znaki brez grafične podobe. Brskalnik lahko več zaporednih belih znakov združi v en sam presledek ali pa jih ohrani. Sodobni CSS tukaj pozna tudi vrednost break-spaces.
| Vrednost | Pomen |
|---|---|
normal |
združuje bele znake, vrstice lomi po potrebi |
nowrap |
združuje bele znake, vrstic ne lomi samodejno |
pre |
ohranja bele znake in prelome vrstic, vrstic ne lomi samodejno |
pre-wrap |
ohranja bele znake in prelome vrstic, vrstice lomi po potrebi |
pre-line |
združuje zaporedne presledke, ohranja prelome vrstic in vrstice lomi po potrebi |
break-spaces |
ohranja presledke in omogoča lomljenje vrstic tudi med ohranjenimi presledki |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p class="normal">To besedilo ima tri presledke med besedami in lastnost <em>white-space</em>, ki ima vrednost <em>normal</em>.</p>
<p class="nowrap">To besedilo ima tri presledke med besedami in lastnost <em>white-space</em>, ki ima vrednost <em>nowrap</em>.</p>
<p class="pre">To besedilo ima tri presledke med besedami
in lastnost <em>white-space</em>, ki ima vrednost <em>pre</em>.</p>
<p class="pre-wrap">To besedilo ima tri presledke med besedami
in lastnost <em>white-space</em>, ki ima vrednost <em>pre-wrap</em>.</p>
<p class="pre-line">To besedilo ima tri presledke med besedami
in lastnost <em>white-space</em>, ki ima vrednost <em>pre-line</em>.</p>
<p class="break-spaces">To besedilo ima tri presledke med besedami
in lastnost <em>white-space</em>, ki ima vrednost <em>break-spaces</em>.</p>.normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }
.break-spaces { white-space: break-spaces; }To besedilo ima tri presledke med besedami in lastnost oblikovanja white-space, ki ima vrednost normal.
To besedilo ima tri presledke med besedami in lastnost oblikovanja white-space, ki ima vrednost nowrap.
To besedilo ima tri presledke med besedami in lastnost oblikovanja white-space, ki ima vrednost pre.
To besedilo ima tri presledke med besedami in lastnost oblikovanja white-space, ki ima vrednost pre-wrap.
To besedilo ima tri presledke med besedami in lastnost oblikovanja white-space, ki ima vrednost pre-line.
To besedilo ima tri presledke med besedami in lastnost oblikovanja white-space, ki ima vrednost break-spaces.
Pomni: Lastnost white-space ne vpliva samo na presledke, ampak tudi na ohranjanje prelomov vrstic in na to, ali brskalnik vrstice lomi samodejno.
vertical-align
Lastnost vertical-align navpično poravna vrstične elemente, elemente inline-block ali celice tabel. Ne uporabljamo je za navpično poravnavo običajnih blokovnih elementov.
| Vrednost | Pomen |
|---|---|
baseline |
poravna osnovno črto elementa z osnovno črto okoliškega besedila |
middle |
poravna element približno na sredino glede na okoliško besedilo |
sub |
spusti element na položaj, primeren za indeks |
super |
dvigne element na položaj, primeren za eksponent |
text-top |
poravna zgornji rob elementa z vrhom besedila nadrejenega elementa |
text-bottom |
poravna spodnji rob elementa z dnom besedila nadrejenega elementa |
top |
poravna vrh elementa z vrhom vrstice |
bottom |
poravna dno elementa z dnom vrstice |
| % | dvigne ali spusti element relativno glede na line-height |
| dolžina | dvigne ali spusti element za izbrano dolžino |
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:baseline"><em>baseline</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:middle"><em>middle</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:sub"><em>sub</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:super"><em>super</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:text-top"><em>text-top</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:text-bottom"><em>text-bottom</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:top"><em>top</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:bottom"><em>bottom</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:15px"><em>15px</em></mark>.</p>
<p style="line-height:25px">Označeno besedilo ima vertikalno poravnavo <mark style="vertical-align:-15px"><em>-15px</em></mark>.</p>Označeno besedilo ima vertikalno poravnavo baseline.
Označeno besedilo ima vertikalno poravnavo middle.
Označeno besedilo ima vertikalno poravnavo sub.
Označeno besedilo ima vertikalno poravnavo super.
Označeno besedilo ima vertikalno poravnavo text-top.
Označeno besedilo ima vertikalno poravnavo text-bottom.
Označeno besedilo ima vertikalno poravnavo top.
Označeno besedilo ima vertikalno poravnavo bottom.
Označeno besedilo ima vertikalno poravnavo 15px.
Označeno besedilo ima vertikalno poravnavo -15px.
Pozor: Lastnost vertical-align ni namenjena splošni navpični poravnavi blokovnih elementov. Uporabljamo jo predvsem pri vrstičnih elementih in celicah tabel.
direction
Lastnost direction določa osnovno smer izpisa besedila. Ta je lahko od leve proti desni (ltr) ali od desne proti levi (rtl). Pri vrstičnih elementih ima učinek skupaj z lastnostjo unicode-bidi.
| Vrednost | Pomen |
|---|---|
ltr |
smer izpisa besedila od leve proti desni, privzeta vrednost |
rtl |
smer izpisa besedila od desne proti levi |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p class="ltr">To besedilo se izpisuje od leve proti desni.</p>
<p class="rtl">To besedilo se izpisuje od desne proti levi.</p>.ltr { direction: ltr; }
.rtl { direction: rtl; }unicode-bidi
Lastnost unicode-bidi uporabljamo skupaj z lastnostjo direction, kadar želimo natančneje določiti prikaz dvosmernega besedila v istem dokumentu. Za dvosmerno besedilo je pogosto še bolj smiselna semantična uporaba ustreznih HTML elementov, lastnosti CSS pa uporabimo takrat, ko želimo natančnejši nadzor nad prikazom.
| Vrednost | Pomen |
|---|---|
normal |
ne doda posebne ravni dvosmernega oblikovanja, privzeta vrednost |
embed |
doda novo raven smeri besedila |
bidi-override |
prepiše običajen vrstni red dvosmernega besedila |
initial |
ta vrednost naj bo privzeta |
inherit |
vrednost podeduje od nadrejenega elementa |
<p class="primer1">ABC 123 DEF</p>
<p class="primer2">ABC 123 DEF</p>.primer1 {
direction: ltr;
unicode-bidi: normal;
}
.primer2 {
direction: rtl;
unicode-bidi: bidi-override;
}Pomni: Lastnosti direction in unicode-bidi uporabljamo takrat, ko želimo nadzorovati smer in vrstni red prikaza besedila, ne pa za običajno oblikovanje navadnega slovenskega besedila.