http___www.izrada-webstranica.com_css.html_1.xml
1.1 2.1 9.1 12.1 13.1 13.2 14.1 15.1 17.1 18.1 19.1 20.1 21.1 29.1 29.2 30.1 38.1 38.2 39.1 40.1 41.1 43.1 44.1 47.1 49.1 50.1 53.1 54.1 55.1 56.1 57.1 57.2 59.1 59.2 60.1 61.1 62.1 63.1
Minimizing HTTP Requests: Suppose you have these Javascripts Lets combine all of them into a single Javascript: This way you will reduce the number of HTTP requests to the server and help the page to load faster. CSS Sprites: These are used to reduce the number of HTTP Requests for images on a web page. In this process, a developer combines all images into a single image and use the CSS background-image and background-position properties to then display the desired image segment. Specify image dimensions: Specifying the height and width attributes for all the images helps web browsers render web pages faster, as the web browser is not forced to spend time unnecessarily on calculating the height and width of image(s) and can instead use this time to render other elements of the web page. Example: Instead of coding image(s) like this: Always code image tags with height and width attributes, like this: <img src="http://www.example.com/logo.jpg" width="250" height="100" alt="Unique and relevant keyword(s)" /> Place CSS tags first in source code, before Java Script tags: Example: Let's say you have 3 stylesheets and 2 Java Scripts and you specify them in the following order in the document (inside   tags). The second two stylesheets must wait until the two java script files are finished downloading. The total download time equals (in this case 100 ms + 100 ms + 100 ms = 300 ms). Now we will change the order of the CSS and Java Script resources to this: Minify CSS (GZIP): This is the process of removing unnecessary characters from CSS code to reduce the file size, thereby improving load times. To minify CSS code, all comments and unneeded white space characters (space, newline, and tab) are removed. Example : This is the sample CSS code: /* This is a unwanted comment */ font-size: 18px; font-family: arial, helvetica, sans-serif; /* unwanted comments comments comments */ font-size: 12px; font-family: arial, helvetica, sans-serif; After removing all comments and unneeded white space characters (space, newline, and tab): h1{font-size:18px;font-family:arial, helvetica, sans-serif;color: #FF0000;} p{font-size:12px;font-family:arial, helvetica, sans-serif;color: #000000;} Optimize Java Scripts Java Scripts can be optimized the same way we optimize CSS. (see Minify CSS above Browser Caching: For all static resources set “Expires header” to a minimum of one month, and preferably up to one year. Use expires header for all static resources like image(s), script(s), CSS, PDF, Flash etc. (HTML is not static, and shouldn't be considered cacheable) - Combine all your external Java Script files. - Put Java Script tags after CSS tags. - Minify Java Script (GZIP). - Remove Duplicate Scripts.
1.1 2.1 3.1 3.2 5.1 7.1 7.2 11.1 11.2 14.1 17.1 17.2 20.1 21.1 24.1 24.2 24.3 24.4 25.1 25.2 28.1 29.1 32.1 33.1 36.1 37.1 37.2 42.1 46.1 47.1 50.1 55.1 59.1 60.1 63.1 64.1 69.1 70.1 73.1 73.2 74.1 75.1 76.1 76.2 76.3 76.4 81.1 84.1 85.1 86.1 88.1 89.1 90.1 95.1 96.1 99.1 100.1 102.1 103.1 104.1 105.1 106.1 107.1 108.1 111.1 111.2 112.1 113.1 114.1 115.1 115.2 117.1 118.1 119.1 120.1 121.1 122.1 123.1 126.1 129.1 129.2 129.3 129.4 129.5 131.1 132.1 133.1 134.1 135.1 136.1 137.1 140.1 142.1 143.1 146.1 146.2 146.3 146.4 148.1 149.1 150.1 151.1 152.1 153.1 154.1 157.1 159.1 160.1 166.1 166.2 168.1 169.1 170.1 171.1 172.1 173.1 174.1 177.1 179.1 180.1 185.1 186.1 188.1 189.1 191.1 192.1 193.1 196.1 197.1 198.1 199.1 199.2 199.3 200.1 201.1 202.1 203.1 203.2 203.3 203.4 203.5 204.1 205.1 205.2 205.3 205.4
Što je CSS? CSS je skraćenica za Cascading Style Sheets, to je stilski jezik koji se koristi za definiranje izgleda Web stranice i pozicioniranje njezinih elemenata dok se HTML koristi za kreiranje strukture Web stranice. CSS se može pisati unutar samog HTML dokumenta ili se može pozvati vanjski CSS dokument koji će sadržavati CSS kod. Zbog jednostavnosti, količine dokumenata i činjenice da je ovo tutorijal za početnike mi ćemo CSS pisati unutar HTML dokumenta iako se inače za naprednije korisnike preporučuje da se piše u zasebnom dokumentu. Ovdje se piše sav CSS kod Kada bismo CSS-om htjeli tekst naslova (heading 1) obojati u crnu boju i definirati veličinu fonta od 14 pixela to bismo napravili na sljedeći način. Prvo definiramo koji element (selektor) ćemo stilizirati: Nakon toga definiramo područje unutar kojega ćemo pisati stilove za taj element. Stilovi se pišu unutar najobičnijih vitičastih zagrada: tu ćemo pisati stilove za h1 Unutar vitičastih zagrada napisati ćemo da želimo da font bude crne boje i veličine 14 px. Za one koji neznaju što je px, to je mjerna jedinica koja se koristi prilikom izrade Web stranica, 1 pixel = 0.26 mm to znači da 14 pixela = 3.70 mm.: color: black; font-size: 14px; Na predhodnom primjeru vidi se da se CSS stilovi se sastoje od 2 djela, svojstvo i vrijednost. Svako svojstvo ima neku vrijednost npr. u našem primjeru svojstvo color ima vrijednost black, a svojstvo font-size ima vrijednost 14px. Nakon svojstva piše se dvotočka koja odvaja svojstvo i njegovu vrijednost (color: black) a nakon vrijednosti piše se točka zarez (color: black;). Točka zarez daje nam do znanja da tu svojstvo sa svojom vrijednosti završava. Sada ćemo na isti način stilizirati heading 2 naslov. Njega ćemo samo za primjer obojati bjelom bojom i odrediti veličinu fonta 12 pixela: color: black; font-size: 14px; color: white; font-size: 12px; CSS u HTML dokumentu CSS style tagovi se pišu u headeru HTML dokumenta. Kreirat ćemo jedan prazan HTML dokument, ako neznate kako provjerite prvi dio našeg tutorijala u kojemu je sve objašnjeno: izrada Web stranica Naslov Naslov Podnslov Praznome HTML dokumentu dodat ćemo h1 i h2 naslove te njihove CSS stilove koje smo prethodno napisali da vam prikažemo kako CSS izgleda u svom prirodnom okruženju. Naslov color: black; font-size: 14px; color: white; font-size: 12px; Naslov Podnslov Sada su oba dva naslova stilizirana CSS-om. Mi smo u primjeru koristili samo dva svojstva boju (color) i veličinu fonta (font-size), ali CSS im mnogo više svojstava kojima se može stilizirati cijela Web stranica a ne samo njen tekst. Neka CSS svojstva koje se najčešće koriste i neke njihove vrijednosti: HTML klase Naš HTML kod moramo pripremiti da bi što lakše unutar njega mogli integrirati CSS stilove. Pripremu HTML-a ćemo izvršiti tako da ćemo svim HTML tagovima dodjelit određene klase. HTML klase koriste se da bi se uz pomoć njih HTML elementimd dodijelio nekakav stil. U nastavku ćemo prikazati primjer kako se dodjeljuju HTML klase i kako se definiraju njihovi stilovi: Naslov .glavni-naslov{ color: black; font-size: 14px; .podnaslov{ color: white; font-size: 12px; Naslov Podnslov Stiliziranje Web stranice CSS-om Nakon završetka prvog djela tutoriala izrada web stranica, krećemo na drugi dio u kojemu ćemo stilizirati HTML strukturu Web stranice. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; - Kao što se   tag odnosi samo na paragraph, tagovi body i html odnose se na cijelo Web sjedište. Unutar ova dva taga unjet ćemo svojstva I njihove vrijednosti koje će se odnositi na cijlo Web sjedište - Svaki preglednik (browser) Web stranicama dodaje razmak na rubovima kojega smo uklonili postavljanjem vrijednosti margin i padding na nulu. - Definirali smo font koji će se koristiti na cijeloj Web stranici. - Boja pozadine koje će se koristiti na cijeloj Web stranici. - Pošto se naša Web stranica prilagođava veličini različitih ekrana postavili smo njenu minimalnu širinu. Širinu smo ograničili jer ispod te širine naša Web stranice nebi dobro izgledala. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; Kao što znamo linkovi se pišu na sljedeći način  link . Kada u CSS-u navedemo svojstvo a znači da ćemo njime stilizirati sve linkove. Sada smo sve linkove obojali navedenom bojom. Ovaj kod #e4f5fd; zove se RGB kod, pojednostavljeno to znači da svaka boja koja postoji ima svoj kod, npr. crna boja je #000000; bijela boja je #FFFFFF; crvena boja je #FF0000; itd. RGB kodove svih postojećih boja možete saznati na sljedećoj Web stranici: RGB Color Codes Chart. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; hover označava stanje kada netko pokazivačem miša pređe preko određenoga elementa (eng. hover = hrv. lebdjeti). a:hover označava stanje kada netko pokazivačem pređe preko nekoga linka. Znači kada netko pređe mišem preko linka ukloniti će se njegovo podcrtavanje. To je standardni efekt koji se koristi zbog bolje preglednosti. Evo primjer kako to funkcionira, pređite mišem preko ovoga linka: primjer hover efekta body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; Ovo vrijedi za sve paragrafe na Web stranici. Ovim stilom definirali smo boju teksta koji se javlja u paragrafima body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; .menu{ height:50px; margin:0px auto; position:relative; color:black; box-shadow:0px 0px 5px 5px #3d78b3; background-color:#3d78b3; Redom ćemo objasniti što smo sada stilizirali u menu klasi. - height:50px; Odredili smo visinu ovog područja - width:100%; Odredili smo širinu područja - margin:0px auto; Vrijednost margine smo definirali na ovaj način nebili centrirali cjeli menu na sredinu ekrana. Prva vrijednost se odnosi na vertikalnu marginu, druga na hosrizontalnu. Postavljanjem horizontalne margina na vrijednost auto centrirali smo taj element na sredinu. - position:relative; Relativno pozicioniranje na Web stranici - z-index:9999; Elementi koji imaju z-index vrijednot npr. 15, prikazivat će is ispod elemenata sa z-index vrijednosti od npr. 16. Postavljanjem z-index vrijednosti na 9999 očito je da želimo da se ovaj element pokazuje iznad svih ostalih. - color:black; Boja teksta unutar ovog elemenata biti će crna - box-shadow:0px 0px 5px 5px #3d78b3; Ovo svojstvo definira sjenu elementa. Svojstvo ima 5 vrijednosti, prve četri su u pixelima a jedna je boja. Prva vrijednost označava vertikalno pozicioniranje sjene, druga horizontalno. Treća vrijednost označava koliko će sjena biti raširena. Četvrta vrijednost označava količinu zamagljenosti sjene a zadnja vrijednost je boja sjene. - background-color:#3d78b3; Definirali smo boju pozadine. Dali smo vam neke osnovne primjere CSS stiliziranja da bi shvatili na koji način funkcioniraju i kako ih se treba koristiti u kombinaciji sa HTML strukturom stranice. Sada ostaje na vama da samostalno eksperimentirate i dizajnirate CSS prema vašim željama i potrebama. Da biste nastavili svoju CSS edukaciju predlažemo jedan od najboljih resursa za učenje, gdje uz praktične primjere možete i samostalno isprobavati vlastite CSS kodove: CSS Tutorial. Sretno :)