|
Ova svojstva definiraju razmještaj teksta u dokumentu te još neke detalje koji su nadgradnja izbora izgleda pojedinih znakova, opisanih u prethodnoj lekciji.
letter-spacing
Ovo svojstvo definira razmak između pojedinih znakova u tekstu.
p {
letter-spacing: 0.5em;
}
<p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
line-height
Definira razmak između dva reda teksta u istom odlomku (eng. baseline).
p {
font-size: 9pt;
line-height: 26pt;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
 Pri definiranju visine redova teksta treba paziti na veličinu znakova da se redovi ne bi preklapali.
-
text-decoration
Opisuje dekoracije koje se dodaju tekstu. Može poprimiti vrijednosti: none, underline, overline, line-through i blink. Boje dekoracija pojavljuju se u boji teksta.
Vrlo često se koristi kod definiranja efekata na linkovima, kako ste to mogli vidjeti u lekciji Pseudoklase.
text-transform
Pretvara slova iz teksta u velika ili mala, ovisno o izabranoj vrijednosti svojstva. Moguće vrijednosti su capitalize, uppercase, lowercase. Capitalize postavlja početno slovo u svakoj riječi u veliko slovo. Uppercase postavlja sva slova u velika, a lowercase u mala, bez obzira na izvorno slovo u HTML kôdu.
p {
text-transform: capitalize;
}
<p>Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
text-align
Vodoravno poravnanje teksta. Može se primijeniti samo na blok elemente, a moguće vrijednosti su: left, right, center i justify.
p {
text-align: center;
}
<p>Lorem ipsum dolor sit amet,<br>
consectetur adipisicing elit,<br>
sed do eiusmod tempor incididunt<br>
ut labore et dolore magna aliqua.</p>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
text-indent
Prvi redak lijevo ili obostrano poravnatog paragrafa je često uvučen za određenu vrijednost.
p {
text-indent: 45px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
