CSS Osnove

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

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