Ovaj tutorial je namijenjen za ljude koji žele početi koristiti HTML i CSS, i za one koji nikada prije nisu koristili.
Sada ćemo objasniti CSS.
Link prošle teme: http://www.gamers.ba/forum/8/170244/-html-css-osnove-1
Uvod u CSS
CSS (Cascading Style Sheets) se koristi za kreiranje stilova HTML elementima : background, položaj elemenata, vrsta i veličina texta, margine itd...Jednostavno CSS se koristi za uljepšavanje HTML stranice.
CSS se piše u text editoru, isto kao i HTML, ja vam toplo preporučujem da skinete Notepad++ sa oficijalne stranice: http://www.notepad-plus-plus.org.
Da bi oblikovanje bilo validno, potrebno je povezati html dokument za css dokumentom, na sljedeći način: <link rel="stylesheet" type="text/css" href="css/stil.css">
Jedan običan primjer CSS dokumenta:
Sada ćemo objasniti čemu služe ovi stilovi:
body - govori web pregledniku da:
- margine na stranici trebaju biti 0px;
- padding na stranici treba biti 0px;
- text treba biti napisan u Centural Gothic vrsti;
- veličina fonta treba biti 15px;
h1 - govori web pregledniku da:
- sve margine trebaju biti 0px;
- veličina fonta treba biti 18px;
p - govori web pregledniku da:
- boja teksta treba biti siva; (#555555 jeste hex boja, sve hex boje možete pronaći ovdje : http://www.2createawebsite.com/build/hex-colors.html, ili jednostavno u photoshopu)
- veličina pisma treba biti 11px;
Vrste selektora u CSS-u
Postoje više selektora, ali mi ćemo spomenuti samo 4, jer su nam oni najbitniji za početak.
a) selektor elementa (a, h1, ul, li, p, img...)
b) class selektor (npr. ako smo u html-u napisali <div class="header">, u css-u da bi oblikovali element pisali bi ovako - .header {height:200px;}).
c) ID selektor (npr. ako smo u html-u napisali <div id="navigacija">, u css-u da bi oblikovali element, pisali bi ovako - #navigacija {font-size:13px;}).
d) universal selektor (* (zvjezdica), primjer. * {font-size:16px} - selektor * određuje stil za sve elemente).
Sada ćemo objasniti najviše upotrebljivije elemente:
-DIV elemenat
DIV vam jednostavno znači kao neka kutija u kojoj se nalaze textovi, slike, paragrafi itd...
Primjer:
U HTML-u :
U CSS-u :
U web pregledniku :
Šta smo zapravo uradili? Prvo smo odredili širinu našeg diva na 700px, margine smo postavili odozgo na 10px, i postavili smo da nam naš div automatski postavi na sredinu stranice, odredili smo padding našeg teksta na 10px, tekst će biti odvojen od bordera sa svih strana za 10 piksela, odredili smo border debljine 1 piksel, solid, crne boje, i postavili smo pozadinsku boju bijelu.
Klase
Primjer:
U HTML-u :
U CSS-u :
U web pregledniku:
A sve atribute možete pronaći na sljedećoj stranici: http://www.quackit.com/css/properties.
Za sada će biti dovoljno, zbog toga što ćemo u sljedećem tutorijalu kodirati stranicu od nule, koja će sadržavati: header [logo, navigacija(u kojoj ćemo upotrebljivati <ul> i <li> tagove)], sadržaj (slike, text, video), footer.
Ne vjerujem da ćete trenutno CSS potpuno shvatiti, jer svaki tutorijal tekstualnog tipa zahtijeva veće ulaganje, više tema itd...ali u sljedećem bi po mojoj procjeni trebali svi shvatiti i kasnije početi sa upotrebljivanjem vlastite mašte.
Komentirajte šta vam je volja, hejtajte slobodno, komentari pohvale su dobodošli uvijek.
Sada ćemo objasniti CSS.
Link prošle teme: http://www.gamers.ba/forum/8/170244/-html-css-osnove-1
Uvod u CSS
CSS (Cascading Style Sheets) se koristi za kreiranje stilova HTML elementima : background, položaj elemenata, vrsta i veličina texta, margine itd...Jednostavno CSS se koristi za uljepšavanje HTML stranice.
CSS se piše u text editoru, isto kao i HTML, ja vam toplo preporučujem da skinete Notepad++ sa oficijalne stranice: http://www.notepad-plus-plus.org.
Da bi oblikovanje bilo validno, potrebno je povezati html dokument za css dokumentom, na sljedeći način: <link rel="stylesheet" type="text/css" href="css/stil.css">
Jedan običan primjer CSS dokumenta:
Sada ćemo objasniti čemu služe ovi stilovi:
body - govori web pregledniku da:
- margine na stranici trebaju biti 0px;
- padding na stranici treba biti 0px;
- text treba biti napisan u Centural Gothic vrsti;
- veličina fonta treba biti 15px;
h1 - govori web pregledniku da:
- sve margine trebaju biti 0px;
- veličina fonta treba biti 18px;
p - govori web pregledniku da:
- boja teksta treba biti siva; (#555555 jeste hex boja, sve hex boje možete pronaći ovdje : http://www.2createawebsite.com/build/hex-colors.html, ili jednostavno u photoshopu)
- veličina pisma treba biti 11px;
Vrste selektora u CSS-u
Postoje više selektora, ali mi ćemo spomenuti samo 4, jer su nam oni najbitniji za početak.
a) selektor elementa (a, h1, ul, li, p, img...)
b) class selektor (npr. ako smo u html-u napisali <div class="header">, u css-u da bi oblikovali element pisali bi ovako - .header {height:200px;}).
c) ID selektor (npr. ako smo u html-u napisali <div id="navigacija">, u css-u da bi oblikovali element, pisali bi ovako - #navigacija {font-size:13px;}).
d) universal selektor (* (zvjezdica), primjer. * {font-size:16px} - selektor * određuje stil za sve elemente).
Sada ćemo objasniti najviše upotrebljivije elemente:
-DIV elemenat
DIV vam jednostavno znači kao neka kutija u kojoj se nalaze textovi, slike, paragrafi itd...
Primjer:
U HTML-u :
U CSS-u :
U web pregledniku :
Šta smo zapravo uradili? Prvo smo odredili širinu našeg diva na 700px, margine smo postavili odozgo na 10px, i postavili smo da nam naš div automatski postavi na sredinu stranice, odredili smo padding našeg teksta na 10px, tekst će biti odvojen od bordera sa svih strana za 10 piksela, odredili smo border debljine 1 piksel, solid, crne boje, i postavili smo pozadinsku boju bijelu.
Klase
Primjer:
U HTML-u :
U CSS-u :
U web pregledniku:
A sve atribute možete pronaći na sljedećoj stranici: http://www.quackit.com/css/properties.
Za sada će biti dovoljno, zbog toga što ćemo u sljedećem tutorijalu kodirati stranicu od nule, koja će sadržavati: header [logo, navigacija(u kojoj ćemo upotrebljivati <ul> i <li> tagove)], sadržaj (slike, text, video), footer.
Ne vjerujem da ćete trenutno CSS potpuno shvatiti, jer svaki tutorijal tekstualnog tipa zahtijeva veće ulaganje, više tema itd...ali u sljedećem bi po mojoj procjeni trebali svi shvatiti i kasnije početi sa upotrebljivanjem vlastite mašte.
Komentirajte šta vam je volja, hejtajte slobodno, komentari pohvale su dobodošli uvijek.
