Css Tutorijali

CSS TUTORIJALI Uvod i prvi primjer CSS je skraenica od Cascading Style Sheets.
Style (stil) definira kako prikazati HTML elemente. CSS vam moe utedjeti mnogo vremena i uz to poboljati izgled i funkcionalnost vaih web stranica. Style moemo pisati unutar <head> i </head> tagova ili u eksternim style stranicama. ee koritena varijanta je pisanje CSS-a u eksternim stranicama. Ali mi emo prvo koristiti unutar <head> i </head> tagova radi lakeg uenja, a kasnije u vam objasniti kako se prebaciti na eksterni nain rada. Ako elite imati CSS unutar head tagova, napiite ovo izmeu <head> i </head> <style type="text/css"> </style>
Izmeu toga piete va CSS kod. Npr. kao najjednostavniji primjer koristit emo ovo. Izmeu dodajte ovaj kod: body{color: red;}
S ovime ste promijenili boju teksta u crveno na cijeloj stranici. Sada probajte neto napisati na vau web stranicu. Gdje god neto probate napisati bit e napisano crvenom bojom. To je bio najjednostavniji primjer. Evo sada primjer kako vam CSS moe olakati posao. Izmeu <style type="text/css"> i </style> napiite sljedee: #primjer{ background-color:#003366; padding: 20px; border: 1px; color: #FFFFFF; height: 200px; width: 400px; }
i zatim izmeu <body> i </body> upiite: <div id="primjer"> Ja ucim CSS </div>
Vrste stilova Postoje interni, externi inline CSS style. Interni style - Pie se u head dijelu stranice. Evo primjera: <html> <head> <style type="text/css"> .tablica { background-color: #006699; color: #FFFFFF; font-family: Tahoma; } </style>
</head> <body> <div class="tablica"> Tutorijali.Net </div> </body> </html>
Eksterni style - Ovaj nain je najei. Pie su u externom fajlu. Otvorite notepad i napiite isto kao gore. .tablica { background-color: #006699; color: #FFFFFF; font-family: Tahoma; }
Imenujte taj fajl npr. style.css Sada u HTML fajlu moramo povezati taj externi CSS Style sa naom stranicom. To ete napraviti tako da dodate ovu liniju koda u head dijelu stranice: <link href="style.css" rel="stylesheet" type="text/css" />
HINT: ako ete tako povezati onda style.css mora biti u istom folderu u kojem je i stanica s kojom se povezuje inae morate ispred style.css dodati putanju do fajla. Inline style - Inline style se koristi na sljedei nain: <td style="background: blue; color: white;">Plava pozadina sa bijelim tekstom.</td>
Background U ovom tutorijalu emo vam objasniti Background dijelu CSS-a koji je vrlo koristan i puno koriten pri izradi web stranica. Background color Sa Backgroundom color moete promijeniti boju pozadinu bilo kojem elementu. Napravimo jedan css style za pozadinu koji emo primjeniti na raznim elementima. .pozadina { background-color: #006699; }
Evo primjera kako to moete iskoristiti: <table class="pozadina"></table> <td class="pozadina"> </td> <p class="pozadina">
Background Image CSS ima mogunost da umjesto boje postavite neku sliku kao pozadinu. Evo primjera: .pozadina { background-image: url(neka-slika.jpg); }
ili sa punim pathom do slike npr. .pozadina { background-image: url(http://www.tutorijali.com/slike/neka-slika.jpg); }
CSS ima jo nekih naprednijih mogunosti kod koritenja Backgrounda ali to emo objanjavati kasnije jer nam nije sada cilj zamarati vas tim stvarima dok ne nauite osnove.
Definiranje fontova Za prvi primjer koristit emo bojanje fonta po veliini fonta. Boju moemo promijeniti na sljedee naine: h4 { color: red; } h5 { color: #9000A1; } h6 { color: rgb(0, 220, 98); }
Ako vam to bude u style sheetu onda ete kod h4, h5, i h6 fonta imati razliite boje. Font family Evo kako moete promijeniti vrstu fonta: h4 { font-family: Verdana; } h5 ( font-family: Arial; } h6 { font-family: Tahoma; }
Naravno ne morate postaviti h4, h5 i slino, moete i za odreenu tablicu, npr: .nekatablica { font-family: Verdana; }
Font size Veliinu fonta moete odrediti u postotcima i pixelima. Npr. .nekatablica { font-size: 120%; } .drugatablica {
font-size: 10px; } }
Font style Font style odnosno nakoeni, podebljani ili normalni font definirate ovako: .tablica { font-style: italic; } .tablica2 { font-style: oblique; } .tablica3 { font-style: normal; }
Font Variant Ako napiete npr: .nekatablica { font-variant: small-caps; }
Dobti ete "mala - velika slova" odnosno caps lock slova ali manja nego normalno.
Izrada horizontalnog menija pomou liste - 1.dio Ovo dosad su bile neke osnove CSS-a, nema smisla sve to objanjavati, jednostavno uzmete neki css editor i uite po primjerima. Mi emo se zadrati na neem korisnom. U HTML tutorijalima ste mogli proitati kako napraviti jednostavnu listu. Netko bi pomislio da one nisu korisne za nita osim nekakvog nabrajanja. Ali ne, mi emo ih iskoristiti za izradu menija pomou CSS-a. Ii emo korak po korak, tako da emo najprije napraviti obinu horizontalnu listu koja sama po sebi runo izgleda, ali u kako u pisati tutorijale jedan po jedan tako emo praviti menije pomou CSS koji e izgledati vrlo lijepo. Idemo sada napraviti jednostavni horizontalni menu sa vrlo malo CSS-a. Nee biti ba lijep, ali za poetak.... :) Korisit emo interni CSS dakle u jednom fajlu. Ovo napiite izmeu <head> i </head>: <style type="text/css"> #lista li { display: inline; padding-right: 20px; font-weight: bold; }
#lista a:hover { color: #FF9933; } </style>
Znai definirali smo CSS-om kako da se prikazuje lista pod ID-om "lista". Sa display: inline; smo naredili da se lista pod ID-om "lista" prikae horizontalno. Sa padding-right: 20px; smo odmakuli desno svaki stavak u listi da nebi bili sljepljeni jedan na drugi. Sa font-weight: bold; smo naravno definirali da nam tekst bude Bold. I na kraju smo samo jo dodali #lista a:hover odnosno kako e se ponaati linkovi kada se pree strelicom mia preko njih. To je sve to se tie CSS dijela. Sada jo moramo napraviti listu. Napravimo onda najprije jedan <div> u kojem emo drati na menu odnosno listu i zatim unutar tog div-a napravimo listu koja e nam sluiti kao menu. <div> <ul id="lista"> <li><a href="bla1.html">Link <li><a href="bla2.html">Link <li><a href="bla3.html">Link <li><a href="bla4.html">Link <li><a href="bla5.html">Link </ul> </div>
1</a></li> 2</a></li> 3</a></li> 4</a></li> 5</a></li>
Vidite da smo listi dali id "lista". Znai da e se ta lista prikazat onako kako smo odredili CSS-om. Primjer kako to izgleda moete pogledati ovdje. Kao to sam ve napomenuo, ovo je samo obina lista, nije nikakav menu. To je samo osnova i temelj za ono to emo napraviti postepeno u iduim tutorijalima.
Izrada horizontalnog menija pomou liste - 2.dio U prolom tutorijalu smo nauili kao napraviti jednostavnu horizontalnu listu gdje linkovi mijenjaju boju kada se doe miem na njih. Sada emo to zanje malo unaprijediti da poboljamo izgled nae horizontalne liste i napravimo jedan lijepi horizontalni menu. Dakle ovo postavite izmeu <style type="text/css"> i </style> pa emo redom objanjavati.
#lista { margin-left: 0; padding-left: 0; } #lista li { display: inline; list-style-type: none; } #lista a { color: #FFFFFF; background-color: #003366; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold; padding: 3px 10px; } #lista a:hover { color: #FFFFFF; background-color: #6699CC; text-decoration: none; }
Sa #lista { margin-left: 0; padding-left: 0; }
smo napisali tako da nau listu moemo pomaknuti u lijevu stranu koliko ide da nema razmaka. Sa #lista li { display: inline; list-style-type: none; }
smo definirali da se lista (li) u stilu "lista" prikazuje u liniji (display: inline), da nema nikakvih tokica, brojeva ni niega ispred sebe (list-style-type: none) Sa #lista a { color: #FFFFFF; background-color: #003366; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold; padding: 3px 10px; }
smo definirali da svi linkovi u stilu lista budu bijele boje, definirali smo pozadinu, da ne bude podvuen link (text-decoration: none), definirali font te stavili da ima 3px razmaka gore i dolje, te 10px razmaka lijevo i desno (padding: 3px 10px) Sa #lista a:hover { color: #FFFFFF; background-color: #6699CC; text-decoration: none; }
smo odredili kako e se lista ponaati kada se pree miem preko linkova. Promijena bojea i da ne bude pocrtano. I to je to to se tie novog stila. Sada moete prekopirati html kod od nae stare liste: <div> <ul id="lista"> <li><a href="bla1.html">Link <li><a href="bla2.html">Link <li><a href="bla3.html">Link <li><a href="bla4.html">Link <li><a href="bla5.hrml">Link </ul> </div>
1</a></li> 2</a></li> 3</a></li> 4</a></li> 5</a></li>
i pogledati kako to izgleda u akciji.
Izrada horizontalnog menija pomou liste - 3.dio U prolom tutorijalu nauili smo kako napraviti jednostavni menu koji koji mijenja boju pozadine kada se pree miem preko linkova. Sada emo napraviti slino tako ali jo malo bolje. Dodajte ovo izmeu <style type="text/css"> i </style> pa emo objasniti. #lista { padding-left: 0; margin-left: 0; } #lista li { list-style-type: none; display: inline; } #lista a {
font-family: Verdana; font-weight: bold; font-size: 12px; padding: 2px 5px 2px 5px; border-left: 10px solid #000066; background: #006699; text-decoration: none; color: #FFCC33; } #lista a:hover { border-color: #6699CC; color: #FFFFFF; background: #000000; }
Gotovo je sve isto kao i u prolom tutorijalu pa nema potrebe da objanjavamo to koji kod radi. Rei u samo za ono to je nadodano da bi se dobili ovi kvadratii sa strane. U #lista a smo nadodali ovaj kod border-left: 10px solid #000066;
to pravi border irine 10 pixela sa lijeve strane. To vam je ovaj kvadrati. zatim smo u #lista a:hover nadodali ovo: border-color: #6699CC;
odnosno da onaj border od 10px promijeni boju u svijetlo plavu. Eto, to bi bilo sve. Ne zaboravite u body dio stranice napraviti listu: <div> <ul id="lista"> <li> <a href="bla.html">Link 1</a></li> <li><a href="bla2.html">Link 2</a></li> <li><a href="bla3.html">Link 3</a></li> <li><a href="bla4.html">Link 4</a></li> <li><a href="bla5.html">Link 5</a></li> </ul> </div>
Evo kako to izgleda u akciji. Ako vam neto nije jasno pitajte na forumu.
Overflow Teksta Unutar Div-a Pokazat cu vam kako napraviti overflow texta unutar div-a. Pravimo div #overflwed <style type="text/css"> #overflwed { width: 400px; /* definiramo sirinu div-a*/ height:200px; /* definiramo visinu div-a*/ border-bottom:1px solid silver; /* donji rub*/ border-top: 1px solid silver; /* gornji rub*/ margin:0 auto; /* centriramo div na sredinu stranice*/ overflow: scroll; /*Omogucavamo overflow */ overflow-x:hidden;/* Sakrivamo kliznu traku po x-osi*/ } Opis imate poslije svake linije koda Uredjujemo paragraf i Zatvaramo </style> p { margin-left:5px; color:blue; font-family: tahoma; font-size:10px; } </style> Ubacujemo ga u html  <div id="overflwed"> <p>Ovaj kod objasnjava kako napraviti div,koji ce ako se upise previse teksta sam od sebe napraviti scroll. Klizne trake se naravno mogu modificirati,moze im se mjenjati boja,ali to je podrzano samo u Internet Exploreru. Dok u Firefoxu ne radi,iako je Firefox trenutno na mnogo boljem glasu.Sad cu upisati mnogo slova tek toliko da vidite,kako ce se napraviti scroll! -<br>-<br> -<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br> By:Goran </p> </div> Cijeli kod od <div id="overflwed"> do </div> morate ubaciti u body dio Ovako izgleda konacan rezultat Overflow

Css Tutorijali

Uploaded by

Copyright:

Available Formats

You might also like

Css Tutorijali

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Tutorijali

Uploaded by

Copyright:

Available Formats

CSS TUTORIJALI Uvod i prvi primjer CSS je skraenica od Cascading Style Sheets.

</head> <body> <div class="tablica"> Tutorijali.Net </div> </body> </html>

ili sa punim pathom do slike npr. .pozadina { background-image: url(http://www.tutorijali.com/slike/neka-slika.jpg); }

Font Variant Ako napiete npr: .nekatablica { font-variant: small-caps; }

#lista a:hover { color: #FF9933; } </style>

1</a></li> 2</a></li> 3</a></li> 4</a></li> 5</a></li>

Sa #lista { margin-left: 0; padding-left: 0; }

1</a></li> 2</a></li> 3</a></li> 4</a></li> 5</a></li>

i pogledati kako to izgleda u akciji.

You might also like