Načrtovanje in razvoj spletnih aplikacij

Oblikovanje besedila s CSS

Lastnosti CSS, ki jih lahko definiramo besedilu


color

Lastnost color določa barvo besedila. Kako določimo barvo je opisano na strani Barve v CSS.

<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.00)

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 različne okraske, ki jih lahko dodamo besedilu.

Vrednost Pomen
none brez okraskov
underline podčrtano
overline nadčrtano
line-through prečrtano
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>
.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 }

none, underline, overline, line-through

kombinirano

text-transform

Lastnost text-transform določa pretvorbo besedila.

Vrednost Pomen
none brez pretvorbe
capitalize velika začetnica
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</span>,
   <span class="uppercase">uppercase</span>,
   <span class="lowercase">lowercase</span>
</p>
<p class="kombinirano">kombinirano</p>
.none { text-transform: none }
.capitalize { text-transform: capitalize }
.uppercase { text-transform: uppercase }
.lowercase { text-transform: lowercase }

none, capitalize, uppercase, lowercase

text-align

Lastnost text-align določa vodoravno poravnavo besedila.

Vrednost Pomen
left leva poravnava
right desna poravnava
center sredinska poravnava
justify obojestranska poravnava
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>
.none { text-align: left }
.capitalize { text-align: right }
.uppercase { text-align: center }
.lowercase { text-align: justify }

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.

text-indent

Lastnost text-indent določa odmik prve vrstice besedila.

Če odmik vrstice določimo kot dolžino, ta ostane nespremenjen, ne glede na širino odstavka. Na druge vrstice odstavka ta lastnost nima vpliva. V primeru, da odmik prve vrstice nastavimo v %, se ob spremembi velikosti okna brsklanika spremeni tudi širina odstavka in posledično tudi odmik prve vrstice. Na druge vrstice odstavka pa ta lastnost nima vpliva.

Vrednost Pomen
dolžina vrednost odmika prve vrstice v mm, cm, in, pt, pc, em, ex, px
% vrednost odmika prve vrstice v %
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

Primer odmika 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.

Vrednost Pomen
h-shadow velikost sence v horizontalni smeri (zahtevana vrednost, lahko je tudi negativna )
v-shadow velikost sence v vertikalni smeri (zahtevana vrednost, lahko je tudi negativna )
blur razpršenost sence (opcijska vrednost)
color barva sence (opcijska 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 horizontalno in 3px vertikalno srebrne barve.</>
<p class="shadow2">To besedilo ima senco 1px horizontalno in 1px vertikalno oranžne barve.</>
<p class="shadow3">To besedilo ima senco -2px horizontalno, -2px vertikalno zelene barve in 3px razpršenosti sence.</>
.shadow1 { text-shadow: 3px 3px silver }
.shadow2 { text-shadow: 1px 1px orange}
.shadow3 { text-shadow: -2px -2px 3px green }

To besedilo ima senco 3px horizontalno in 3px vertikalno srebrne barve.

To besedilo ima senco 1px horizontalno in 1px vertikalno oranžne barve.

To besedilo ima senco -2px horizontalno, -2px vertikalno zelen barve in 3px razpršenosti sence.

Brskalnik Internet Explorer verzije 9 in starejši ne podpirajo senc na besedilu.


letter-spacing

Lastnost letter-spacing določa razmik med znaki besedila.

Vrednost Pomen
normal brez dodatnega prostora med znaki, privzeta vrednost
dolžina vrednost razmika med znaki v mm, cm, in, pt, pc, em, ex, px
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa
<p clas="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.

Vrednost Pomen
normal brez dodatnega prostora med besedami, privzeta vrednost
dolžina vrednost razmika med besedami v mm, cm, in, pt, pc, em, ex, px
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa
<p clas="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

white-space je lastnost, ki določa obravnavo belih znakov v besedilu. Med bele znake spadajo presledki, tabulatorji, znaki za skok v novo vrsto in podobni znaki brez grafične podobe.

Brskalnik lahko več zaporednih belih znakov združi v en sam presledek, ali pa obravnava vsak bel znak posebej. Kaj naj stori brskalnik, ko mu zmanjka prostora v tekoči vrstici, določa vrednost lastnosti white-space:

Vrednost Pomen
normal združuje bele znake, lomi vrstice
nowrap združuje bele znake, ne lomi vrstic
pre ne združuje belih znakov, ne lomi vrstic
pre-wrap ne združuje belih znakov, lomi vrstice
pre-line združuje samo presledke, lomi vrstice
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa
<p class="normal">To   besedilo   ima   tri   presledke   med   besedami   in   lastnost   
oblikovanja   <em>white-space</em>,   ki   ima   vrednost   <em>normal</em>.</p>
<p class="nowrap">To   besedilo   ima   tri   presledke   med   besedami   in   lastnost   
oblikovanja   <em>white-space</em>,   ki   ima   vrednost   <em>nowrap</em>.</p>
<p class="pre">To   besedilo   ima   tri   presledke   med   besedami   in   lastnost   
oblikovanja   <em>white-space</em>,   ki   ima   vrednost   <em>pre</em>.</p>
<p class="pre-wrap">To   besedilo   ima   tri   presledke   med   besedami   in   lastnost   
oblikovanja   <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   
oblikovanja   <em>white-space</em>,   ki   ima   vrednost   <em>pre-line</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 }

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.

vertical-align

Z oblikovno lastnostjo vertical-align navpično poravnamo element znotraj vrstice ali drugega elementa.

Vrednost Pomen
baseline poravna osnovno črto elementa z osnovno črto elementa, v katerem je vsebovan
middle poravna vodoravno črto po sredini elementa z osnovno črto elementa, v katerem je vsebovan, dvignjeno za 0.5ex
sub spusti osnovno črto elementa na ustrezno višino za pisanje indeksov (velikosti pisave pri tem ne spremeni)
super dvigne osnovno črto elementa na ustrezno višino za pisanje eksponentov (velikosti pisave pri tem ne spremeni)
text-top poravna zgornji rob elementa z vrhom vsebine elementa, v katerem je vsebovan
text-bottom poravna spodnji rob elementa z dnom vsebine elementa, v katerem je vsebovan
top poravna vrh elementa z vrhom vrstične škatle
bottom poravna dno elementa z dnom vrstične škatle
% dvigne ali spusti element relativno glede na višino vrstice (vrednost 0% pomeni isto kot baseline)
dolžina dvigne ali spusti element za izbrano dolžino (vrednost 0 pomeni isto kot baseline)
<p class="baseline">Označeno besedilo ima vertikalno poravnavo baseline.</p>
<p class="midlle">Označeno besedilo ima vertikalno poravnavo midlle.</p>
<p class="sub">Označeno besedilo ima vertikalno poravnavo sub.</p>
<p class="super">Označeno besedilo ima vertikalno poravnavo super.</p>
<p class="text-top">Označeno besedilo ima vertikalno poravnavo text-top.</p>
<p class="text-bottom">Označeno besedilo ima vertikalno poravnavo text-bottom.</p>
<p class="top">Označeno besedilo ima vertikalno poravnavo top.</p>
<p class="bottom">Označeno besedilo ima vertikalno poravnavo bottom.</p>
<p class="dolzina15px">Označeno besedilo ima vertikalno poravnavo 15px.</p>
<p class="dolzina-15px">Označeno besedilo ima vertikalno poravnavo -15px.</p>
.baseline { vertical-align: baseline }
.midlle { vertical-align: midlle }
.sub { vertical-align: sub }
.super { vertical-align: super }
.text-top { vertical-align: text-top }
.text-bottom { vertical-align: text-bottom }
.top { vertical-align: top }
.bottom { vertical-align: bottom }
.dolzina15px { vertical-align: 15px }
.dolzina-15px { vertical-align: -15px }

Označeno besedilo ima vertikalno poravnavo baseline.

Označeno besedilo ima vertikalno poravnavo midlle.

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.

direction

Lastnost direction usmeri izpis besedila. Ta je lahko od leve proti desni, kar je privzeta vrednost, ali pa od desne proti levi.

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

unicode-bidi

Lastnost unicode-bidi se uporablja skupaj z lastnostjo direction, za dodatno raven besedila, da je v istem dokumentu lahko prikazan večjezično.

Vrednost Pomen
normal ne vključuje dodatne ravni večjezičnosti, privzeta vrednost
embed kreira dodatno raven večjezičnosti
bidi-override kreira dodatno raven večjezičnosti, preusmeri besedilo
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa