start

privatno

kontakt

 

CSS

CSS (Cascading Stylesheets) je jezik za formatiranje HTML-elemenata i savršena je nadopuna HTML-u. Pomoću CSS-a možemo oblikovati slova, tekstove, tablice, formulare određujući njihovu veličinu, poziciju, boju, i sl.

CSS je pisan u dvije verzije: CSS 1.0 koji podržavaju i preglednici starijih verzija iako ne sve njegove elemente, dok su npr. Internet Explorer 5.5 i Netscape 6.1 kao i novije verzije preglednika bolje prilagođeni prikazivanju CSS elemenata. Verzija CSS 2.0 nudi nešto više mogućnosti oblikovanja elemenata i također je prilagodljiva novijim verzijama preglednika. Trenutačno je u izradi i verija CSS 3.0.

CSS možemo podijeliti na 'INTERNI' i 'EXTERNI'. Interni CSS definiramo direktno u HTML-u. Primjer:
------------------------------------------------------------
<style type="text/css">
<!--
ovdje definiramo CSS elemente
-->
</style>
------------------------------------------------------------

Externi CSS pišemo u programu za pisanje teksta, zatim pohranjujemo kao podatak (ime.css). Externi CSS je u prednosti kod izrade velikog broja stranica zato što kod eventulne izmjene ne moramo mijenjati CSS na svim stranicama nego samo jedan podatak na kome je CSS pohranjen. Primjer:
------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="ime.css">
------------------------------------------------------------

Na slijedećim primjerima možete vidjeti nekoliko mogućnosti definicije CSS elemenata:

Primjer atributa -class-:
------------------------------------------------------------
<html>
<head>
<title>class</title>
<style type="text/css">
<!--
.body { background-color:#EEEEFF; }
.chap { font-family:Arial,sans-serif; font-size:20pt; color:blue;
border-bottom-style:solid; border-bottom-width:3px; border-color:red;
margin:0px; margin-bottom:16px; }
.p { font-family:Arial,sans-serif; font-size:11pt; color:black; margin-top:6px; margin-bottom:6px; }
.red { color:red }
.blue { color:blue }
.bold { font-weight:bold }
.big { font-size:14pt }
.small { font-size:6pt; font-family:'Small Fonts',sans-serif; }
-->
</style>
</head>
<body>
<div class="chap">Naslov</div>
<div class="p">Tekstualni odlomak</div>
<div class="p">Odlomak sa <span class="red">crvenim i <span class="bold">debelim</span></span> slovima</div>
<div class="p">Odlomak sa <span class="big">velikim</span> i <span class="small">malim</span> slovima</div>
</body>
</html>

:: primjer pogledajte ovdje ::
------------------------------------------------------------

Primjer atributa -id-:
------------------------------------------------------------
<html>
<head>
<title>id</title>
<style type="text/css">
<!--
#crvenidio {
position:absolute;
top:100px;
left:30px;
width:150px;
padding:10px;
margin:0px;
border:4px solid #EE0000;
}
#plavi dio {
position:absolute;
top:40px;
left:200px;
width:150px;
padding:10px;
margin:0px;
border:4px solid #0000EE;
}
h1#naslov {
font-family:Arial,sans-serif;
font-size:24pt;
font-weight:normal;
color:green;
}
-->
</style>
</head>
<body>
<h1 id="naslov">Naslov</h1>
<div id="crvenidio"><h1>Crveni dio</h1></div>
<div id="plavidio"><h1>Plavi dio</h1></div>
</body>
</html>

:: primjer pogledajte ovdje ::
------------------------------------------------------------

Primjer definicije linkova:
------------------------------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-2">
<title>linkovi</title>
<style type="text/css">
<!--
a:link { color:#993333; text-decoration:none; font-weight:bold; }
a:visited { color:#cc9999; text-decoration:none; font-weight:bold; }
a:hover { color:#996666; text-decoration:underline; background-color:#ffcccc; font-weight:bold; }
a:active { color:#996666; background-color:#ffcccc; font-weight:bold; }
body { font-family:Arial,sans-serif; font-size:12pt; }
-->
</style>
</head>
<body bgcolor="#ffffff">
<p><a href="http://www.internic.net" target="_blank">www.internic.net</a></p>
<p><a href="http://www.icann.org" target="_blank">www.icann.org</a></p>
<p><a href="http://www.iab.org" target="_blank">www.iab.org</a></p>
<p><a href="http://www.iana.org" target="_blank">www.iana.org</a></p>
<p><a href="http://www.ietf.org" target="_blank">www.ietf.org</a></p>
<p><a href="http://www.isoc.org" target="_blank">www.isoc.org</a></p>
<p><a href="http://www.w3.org" target="_blank">www.w3.org</a></p>
</body>
</html>

:: primjer pogledajte ovdje ::
------------------------------------------------------------

:: nazad ::