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 |