CSS Cascading Style Sheet Stilovi definiu izgled web
CSS Cascading Style Sheet
�Stilovi definišu izgled web stranica, pa samim tim spadaju u osnove kreiranja web sajtova. �CSS (Cascading. Style. Sheets) je stilski jezik, koji se koristi za formatiranje i definisanje izgleda HTML stranica. �Svrha CSS-a je zapravo odvajanje stila prezentacije od samog sadržaja web stranice. �Stilove je moguće koristiti na 3 načina:
Umetanje Style Sheet-a Prvo, style elementi mogu se dodati direktno u HTML tag, što se zove "inline" style sheet. 2. Drugo, style sheet može biti deo HTML dokumenta ("internal" ili Embeded style sheet), a to podrazumeva direktno upisivanje u HTML dokument u <head> područje. 3. Na kraju, može biti odvojeni "external" "external style sheet te će se pozivati pomoću web adrese (URL-a) svaki put kad se HTML dokument bude učitavao. Link za odvojeni external style sheet takođe će se smestiti između <head> tagova. 1.
1. UMETNUTI STIL �Umetnuti stilovi se kotiste direktno na HTML elementima, ali se ne preporučuju jer time poništavate sve globalne stilove primenjene na taj element. <a style="color: #fff">Link</a> �Najjednostavniji i najmanje preporučljiv način za upotrebu CSS -a je navođenje iskaza unutar STYLE atributa HTML elementa koji želimo da menjamo. Ovako kreiran kod je nečitljiv i težak za pronalaženje grešaka i izmene. Koristi se ako je potrebno na licu mesta (u samom HTML-u) izmeniti neki već postojeći CSS stil ili zadati određeni izgled bez kreiranja stila.
1. Inline Style Sheet primer <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" "http: //www. w 3. org/TR/REChtml 40/loose. dtd"> <html> <head> <title>Document's title</title> </head> <body> <p style="style elements go here"> </p> </body> </html>
2. INTERNI STIL �Interni stilovi se koriste kada pojedinačne stranice imaju jedinstvene stilove (što je malo kada slučaj). <head> <style> a {color: #fff; } </style> </head> �Bolji način od prethodnog , obzirom da odvaja prikaz od sadržine. Ipak, stilovi se i ovde kreiraju unutar same HTML stranice, s tim što su izdvojeni unutar STYLE taga unutar zaglavlja stranice. Ovaj način koristimo ako nam trebaju stilovi za koje smo sigurni da ćemo ih koristiti samo unutar te pojedine stranice.
2 Internal Style Sheet primer <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" "http: //www. w 3. org/TR/REChtml 40/loose. dtd"> <html> <head> <title>Document's title</title> <style type="text/css"> style elements go here </style> </head> <body> Content's goes here </body> </html>
3. EKSTERNI CSS FAJL �Eksterni CSS fajlovi se koriste za više stranica koje koriste stilove. Sa eksternim stilovima možete menjati celokupan izgled sajta menjanjem samo jednog fajla. Moguće je i korišćenje više eksternih fajlova (idealno za definisanje odeljaka na stranici). <head> <link href="/css/general. css" rel="stylesheet" type="text/css" /> </head> �Ne samo da se sadržaj i prikaz odvajaju u potpunosti, već se isti stilovi mogu koristiti na više različitih HTML stranica.
3. External Style Sheet primer <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN" "http: //www. w 3. org/TR/REChtml 40/loose. dtd"> <html> <head> <title>Document's title</title> <LINK href="filename. css" rel="stylesheet" type="text/css"> </head> <body> Content's goes here </body> </html>
�Spoljni (external) file povezan je s našim HTML dokumentom pomoću: <LINK href="filename. css" rel="stylesheet" type="text/css"> �Svi style elementi biti će smešteni u poseban, odvojeni CSS dokument pa mu se dodaje. css extenzija
Primena i izbor CSS-a �Inline style nije naročito praktičan jer morate pisati CSS za svaki tag. �Ako imate samo nekoliko web stranica upotrebite internal style sheet. �Ako imate website sa mnogo stranica koje koriste style elemente iskoristite external file. U tom slučaju ako npr. želite promeniti boju ili veličinu texta na svim vašim stranicama nećete morati menjati sve HTML dokumente nego samo onaj sa. css extenzijom.
CSS SINTAKSA �CSS sintaksa se sastoji iz dva glavna dela: 1. selektor 2. deklaracija (jedna ili više) Deklaracija se deli na osobinu i vrednost. Npr. h 1 {font-size: 20 px; color: #fff; } �h 1 - selektor �font-size: 20 px i color: #fff - deklaracije �font-size, color - osobina � 20 px, #fff - vrednosti �Deklaracije se grupišu unutar vitičastih zagrada { }, a svaka deklaracija se završava oznakom ; .
- Slides: 12