Stilovi fontova

Pomoću CSS-a možemo relativno lako izmijeniti naèin na koji se naš tekst prikazuje u web pretraživaču. Za razliku od standardnog HTML-a CSS nam omogućava puno veću fleksibilnost i kontrolu nad tekstom.


Šta sve možemo urediti sa CSS-om?


Možemo uređivati sljedeće atribute:


1. color
2. font-weight
3. font-family
4. font-size
5. font-variant
6. font-style
7. text-decoration
8. text-transform



Smatramo da je ovaj dio CSS-a koji uređuje font najvažniji pa ćemo u kratkim crtama proći svaki atribut teksta. Kombiniranjem ovih atributa možete postići veoma dobar efekt, pogotovo ako napravite klase koje ćete koristiti u dijelovima vaše web stranice (opisi, reklame, naslovi, linkovi itd.).


Color


Pomoću ovog atributa podešavamo boju teksta kojeg ispisujemo. Predefinirana boja teksta ovisi o web pregledniku zato je preporučljivo istaknuti boju teksta ako nam je važno u kojoj će se boji ispisati.


Font-weight


Font-weight određuje koliko tekst treba biti podebljan tj. "težak" pri prikazu. Za vrijednosti možemo zadati numeričke vrijednosti ili ključne riječi. Ključne rije#269;i mogu biti normal, bold, bolder, lighter. Bolder i lighter kažu pretraživaču da tekst mora biti tamniji odnosno svjetliji za nijansu od teksa u parent elementu.
Numeričke vrijednosti mogu biti 100, 200, 300 .... 900 s tim da je normalna vrijednost 400, a bold ima vrijednost 700.


Font-family


Ovaj element predstavlja listu fontova koje preglednik mora ispisati. Preglednik najprije traži prvi font iz liste i pokušava ga postaviti za ispis, a onda hijararhijski ostale u listi.
Kao vrijednost atribut uzima ime fonta koje mora koristiti. Svako ime u listi se odvaja zarezom.
Predefinirana vrijednost fonta također zavisi od preglednika do preglednika i ne postoji standardni font za sve preglednike.


Font-size


Font-size određuje koliku veličinu fonta preglednik mora prikazati. U HTML-u smo ograničeni samo na 7 predefiniranih vrijednosti, ali nam zato CSS dopušta puno ve#263;u fleksibilnost. Ne samo da možemo određivati veličinu numerički nego još možemo odrediti i mjerne jedinice. Mjerne jedinice koje možemo koristiti su sljedeće:


1. point
2. ems
3. exs
4. picas
5. pixels
6. inches
7. millimeters
8. centimeters



Također možemo koristiti i relativne ključne riječi za podešavanje fonta - larger i smaller, kao i apsolutne ključne riječi:


1. xx-small
2. x-small
3. medium
4. large
5. x-large
6. xx-large



Zapamtimo da predefinirana vrijednost zavisi od preglednika do preglednika.


Font-variant


Ovdje možemo birati dva načina prikaza teksta, a to su normal ili small-caps. Normal će prikazati tekst onakav kakav je u originalu dok small-caps prikazuje tekst ispisan malim slovima kao umanjena velika slova.


Font-style


Tradicionalno imamo nekoliko stilova koje možemo primijeniti na tekst. CSS nam upravo to omogućava sa ovom opcijom. Možemo koristiti tri stila: normal, italic i oblique. Koristeći italic i oblique vizualno dobijemo isti stil.


Font-decoration


U ovom dijelu možemo primijeniti efekte na tekst koji prikazujemo. Ti efekti mogu biti: none, underline, overline, line-through, blink. Efekte možemo zapisati kao listu ako koristimo više od jednoga i tada ih odvajamo zarezom.


Text-transform


Text-transform omogućava transformaciju cijelog teksta u velika, mala slova ili da prvo slovo svake riječi bude veliko. Vrijednosti koje se mogu staviti su:


1. capitalize
2. uppercase
3. lowercase



Osim ovih opcija možete text-transform postaviti na none da se osigurate da tekst neće imati nikakve efekte.


Primjeri korištenja


Idemo vidjeti kako u praksi rade svi ovi tekstualni efekti kroz nekoliko primjera.



<font style="color: #ff0000; font-weight: 900;
font-family: Arial"> Kako koristiti CSS na tekstu!</font>
Kako koristiti CSS na tekstu!

<a href=# style="text-decoration: overline; font-size:10px">
Ovo je link
</a>
Ovo je link

<font style="text-transform:capitalize">
Ovo je primjer upotrebe capitalize text-transform</font>
Ovo je primjer upotrebe capitalize text-transform

Korištenje stilova u tablicama

Tablice su neizbježan dio HTML-a i stalno su nam potrebne. Koriste se i u dizajnerske svrhe kao i za tablični prikaz podataka što je i njihova osnovna namjena. Bilo kako bilo ne moramo koristiti predefinirani izgled tablica i zašto ih ne urediti kada već imamo tu mogućnost. Atributi koji nam stoje na raspolaganju, između ostalih, su:


1. border-width
2. border-style
3. border-color
4. border
5. height
6. width
7. float
8. clear


Border-width određuje debljinu ruba tablice. Moguće ključne riječi su thin, medium thick i none. Naravno ako izaberemo none u tablici nećemo vidjeti nikakav rub.

Border-style određuje stil prikaza ruba tablice. Ovdje imamo puno više opcija i ključnih riječi pa ćemo ih samo nabrojati, a u primjeru kasnije vidjeti njihovu upotrebu. Stil može biti none, dotted, dashed, solid, double, groove, ridge, inset, outset.


Border-color određuje boju ruba tablice. Možemo definirati i boju za svaku pojedinu stranu tablice upotrebljavajući elemente border-top-color, border-left-color, border-bottom-color, border-right-color.


Height i width određuju širinu i visinu tablice.

Atribut float smješta element lijevo ili desno i oko njega stavlja tekst. Za razliku od float, clear atribut ne dopušta da se tekst smjesti oko elementa u tablici. I jedan i drugi mogu imati vrijednost left, right i none.


Sada ćemo napraviti primjer korištenja stilova opisanih iznad. U ovom primjeru su stilovi pisani za svaki tag tablice. Puno jednostavnije i vizualno pregledniji način zapisa ovih stilova je ako napravimo klase za tagove table, tr i td. Nakon definiranja klasa, tagove tablice samo referiramo prema tim klasama što je puno zgodnije i preporučljivije.




<table style="color:505050;width:400px;border: 1px
solid #6699cc;border-collapse:collapse">
<tr style="height:20px">
<td style="border-bottom:2px solid;background-color:
#a8a8a8;font-size: 11px;
text-align: center;color: #404040;" colspan="2">
Stiliziranu tablicu je mnogo ljepše vidjeti
</td>
</tr>
<tr style="height:20px">
<td style="font-size: 11px;text-align: center;
color: #404040;border-bottom: 1px dotted #6699CC;border-right:
1px dotted #6699cc;">
Vrijednost:
</td>
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px dotted #6699CC;">
10000$
</td>
</tr>
<tr style="height:20px">
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px
dotted #6699CC;border-right:
1px solid #6699cc;">
Uplata:
</td>
<td style="font-size: 11px;
text-align: center;color: #404040;border-bottom: 1px dotted #6699CC;">
2000$
</td>
</tr>
<tr style="height:20px">
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px dotted #6699CC;border-right:
1px dotted #6699cc;">
Ukupno:
</td>
<td style="font-size: 11px;text-align: center;color: #404040;
border-bottom: 1px dotted #6699CC;">
2000$
</td>
</tr>

</table>

CSS-om do balona za komentare

Ovo je jedna od brzih tehnika koje se već duže vrijeme primjenjuju na Internetu - kako od jednostavnog div elementa dobiti lijepo sređen tekstualni okvir. Ovakav okvir možemo koristiti za komentare čitatelja na našim stranicama. Ovaj kod pravimo u tri koraka. Prvo napravimo dodatnu sličicu koju ćemo koristiti. Mi smo se odlučili za ovu:





Nakon ovoga napišimo CSS kod i stavimo ga unutar head taga. CSS treba izgledati ovako:



<style type="text/css">

.komentar{
background-color:#D3D2D1;
width: 400px;
padding: 10px;
}

.podnozje{
background: url(strelica.gif) 15px 0 no-repeat;
padding-left: 60px;
padding-top: 6px;
font-size: smaller;
}
</style>




Sada moramo samo upotrijebiti ove klase.



<div class="komentar">
Ovo je tijelo komentara i ono dolazi u ovom div elementu.

A najbolje je to što se ne trebamo brinuti koliko teksta se
nalazi unutar
ovog div elementa jer &#263;e sli&#269;ica uvijek biti
dobro pozicionirana.
</div>

<div class="podnozje">
Napisano 27.rujna.2007 od Admin
</div>

Dodatno uredite HTML liste

Liste možemo dodatno urediti koristeći CSS. Možemo mijenjati sliku, boju, izgled, itd. Ovaj CSS kod podržavaju svi preglednici tako da ne bismo trebali imati problema sa implementacijom. Atributi koje možemo koristiti su sljedeći:
list-style-image
list-style-position
list-style-type
marker-offset

Svi atributi mijenjaju izgled markera u listama. Marker je znak koji se pojavljuje prije svakog zapisa u listi. Možemo postaviti vlastito dizajnirani marker, možemo mijenjati nekoliko markera koji su već predefinirani te možemo mijenjati tip markera.


Prvi atribut, list-style-image, prima vrijednost u obliku putanje do slike koju treba staviti kao marker.



<ul style="list-style-image: url('slike/marker.gif');">

<li> HTML </li>
<li> CSS </li>
<li> PHP </li>

</ul>
HTML
CSS
PHP



Različite markere koji su definirani i koji se koriste u uređenim listama koristimo na sljedeći način:



<ol style="list-style-type: decimal;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: lower-roman;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: upper-roman;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: lower-alpha;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: upper-alpha;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS



Za neuređene liste imamo četiri predefinirana izgleda lista. Evo kako oni izgledaju:



<ul style="list-style-type: disc">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: circle">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: square">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: none">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS



I za kraj da vidimo kako se koristi atribut marker-offset.



<ul style="list-style-position: inside">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-position: outside">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

Zaobljeni rubovi sa CSS-om

Danas je nemoguće napraviti tekstualni okvir sa zaobljenim rubovima upotrebljavajući samo HTML. Ovdje ćemo vidjeti upotrebu CSS-a i nekoliko slika da bismo dobili tekstualne okvire sa zaobljenim rubovima. Prednost je ta što se ovako dizajniran okvir sam prilagođava količini teksta te rubovi uvijek ostaju zaobljeni. Pa krenimo redom.


Prvo napravimo tekstualni okvir pomoću div elementa:

<div class="gl">
Proba tekst okvira i zapisa.
</div>

Proba tekst okvira i zapisa.



Sada napravimo četiri slike. Slike ustvari predstavljaju četvrtine punog kruga. Isjecimo ih i sačuvajmo:

Sada imamo slike i samo ih trebamo rasporediti na četiri kuta našeg tekstualnog okvira:




<style type="text/css">
.gl {background: url(gl.gif) 0 0 no-repeat; width: 200px}
.gd {background: url(gd.gif) 100% 0% no-repeat; width: 200px}
.dl {background: url(dl.gif) 0 100% no-repeat; width: 200px}
.dd {background: url(dd.gif) 100% 100% no-repeat; width: 200px;}
</style>

<div class="gl"><div class="gd"><div class="dl"><div class="dd">
<div style="padding:10px">
Proba tekst okvira i zapisa.
</div>
</div></div></div></div>

Ovako smo dodijelili rubove našem tekst okviru. U zadnjem div elementu, dd, smo dodijelili padding vrijednost koja je malo veća od dužine i širine slika kutova. Tako se neće dogoditi da se tekst ispisuje preko ovih slika, a i ljepše će izgledati. Još moramo dodijeliti background-color vrijednost. Ovu vrijednost dodjeljujemo prvom elementu. Na kraju imamo ovaj kod:




<style type="text/css">
.gl {background: url(gl.gif) 0 0 #9ac80d no-repeat; width: 200px;}
.gd {background: url(gd.gif) 100% 0% no-repeat; width: 200px}
.dl {background: url(dl.gif) 0 100% no-repeat; width: 200px}
.dd {background: url(dd.gif) 100% 100% no-repeat; width: 200px}
</style>

<div class="gl"><div class="gd"><div class="dl"><div class="dd">
<div style="padding:20px">
Proba tekst okvira i zapisa.
</div>
</div></div></div></div>

Zaobljeni rubovi bez slika

bljeni rubovi bez slika


U prošlom tutorijalu napravili smo CSS okvire sa zaobljenim rubovima, ali smo koristili slike. Slike smo prije nacrtali te ih posložili unutar okvira tako da dobijemo željeni efekt. Sada ćemo napraviti istu stvar, ali na drugi način. Nećemo koristiti slike nego samo div i b elemente. Na njih ćemo primijeniti CSS kojim ćemo oblikovati naše zaobljene rubove. Prvo napravimo CSS i kopirajmo ga u head dio.


<style type="text/css">
div#okvir{ margin: 0;background: #9bd1fa; width:300px}
b.rubgornji, b.rubdonji{display:block;background: #ffffff}
b.rubgornji b, b.rubdonji b{display:block;height: 1px;
overflow: hidden; background: #9bd1fa }
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rubgornji b.r4, b.rubdonji b.r4{margin: 0 1px;height: 2px}
div.sadrzaj{padding-left:10px}
</style>


Prvo smo definirali div element okvir u kojem ćemo "crtati" rubove. Elementi sa kojima ćemo crtati rubove su <b> elementi. Razlog zašto baš njih koristimo je jednostavan. Zauzima samo jedan znak te samim tim i cijeli dokument zauzima manje prostora i pregledniji je. Ovo je sve što trebamo napraviti sa CSS-om. Sada trebamo iskoristiti gore napisani kod za našu stranicu. Kod za prikaz okvira bi izgledao ovako:


<div id="okvir">
<b class="rubgornji"><b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b></b>
<div class="sadrzaj">
Ovdje upisite sadrzaj vaseg okvira<br>
Ovaj okvir ne koristi slike za rubove
</div>
<b class="rubdonji"><b class="r4"></b><b class="r3"></b>
<b class="r2"></b><b class="r1"></b></b>
</div>


CSS-om smo definirali izgled okvira i rubova, a sada samo te definicije iskoristili da bi prikazali okvir. Elementima <b> smo nacrtali rubove. Naša boja okvira je #9bd1fa koju vi naravno prilagodite svojoj web lokaciji. Osim toga možete promijeniti i stil klase sadrzaj. Tu definirajte način prikazivanja, font, boju teksta, margine, itd. Unutar div elementa sa klasom sadrzaj ide sadržaj našeg okvira. Ovo je veoma jednostavan kod i lako se koristi te je puno lakši za korištenje nego okviri koji koriste slike. Prednost okvira sa slikama je ta što slika može biti mnogo ljepše zaobljena (rubovi su manje zupčasti) pa je i sam okvir mnogo ljepši i oku ugodniji

CSS stranica fiksne širine

U ovom tutorijalu napravit ćemo CSS za HTML stranicu fiksne širine. Ovo je ujedno i najčešći oblik web stranice koja se samo visinom prilagođava sadržaju, a širinu uvijek zadržava. Ovdje ćete vidjeti i veliku prednost korištenja CSS-a za izradu layouta stranice nad tablicama. CSS kod je puno pregledniji i jednostavniji za izmjenu i ispravke kao i za samu promjenu izgleda cijele web stranice. Za početak uzet ćemo "standardni" izgled koji sačinjava:
Naslov/baner stranice
Tijelo stranice sa tri stupca
Podnožje stranice

Body dio

Za početak napišimo body dio HTML stranice.



<div id="okvir">
<div id="zaglavlje">
Baner
</div>
<div id="izbornik">
Izbornik
</div>
<div id="glavnisadrzaj">
Glavni sadrzaj
</div>
<div id="reklame">
Reklame
</div>
<div id="podnozje">
Podnozje
</div>
</div>



Veoma jednostavan i pregledan dio koda. Ovaj kod ujedno predstavlja i sve dijelove naše stranice koje ćemo naknadno nadopuniti sadržajem tako da naša stranice dobije krajnji izgled.

Head dio

Body dio koda koji smo gore napisali sada zahtijeva CSS koji će posložiti DIV elemente na njihove pozicije.


#okvir {
margin:10px;
width: 800px;
background: #ffffff;
}

#zaglavlje {
background: #dddddd;
}

#izbornik {
float: left;
width: 200px;
background: #ebebeb;
}

#glavnisadrzaj {
float:left;
width:450px;
background-color: #cdcde6;
}

#reklama{
float:right;
width: 150px;
background: #ebebeb;
}

#podnozje {
clear:both;
background:#dddddd;
}



Pogledajmo gornji CSS kod. Klasom okvir definirali smo marginu od 10px i ukupnu dužinu stranice od 800px. Svi drugi elementi će se posložiti unutar ovog div elementa i unutar ovih 800px. Zaglavlju smo samo promijenili boju u #dddddd.

Sljedeće tri klase moramo posložiti jednu do druge. U tu svrhu koristit ćemo atribut float. DIV izbornik i glavnisadrzaj će imati vrijednost float-a left, a div reklama će imati vrijednost right. Vrijednost width ovih div elemenata možete postaviti na bilo koju vrijednost, ali pripazite da njihov zbroj iznosi 800px koje smo postavili kao maksimalnu širinu stranice.

Upravo smo završili cjelokupan kostur stranice. Ako ste sve dobro napravili trebali bi u web pregledniku vidjeti sljedeće:

Ostaje nam samo da ubacimo sadržaj u stranicu. Stranica bi se sama trebala prilagoditi sadržaju. Ovaj sadržaj jednostavno ćemo postaviti unutar odgovarajućeg div elementa.

Gornja stranica će se prilagođavati sadržaju bez obzira koliki tekst postavite u Glavni sadržaj. Zaglavlje i podnožje će uvijek biti na svome mjestu. Cjelokupan kod stranice se nalazi ispod. Jednostavno sve kopirajte i napravite novi HTML dokument. U ovom kodu je, radi jednostavnosti, u jedan dokument postavljen cjelokupan CSS za stranicu. Preporuka je da se CSS odvoji u poseban dokument te tako omogući jednostavnije i robusnije uređivanje i mijenjanje stranice.



<html>
<head>

<style>
#okvir {
margin:10px;
width: 800px;
background: #ffffff;
}
#z
aglavlje {
background: #dddddd;
padding:10px
}

#izbornik {
float: left;
width: 150px;
background: #ebebeb;
padding:10px;
}

#glavnisadrzaj {
float:left;
width:450px;
background-color: #cdcde6;
padding:10px;
}

#reklama{
float:right;
width: 160px;
background: #ebebeb;
padding:10px;
}

#podnozje {
clear:both;
background:#dddddd;
text-align: center;
}

</style>

</head>
<body>

<div id="okvir">
<div id="zaglavlje">
<font style="font-face:arial; font-size:80px; color:#FF0000">
<b>@</b>
</font>
<font style="font-face:arial; font-size:30px; color:#FF0000">
CSS fiksna širina
</font>
</div>
<div id="izbornik">
Po&#232;etna<br>
O nama<br>
Kontakt<br>
Proizvodi<br>
Download<br>
</div>
<div id="glavnisadrzaj">
Glavni sadrzaj<br><br>

Lorem ipsum at doctus postulant consetetur usu, duo solum equidem
detracto ex. Choro legendos facilisis vis ut, in eum alii noster
graeco. Invenire cotidieque appellantur vis at, zzril primis
habemus nam te, ad choro iudico virtute nec. Quo invidunt incorrupte
no, nulla doming rationibus ut eam. Aliquando urbanitas
conclusionemque ea nec, ex duo munere legere, per tota apeirian eu.
Duo no gloriatur intellegam, quo an quodsi epicuri sapientem. Nec ne
dico fabellas detraxit, solum clita reformidans pri te, est an
vitae disputando consequuntur. Has elit prompta conclusionemque ei,
porro meliore nec ad. Duis tempor commodo qui ad, eligendi
sententiae philosophia et sea. Virtute takimata argumentum

id nec, ex eum vitae partem convenire, quem detracto mandamus
vim ex. Deleniti expetenda salutatus cu nec, alii veniam
persequeris has id. Nibh phaedrum laboramus has at, has odio omnesque
ut. His no oratio vivendum definitiones, brute nostrud theophrastus
an mel. Nam possit sadipscing ei. An tamquam invenire complectitur
vim, an sea assum recusabo scribentur.
Sonet exerci offendit et sea, per accommodare ullamcorper
consequuntur eu, has no harum decore. Pri in timeam nonummy, in
falli doming persecuti vis, pro id meis ubique epicuri. An vim
scripta efficiantur, ut sed nostro efficiendi scriptorem, vel
habeo sanctus mediocritatem id.
Nostro aliquam ancillae ex vis, in solum facer accusamus eam.
</div>
<div id="reklame">

<font style="font-face:arial; font-size:20px; color:#FF0000">
Reklamni prostor
<br>
za Vas
</font>

</div>
<div id="podnozje">
Copyright: osvemu.com
</div>
</div>


</body>
</html>