CSS - Tekst


Formatiranje teksta pomoću CSS-a

CSS pruža nekoliko svojstava koja vam omogućavaju da vrlo lako i učinkovito definišete različite stilove teksta kao što su boja, poravnavanje, razmak, ukras, transformacija itd. Najčešće korištena svojstva teksta su: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing i druga. Ova svojstva vam daju preciznu kontrolu nad vizualnim izgledom znakova, riječi, razmaka i tako dalje. Pogledajmo kako postaviti ova svojstva teksta za element.



Boja teksta

Boja teksta je definisana svojstvom CSS boje color. Pravilo stila u sljedećem primjeru definisaće zadanu boju teksta za stranicu

body {
    color: #434343;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje boje teksta pomoću CSS-a</title>
<style>
  h1 {
    color: #ff0000;
  }
  p {
    color: green;
  }
</style>
</head>
<body>
  <h1>IT TUTORIJALI</h1>
  <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>   

Iako se čini da će svojstvo boje izgledati kao dio CSS teksta, zapravo je samostalno svojstvo u CSS-u. Pogledajte lekciju za CSS Boje da biste saznali više o svojstvu boje.



Poravnanje teksta

Svojstvo poravnanje teksta (text-align) koristi se za postavljanje horizontalnog poravnanja teksta. Tekst se može poravnati na četiri načina: u lijevo, u desno, u sredinu ili na cijelu veličinu stranice (poravnat sa lijevom i desnom marginom). Pogledajmo primjer da bismo shvatili kako ovo svojstvo u osnovi funkcioniše.

h1 {
    text-align: center;
}
p {
    text-align: justify;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje poravnanja teksta pomoću CSS-a</title>
<style>
    h1 {
        text-align: center;
    }
    p {
        width: 300px;
        text-align: justify;
    } 
</style>
</head>
<body>
    <h1>Ovo je neki naslov</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
    eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
    dapibus nec turpis vel, semper malesuada ante. Vestibulum id 
    metus ac nisl bibendum scelerisque non non purus. Suspendisse 
    varius nibh non aliquet sagittis.</p>
</body>
</html>  

Pogledajmo sljedeću ilustraciju da bismo razumjeli što te vrijednosti zapravo znače.




Dekoracija teksta

Svojstvo ukrašavanja teksta (text-decoration) koristi se za postavljanje ili uklanjanje ukrasa iz teksta. Ovo svojstvo obično prihvata jednu od sljedećih vrijednosti: underline, overline, line-through, i none. Izbjegavajte podvlačenje teksta koji nije veza, jer to može zbuniti posjetitelja. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje ukrašavanja teksta pomoću CSS-a</title>
<style>            
    h1 {
        text-decoration:overline;
    }
    h2 {
        text-decoration:line-through;
    }
    h3 {
        text-decoration:underline;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <h2>IT TUTORIJALI</h2>
    <h3>IT TUTORIJALI</h3>
</body>
</html>


Uklanjanje podvučenog teksta iz veza

Svojstvo text-decoration široko se koristi za uklanjanje zadanog podvučenog teksta s HTML hiperveza. Možete dodati i neke druge vizualne znakove kako biste se istakli od uobičajenog teksta, na primjer, koristeći isprekidanu liniju umjesto pune. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklanjanje zadanog podcrtavanja iz HTML veza</title>
<style>             
    a {
        text-decoration: none;
        border-bottom: 1px dotted;
    }
    a:hover {
        border-bottom: none;
    }
</style>
</head>
<body>
    <p>Postavite pokazivač miša <a href="#">na link!</a></p>
</body>
</html>


Transformacija teksta

Svojstvo transformacije teksta text-transform koristi se za postavljanje slučajeva u tekstu. Tekst se često piše u miješanom obliku. Međutim, u određenim situacijama možda ćete htjeti prikazati svoj tekst u potpuno drugom izgledu. Pomoću ovog svojstva možete promijeniti tekstualni sadržaj elementa u velika ili mala slova, ili napisati velika slova svake riječi bez izmjene izvornog teksta. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

h1 {
    text-transform: uppercase;
}
h2 {
    text-transform: capitalize;
}
h3 {
    text-transform: lowercase;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje transformacije teksta pomoću CSS-a</title>
<style>
    h1 {
        text-transform: uppercase;
    }
    h2 {
        text-transform: capitalize;
    }
    h3 {
        text-transform: lowercase;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <h2>IT TUTORIJALI</h2>
    <h3>IT TUTORIJALI</h3>
</body>
</html>  


Uvlačenje teksta

Svojstvo uvlačenja teksta text-indent koristi se za postavljanje uvlačenja prvog reda teksta u blok teksta. Obično se obavlja umetanjem praznog prostora prije prvog reda teksta. Veličina uvlačenja može se odrediti korištenjem postotka (%), vrijednosti dužine u px, em itd. Sljedeće pravilo stila uvući će prvi red odlomaka za 100px piksela.

p {
    text-indent: 100px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje uvlačenja teksta pomoću CSS-a</title>
<style> 
    p {
        text-indent: 100px;
    }       
</style>
</head>
<body>
    <h1>CSS uvlačenje teksta</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
    eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
    dapibus nec turpis vel, semper malesuada ante. Vestibulum id 
    metus ac nisl bibendum scelerisque non non purus. Suspendisse 
    varius nibh non aliquet sagittis.</p>
</body>
</html>


Razmak slova

Svojstvo razmaka slova (letter-spacing ) koristi se za postavljanje dodatnog razmaka između znakova teksta. Ovo svojstvo može uzeti vrijednost dužine u pikselima, em-sima itd. Takođe može prihvatiti negativne vrijednosti. Prilikom postavljanja razmaka slova, vrijednost dužine označava razmak pored zadanog inter-character razmaka. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje razmaka između slova pomoću CSS-a</title>
<style>       
    h1 {
        letter-spacing: -3px;
    }
    p {
        letter-spacing: 10px;
    }   
</style>
</head>
<body>
    <h1>IT TUTORIJALI.</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
</body>
</html>  
             


Razmak riječi

Svojstvo razmaka riječi (word-spacing) koristi se za određivanje dodatnog razmaka između riječi. Ovo svojstvo može prihvatiti vrijednost dužine u pikselima, em-sima itd. Negativne vrijednosti su takođe dozvoljene. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

p.normal {
    word-spacing: 20px;
}
p.justified {
    word-spacing: 20px;
    text-align: justify;
}
p.preformatted {
    word-spacing: 20px;
    white-space: pre;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje razmaka riječi pomoću CSS-a</title>
<style> 
    p.one {
        word-spacing: 20px;
    }
    p.two {
        width: 150px;
        word-spacing: 20px;
        text-align: justify;
    }
    p.three {
        word-spacing: 20px;
        white-space: pre;
    }      
</style>
</head>
<body>
    <p class="one">Ovo je običan paragraf.</p>
    <hr>
    <p class="two">Imajte na umu da se razmak između riječi ovog 
paragrafa razlikuje kako bi se opravdao tekst, čak i ako je vrijednost
 svojstva razmaka riječi postavljena na 20 piksela.</p>
    <hr>
    <p class="three">Imajte na umu razmak između riječi
    ovog stava veći su od normalnog razmaka
        čak i ako je razmak sačuvan.</p>
</body>
</html>                            


Visina linije reda

Svojstvo visine reda (line-height) koristi se za postavljanje visine linije teksta. Naziva se i vodećim i uobičajeno se koristi za postavljanje udaljenosti između redova teksta. Vrijednost ovog svojstva može biti broj, postotak (%) ili dužina u pikselima, em-sima itd. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

p {
    line-height: 1.2;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje visine linije pomoću CSS-a</title>
<style>       
    p {
        line-height: 1.2;
        border: 1px solid #00ff00;
    }
    div {
        line-height: 200%;
        border: 1px solid #ff0000;
    }
</style>
</head>
<body>
    <h1>Promijenite vrijednosti da biste vidjeli kako radi</h1>
    <p>Svojstvo<code> line-height</code> postavlja visinu između 
    
    redova teksta. <br> Visina reda ovog paragrafa navodi se pomoću 
    broja.</p>
    <div>Svojstvo <code>line-height</code> postavlja visinu između
    redova teksta. <br> Visina reda ovog paragrafa navedena je u 
    postocima.</div>
</body>
</html>

Kada je vrijednost broj, visina reda izračunava se množenjem veličine fonta elementa s brojem. Iako su postotne vrijednosti u odnosu na veličinu fonta elementa.

Ako je vrijednost svojstva visine reda veća od vrijednosti veličine fonta za element, ta se razlika (koja se naziva "vodeća" (leading)) prereže na pola (naziva se "pola vodeće" (half-leading)) i ravnomjerno raspoređuje na gornji i donji red okvira. Progledajmo primjer:

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje visine linije pomoću CSS-a</title>
<style>  
    p {
        font-size: 14px;
        line-height: 20px;
        background-color: #f0e68c;
    }  
</style>
</head>
<body>
    <h1>Promijenite vrijednosti da biste vidjeli kako radi.</h1>
    <p>Svojstvo <code>line-height</code> postavlja visinu između 
    redova teksta. <br> Visina reda ovog paragrafa određuje se pomoću
    vrijednosti piksela.</p>
</body>
</html>