CSS svojstva

Svojstva teksta


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.




CARNet