Stilizovanje teksta

font-weight

Ovaj parametar je u bliskoj vezi sa HTML tagovima <b> i <strong> čiju smo namenu objasnili u izlaganju vezanom za html. Razlika je u tome što CSS parametrom font-weight možemo finije da definišemo jačinu podebljanja. Moguće tekstualne vrednosti ovog atributa su: normal, light, bold, lighter i bolder a brojne 100,200,300,400,500,600,700,800 i 900.

Pored vrednosti normal, koja je ekvivalent tekstu napisanom bez ikakvih stilizovanja, postoje i bold koji je ekvivalent pomenutim tagovima b i strong. Kod definisanja vrednosti atributa izražene brojevima, 400 označava normalnu debljinu karaktera dok 700 predstavlja ekvivalent vrednosti bold kao i tagovima b i strong.

U zavisnosti od mogućnosti samog fonta moguće je simulirati sve ove finese od 100 do 900. Većina fontova, pak, ima dva stanja po pitanju debljine: normal i bold.

letter-spacing

Ovaj parametar definiše rastojanje izmedju znakova u okviru teksta, tj. reči. Najčešće se izražava u pikselima i može imati kako pozitivne tako i negativne vrednosti.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

letter-spacing: 2px;

}

h2 {

letter-spacing: -3px;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

</body>

</html>

CSS-struktura-13

word-spacing

Parametar sličan parametru letter-spacing sa razlikom što definiše razmak izmedju reči u rečenici.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

word-spacing: 10px;

}

h2 {

word-spacing: -10px;

}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

</body>

</html>

CSS-struktura-14

text-align

Ukoliko se tekst nadje unutar nekog elementa, ćelije tabele ili diva, moguće ga je poravnati po nekoj od ivica left/right ili razvući po obe ivice ili postaviti centralno. Daćemo primer na kome ćete najbolje videti kakav efekat ima svaka od vrednosti.

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<title>Poravnanje teksta</title>

<style>

body{font-size:70%;}

div{width:300px;margin-right:30px;float:left;}

#levi {text-align:left;}

#razvucen {text-align:justify;}

#desni {text-align:right;}

#centralno{text-align:center;}

</style>

</head>

<body>

<div id=”levi”>

<h1>Levo poravnat </h1>

<p>Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.</p>

</div>

<div id=”centralno”>

<h1>Centralno poravnat </h1>

<p >Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.</p>

</div>

<div id=”razvucen” >

<h1>Razvucen </h1>

<p >Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.</p>

</div>

<div id=”desni”>

<h1>Desno poravnat </h1>

<p >Lorem Ipsum је једноставно модел текста који се користи у штампарској и словослагачкој индустрији. Lorem ipsum је био стандард за модел текста још од 1500. године, када је непознати штампар узео кутију са словима и сложио их како би направио узорак књиге. Не само што је овај модел опстао пет векова, него је чак почео да се користи и у електронским медијима, непроменивши се. Популаризован је шездесетих година двадесетог века заједно са листовима летерсета који су садржали Lorem Ipsum пасусе, а данас са софтверским пакетом за прелом као што је Aldus PageMaker који је садржао Lorem Ipsum верзије.</p>

</div>

</body>

</html>

Izgled u pretraživaču:

CSS-struktura-15

text-decoration

Ovaj parametar je zadužen za podvlačenje teksta, precrtavanje i nadvlačenje teksta. Najviše se koristi vrednost underline za podvlačenje i parametar line-through za precrtavanje. Vrednost none koristi se kod linkova koji po definiciji imaju podvučen tekst linka kada se želi da tekst linka na neki drugi način bude naglašen (stavljanjem druge boje u odnosu na ostatak teksta, na primer)

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<title>Poravnanje teksta</title>

<style>

div{width:300px;margin-right:30px;float:left;}

#podvucen {text-decoration:underline;}

#nadvucen {text-decoration:overline;}

#precrtan {text-decoration:line-through;}

#noramalan{text-decoration:none;}

</style>

</head>

<body>

<div id=”podvucen”>

<h1>Podvucen tekst</h1>

<div id=”nadvucen”>

<h1>Nadvucen</h1>

<div id=”precrtan” >

<h1>Precrtan </h1>

</div>

<div id=”normalan”>

<h1>Bez icega</h1>

</div>

</body>

</html>

U pretraživaču:

CSS-struktura-16

text-transform

Služi za pretvaranje teksta u mala ili velika slova kao i automatsko postavljanje prvog slova u reči kao velikog. Odgovarajuće vrednosti parametra su lowercase, uppercase i capitalize.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {text-transform: uppercase;}

h2 {text-transform: lowercase;}

p{text-transform:capitalize;}

</style>

</head>

<body>

<h1>Ovo je recenica sa uppercase vrednosti atributa text-transform</h1>

<h2>Ovo je recenica sa lowercase vrednosti atributa text-transform</h2>

<p>Ovo je recenica sa capitalize vrednosti atributa text-transform</p>

</body>

</html>

CSS-struktura-17

text-indent

Koristi se za naglašavanje prvog reda paragrafa, kada se prvi red uvlači u odnosu na ostatak teksta ili ispušta u odnosu na ostale redove zadavanjem negativnih vrednosti. Vrednosti se zadaju u pikselima.

text-indent: 50px;

CSS-struktura-18

text-shadow

Ovo svojstvo može se primeniti na tekst u vidu senke. Sintaksa je sledeća:

text-shadow: 2px 2px 8px #FF0000;

Prva vrednost govori kolika je senka po horizontali,druga po vertikali, treća koliko još piksela senka bledi i četvrta definiše boju senke.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

   text-shadow: 2px 2px 8px red;

}

</style>

</head>

<body>

<h1>Text-shadow with blur effect</h1>

</body>

</html>

Prikaz u pretraživaču:

CSS-struktura-19

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn