{ osnove } Uvod - 1 − Kao prvo i osnovno, da bi učenje CSS-a imalo nekog smisla morate znati HTML. − CSS (Cascading Style Sheets) je jezik formatiranja pomodu koga se definiše izgled (stil) Web strana. − Kad se pojavio Web jedino je HTML definisao kompletan izgled, strukturu i sadržaj Web stranica. Kada su u HTML 3.2 dodati tagovi poput <font> počinju poteškode za Web programere, jer HTML dokumenti počinju bivati sve vedi, i vrlo je teško bilo snalaziti se u njima. Da bi se uprostio takav HTML dokument od verzije HTML 4.0 uveden je CSS (1996 godine). − CSS ima daleko vede dizajnerske mogudnosti od čistog HTML-a. Zato je danas CSS gotovo nezamenjljiv u dizajniranju Web stranica. Uvod - 2 − Prva verzija HTML-a se pojavila 1990 godine. − Prva verzija CSS-a se pojavila 1996 godine. − Kao i HTML, CSS se takođe razvijao i unapređivao tokom godina, pa je tako danas aktuelna verzija CSS 2.1 (u kombinaciji sa HTML 4.01.), dok se radi na verziji CSS 3 koja sa HTML 5 čini nove WEB standarde koji još uvek nisu standardizovani, ali se koriste na pojedinim stranicama, jer ih sada sve više brauzer-a podržava i omogudava njihovu upotrebu. − Sa pojavom JavaScript-a Web stranice postaju dinamične. Uvod - 3 Današnje Web stranice dele se na: − HTML deo koji definiše sadržaj (strukturu) Web stranice. − CSS deo koji definiše izgled Web stranice (kao na primer boja slova, pozadine, margine i tako dalje). − JavaScript deo koji definiše dinamiku Web stranice. Web stranica Uvod - 4 Prednosti CSS-a: − Olakšava pisanje Web stranica. − Štedi prostor na hostu. − Brže otvaranje stranica (jedna CSS datoteka se može primeniti na više HTML stranica). − Jednostavnije, brže i sigurnije održavanje i HTML i CSS dokumenata. − Jednostavnija prenamena Web stranica za različite tipove brauzer-a i uređaja (npr. mobilni telefoni, TV i sl.) CSS pravila - 1 − Svaki ispravan HTML dokument napisan prema Web standardima treba da ima odvojen sadržaj (strukturu) od izgleda (stila). − Znači, prvo treba napisati HTML kod (naslovi, paragrafi, slike, odjeljci, forme i sl...) kao poseban dokument, a zatim taj dokument treba povezati sa CSS dokumentom u kojem su definisani stilovi. − U retkim slučajevima CSS kod se piše unutar HTML dokumenta. − CSS dokument je najobičniji tekstualni dokument koji sadrži instrukcije/naredbe za Web brauzere, a koje definišu stilove za određene HTML elemente na Web stranici. CSS pravila - 2 CSS pravilo (sintaksa): Selektor { svojstvo1: vrednost1; svojstvo2: vrednost2; ...} Selektor može biti: − HTML element (tag) na koji de se opis stila odnositi. − Klasa HTML elemenata na koju de se opis stila odnositi. − Identifikaciona vrednost (ID) HTML elemenata na koji de se opis stila odnositi. Nizom parova svojstvo-vrednost definiše se izgled svakog ciljnog elementa. Različita svojstva (atributi) zahtevaju različite tipove vrednosti, npr.: merne dužine > 12px, 2em ili 1in; boja > black ili #000000; URL > slike/slika-1.jpg) ili specifična ključna riječ > top, center, left) CSS komentari se navode između znakova /* i */. CSS pravila - 3 Ako je selektor HTML element (tag) : p { svojstvo1: vrednost1; svojstvo2: vrednost2; ...} Ako je selektor Klasa HTML elemenata : .imeKlase { svojstvo1: vrednost1; svojstvo2: vrednost2; ...} Ako je selektor Identifikaciona vrednost (ID) HTML elemenata: #IDVrednost { svojstvo1: vrednost1; svojstvo2: vrednost2; ...} CSS pravila - 4 − Opisi stilova postavljaju se između početne i završne oznake stila (<style> ... </style>) u zaglavlju HTML koda Web stranice. − Opisi stilova se sastoje od jednog ili više pravila. CSS pravilo: deklaracija deklaracija deklaracija h1 {color: blue; font-size: 30px; font-family: arial;} svojstvo vrednost selektor (ime stila) svojstvo vrednost svojstvo vrednost CSS pravila - 5 Primer 1: CSS <style> Selektor body govori web brauzer-u sledede: - sve margine na stranici trebaju biti 0px - boja pozadine treba biti plava body {margin: 0px; background-color: blue;} h1, h2 {font-family: "Arial"; font-weight: bold; font-size: 20px; } </style> Selektori h1 i h2 govore web brauzer-u sledede: - tekst treba biti napisan u Arial fontu - debljina slova treba biti podebljana - veličina teksta treba biti 20px CSS pravila - 6 Primer 2: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm. <html> HTML <head> <title>Stilovi-primer</title> <style type="text/css"> Komentar /* 1. navodedi HTML tag ciljnih elemenata */ p {color: #0000ff;} /* 2. navodedi Klasu elemenata */ CSS stil Pravilo .crvenitekst {color: #ff0000; text-align: center;} /* 3. navodedi direktnu identifikacionu vrednost (ID) elementa */ #zelenitekst {color: #00ff00; text-align: right; font-size: 20px;} </style> </head> <body> <p> Prvi pasus. Tekst je levo poravnat i plave boje. </p> <p id="zelenitekst"> Drugi pasus. Tekst je desno poravnat i zelene boje. </p> <p class="crvenitekst"> Tredi pasus. Tekst je centriran i crvene boje. </p> </body> </html> Primer 2: Izgled stranice CSS pravila - 7 Jedan CSS dokument može izgledati ovako (naredbe se pišu iza selektora, u više redova): Selektor body govori web brauzer-u sledede: - sve margine na stranici trebaju biti 0 px - tekst treba biti napisan u Trebuchet MS fontu - veličina pisma treba biti 12px Selektor a govori web brauzer-u sledede: - linkovi ne smeju biti podvučeni - boja pozadine linka treba biti crvena - boja teksta linka treba biti bela Selektor h1 govori web brauzer-u sledede: - sve margine oko h1 elementa trebaju biti 0px - debljina slova treba biti podebljana - veličina teksta treba biti 20px Selektor p govori web brauzer-u sledede: - boja teksta celog pasusa treba biti siva - veličina teksta treba biti 11px CSS pravila - 8 CSS dokument može izgledati i ovako (naredbe se pišu iza selektora, sve u istom redu): CSS body { margin: 0; font-family: "Trebuchet MS"; font-size: 12px; } a { text-decoration: none; background-color: red; color: white; } h1 { margin: 0; font-weight: bold; font-size: 20px; } p { color: #666666; font-size: 11px; } Gde može da se nalazi CSS kod (stil) CSS kod se može zadavati na tri standardna mesta: − Direktno u HTML tag-u, koristedi argument style (inline). − U zaglavlju dokumenta unutar taga <style>. − U eksternoj datoteci, koja se linkuje tag-om <link>. Stilovi u eksternoj datoteci imaju prednost u odnosu na preostala dva načina (stilovi definisani u zaglavlju i inline stilovi), a to je da pomodu eksterne datoteke možemo da utičemo na elemente više dokumenata (stranica) i centralizovano da upravljamo stilovima i izgledom dela ili celog sajta. Primer inlajn stila Inlajn stil se ubacuje direktno u HTML tag, koristedi argument style. Ovim se narušava namena CSS-a da se lista stilova primenjuje na ceo Web sajt. Primer 3: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm. <html> <head> <title>Inlajn stil</title> Inlajn stil </head> <body> <p> Prvi pasus. </p> <p style="color: #0000FF; font-size: 24px;"> Drugi pasus. </p> <p> Treci pasus. </p> </body> </html> HTML Primer 3: Izgled stranice Primer ugrađenog stila Ugrađeni stil se ubacuje direktno u zaglavlje dokumenta, između početne i završne oznake (taga) stila (<style> ... </style>). Primer 4: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm. <html> <head> <title>Ugrađeni stil</title> <style type="text/css"> body {background-color: gray;} p {color: #0000FF; font-size: 24px;} h1 {color: #00FF00; font-family: "Arial"; font-size: 34px;} </style> </head> <body> <p> Prvi pasus. </p> <h1> Drugi pasus. </h1> </body> </html> HTML Ugrađeni stil Primer 4: Izgled stranice Primer eksternog stila Da biste u potpunosti iskoristili prednosti CSS-a, treba da koristite eksterni stil. Eksterni stil je tekstualna datoteka sa ekstenzijon .css. Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .css. CSS body {background-color: #691; color: black;} p {font-family: "Georgija"; font-size: 54px; color: #0000FF; } h1 {font-family: "Verdana"; font-size: 30px; color: #ccc;} Lista stilova Primena eksternog stila Eksterni stil se ubacuje u HTML kod (dokument), korišdenjem tag-a <link>. HTML datoteka i datoteka sa stilovima se nalaze u istoj fascikli. Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm. <html> HTML <head> <title>Eksterni stil</title> <link href="externistil.css" rel="stylesheet" type="text/css"/> </head> <body> Link eksternog stila <p> Prvi pasus. </p> (u ovom primeru ime CSS datoteke je <h1> Drugi pasus. </h1> externistil.css) </body> </html> Primer 5: Izgled stranice Redosled slaganja (prioritet) i interpretacije stilova Prioritet i interpretacija (od najnižeg ka najvišem): 1. Browser default. 2. External style sheet. 3. Internal style sheet (unutar <head> taga). 4. Inline style (unutar HTML elementa) Znači inline CSS (unutar HTML elementa) ima najvedi prioritet, što znači da de „pregaziti“ svaku definicije u prethodne tri vrste stilova. Stil definisan unutar head sekcije dokumenta je stariji od eksternog fajla i browser default-a. Svojstva Neka od CSS svojstava (atributa) možemo kategorisati u sledede grupe: − definicija pozadine elementa, − ivica, − okvir, − prikaz, − dimenzije, − font, − margine, − unutrašnji prazan prostor, − pozicija, − izgled pripadajudeg teksta. Vrednosti Vrednosti atributa mogu biti: − predefinisane ključne reči, − brojevne vrednosti. Primeri predefinisanih ključnih reči su recimo "red", "left“ ... Brojevne vrednosti se mogu zadavati na nekoliko načina: − zadajudi samo brojnu vrednost, − zadajudi brojevnu vrednost navodedi i jedinicu veličine (px, em, pt, ...). Ako zadajete samo brojnu vrednost, imate mogudnost da je pišete na dva načina: − u dekadnom sistemu, − u heksadekadnom sistemu (#A4FD23), a ovaj sistem se najviše koristi u definiciji boje. Jedinice mere CSS jedinice mere su: − px - piksel, označava broj tačaka na ekranu − pt - point, najčešde se koristi za zadavanje veličina slova (1pt = 1/72 inča). − pc - pika, jedinica mere koja se ređe zadaje. 1pc = 12pt. − mm, cm, in - milimetri, centimetri ili inči se retko zadaju za stilove koji se prikazuju na ekranu, ali su korisni kada se dokument priprema za štampanje − % - procenti predstavljaju relativnu jedinicu mere. − em - relativna mera u odnosu na trenutnu veličinu fonta. Ako je font veličine 12pt, onda de 2em predstavljati veličinu od 24pt. − ex - još jedna relativna mera u odnosu na veličinu slova, 1ex je otprilike jednak polovini veličine fonta. U praksi se najčešde zadaju px, pt ili procenti. Najznačajniji stilovi Postoji nekoliko desetina različitih stilova koji kontrolišu prikaz HTML dokumenta. Sve stilove grupišemo prema tome kakav prikaz kontrolišu: − pozadina, − fontovi, tekst i boje, − box i stilovi bordera (borders), − liste, − pozicioniranje. CSS Pozadina i boje Da bi definisali stilove za pozadinu odredjenog sektora koristimo opciju background. Redosled svojstava: − background-color − background-image − background-repeat − background-attachment − background-position Boja pozadine Za definisanje boj pozadine koristi se svojstvo background-color. Boja pozadine za celu stranu se definiše u <body> tagu. Primer 1: body {background-color: #B0C4DE;} Boja se navodi na jedan od tri načina: – imenom - npr. red, yellow... – RGB vrednošdu - npr. rgb(255,0,0) – Hex-a vrednošdu - npr. #FF0000 Slika kao pozadina -1 Za definisanje slike kao pozadine koristi se svojstvo backgroundimage. Definiše se u <body> tagu. Primer 1: body {background-image: url('pozadina.gif');} Za kontrolu ponavljanja koristi se svojstvo background-repeat (repeat-x, repeat-y, no-repeat). Položaj slike se određuje svojstvom background-position (vertikala: top/center/bottom; horizontala: left/center/right). Da li se slika skroluje sa stranom ili ne skroluje određuje svojstvo background-attachment (scroll, fixed). Slika kao pozadina - 2 Primet 2: Body { background-image: url('pozadina.png'); background-repeat: no-repeat; background-position: top right; } Primet 3: Body { background-image: url('pozadina.png'); background-repeat: repeat-x; background-position: top left; background-attachment: fixed; } Fontovi - 1 Pomodu nekoliko različitih svojstava možete da birate font, da podesite veličinu i da zadajete svojstva kao što su bold i italic. Upotrebom svojstva font-family možete da izaberete font (preporučujemo da odredite listu fontova a pretraživč de koristiti prvi dostupni font sa te liste). Primer 1: p {font-family: Verdana, Tahoma, Arial, Helvetica;} Fontovi - 2 Veličinu slova možete podesiti svojstvom font-size. Vednosti za ovo mogu biti broj, procenat, ili generička vrednost (small, medium, large, x-small, xx-small, x-large i xx-large). Numeričke vrednosti možete podesiti u procentima, pixelima ili u tačkama. Boju fonta možete podesiti svojstvom color. Primer 2: p { font-family: Verdana, Tahoma, Arial, Helvetica; font-size: 14px; color: #00FF00; } Fontovi - 3 Na izgled teksta možemo uticati još sa slededim svojstvima: − Font-style: Vrednosti mogu biti normal, italic i oblique. − Font-weight: Može imati vrednosti normal, bold, bolder, ... lighter ili numeričku vrednost. − Font-variant: može imati vrednost normal ili small-caps. Primer 3: h1 { font-family: Verdana, Tahoma, Arial, Helvetica; font-size: 14px; color: #00FF00; font-style: italic; font-variant: small-caps; } Tekst - 1 CSS vam pruža mnogo opcija za definisanje stilova prikazivanja teksta: color – definiše boju teksta. Primer 1: p {color: #00FF00;} direction – podešava direkciju teksta. Može imati vrednosti: − ltr - left to right (sa leva na desno) − rtl - right to left (sa desna na levo) Primer 2: div {direction: rtl;} Tekst - 2 line-height – podešava distancu između linija teksta. Može imati vrednosti: − normal - normalni razmak između linija − number - brojna vrednost koja se matematički računa u zavisnosti veličine fonta − length - precizna vrednost koju možemo odrediti pikselima, tačkama, centimetrima,.. − % - odredjeni broj ptocenata korišdene veličine fonta Primer 3: h1 {line-height: 30px;} Tekst - 3 letter-spacing – povedava ili smanjuje distancu između slova. Može imati vrednosti: − normal - normalna distanca izmedju slova − length - podešava ekstra razmak izmedju slova (može imati i negativnu vrednost). Primer 4: h1 {letter-spacing: 2px;} text-align – podešava poziciju teksta u elementu. Može imati vrednosti: left, right, center i justify. Primer 5: h1 {text-align: center;} Tekst - 4 text-decoration – podešava dekoraciju teksta. Može imati vrednosti: − none - normalan tekst − underline - linija ispod teksta − overline - linija iznad teksta − line-through - precrtan tekst − blink - tekst koji blinka Primer 6: h3 {text-decoration: underline;} Tekst - 5 text-indent – Uvlaši prvu liniju teksta. Može imati vrednosti: − length - definišete koliko de biti uvučena prva linija tačno u pikselima, tačkana, centimetrima,... − % - definiče koliko procenata de biti uvučena linija Primer 7: p {text-indent: 50px;} text-shadow – podešava se efekat senke teksta. Može imati vrednosti: − none − color - odredjena boja senke − length - odredjena veličina senke Primer 8: p {text-shadow: 2px 2px 2px #000;} Tekst - 6 text-transform – služi za kontrolisanje slova. Može imati vrednosti: − none − capitalize - podešava da prvo slovo svake reči bude velik − uppercase - podešava da sva slova budu velika − lowercase - podešava da sva slova budu mala Primer 9: h2 {text-transform: uppercase;} word-spacing – služi za povedavanja ili smanjivanje rezmaka izmedju reči. Primer 10: p {word-spacing: 30px;} CSS Tutorijali 1. http://moviesbk.com/video/OZpP5DoqzVE/1.CSS%20%20Osnove.html#.UU7tkhxg-58 2. http://www.youtube.com/watch?feature=player_embedded&v=OZpP5D oqzVE www.bubaj.com/index.php?css-osnove 3.
© Copyright 2024 Paperzz