Prva godina
puskice OET 1
puskice OET 2
puskice Osnovi elektronike
puskice Matematika 1
puskice Matematika 2
puskice Inženjerska matematika
puskice ORT 1
puskice ORT 2
puskice Programiranje 1
puskice Fizika
puskice Engleski 1
puskice Elektronika NRT i MET
puskice Internet servisi
puskice Osnovi menadžmenta
puskice Aplikativni softver
puskice Osnovi televizije
puskice Osnovi elektroenergetike
puskice Elektrotehnički materijali i komponente
puskice Marketing
puskice Sociologija
puskice Osnovi audiotehnike
puskice Arhitektura i orgranizacija računara 2
Druga godina
puskice Digitalna obrada signala
puskice Mikroračunari
puskice Upravljanje projektima
puskice Digitalne telekomunikacije
puskice Baze podataka
puskice Računarske mreže
puskice Digitalna Integrisana Elektronika
puskice Programiranje 2
puskice Objektno programiranje
puskice Elektronsko poslovanje 1
puskice Elektronsko poslovanje 2
puskice Trgovinsko pravo
puskice Montaža i servisiranje računara
puskice Internet tehnologije
puskice Kompjuterska animacija 1
puskice Digitalne multimedije 1
puskice Digitalne multimedije 2
puskice Analogna elektronika
puskice Telekomunikacije
puskice Elektromotorni pogoni
puskice Električne instalacije i osvetljenja
puskice Električne mašine 1
puskice Električne mašine 2
puskice Osnovi animacije
puskice Komunikologija
puskice Elementi elektroenergetskih sistema
puskice Upravljanje troškovima
puskice Elektrane i razvodna postrojenja
puskice Midi sistemi
puskice Mediji masovne komunikacje
puskice Web dizajn
puskice Studijska audiotehika
Treća godina
puskice Engleski 2
puskice Inteligentne računarske tehnologije
puskice Klijent server sistemi
puskice Operativni sistemi 1
puskice Operativni sistemi 2
puskice Internet programiranje 1
puskice Internet programiranje 2
puskice Protokoli u računarskim mrežama
puskice Sigurnost u računarskim mrežama
puskice Programabilna logička kola
puskice Tehnike vizuelnog programiranja
puskice Finansijski menadžment
puskice Održavanje elektroenergetskih uređaja
puskice Programiranje u jeziku JAVA
puskice Distribucija i prodaja električne energije
puskice Ozvučenje
puskice Poslovni software
puskice Računari i periferije
puskice Softversko inzenjerstvo
Ostalo
puskice Profesori
puskice Tutoriali
puskice Top 10
puskice Pravilnik
puskice Port skener
puskice Hash generator md5 sha1
puskice SEO Google rangiranje
puskice SEO Yahoo rangiranje
puskice SEO MSN rangiranje
puskice Web servis vremenska prognoza
puskice Web servis kursna lista
puskice Web servis kursna lista za sutra
puskice Linkovi

Tutorial CSS Uvod

Tutorial CSS uvod

CSS - Cascading Style Sheets

CSS je skraćenica od "Cascading Style Sheets", a služi za definisanje stilova koji određuju izgled HTML elemenata. CSS je izum World Wide Web Consortium (w3c.org). CSS je podržan od strane svih vodećih web čitaća, ali nažalost izgled same strane nije isti na svim web čitačima (razlog je nepridržavanje standarda). Postoji više načina ubacivanja stilova. U samom html dokumentu (izmedju head tagova) i preko spoljasnjeg fajla koji nosi ekstenziju .css . Preporuka je ubacivanje CSS-a preko eksternog fajla iz više raloga kao što su preglednost, prepravka samo jednog fajla (samog .css fajla) za promenu izgleda svih stranica....

Evo kako izgleda kod za ubacivanje css-a unutar samog html fajla:

Kopiranje: kombinacija tastera CRTL+C

VAŽNO:

Neko komentar piše // što je izvodljivo ako je upitanju recimo FireFox browser ali ako je upitanju IE6 onda nikako nije, pošto IE6 ne poštuje taj komentar. Univerzalno rešenje je korišćenje komentara za više redova pa makar on bio i jedno jedno slovo. Ovo je i ujedno i prva nekompatibilnost medju web čitačima. Tako prosta stvar a može da prikaže ogromne razlike. Samo primera radi pogledajte ovaj kod u FireFox-u i IE6. Kopirajte kod u notepad i sačuvajte kao nesto.html i pogledajte iz oba browsera. NAPOMENA: pazite da notepad ne doda na kraju ekstenziju .txt . Slika sve govori !

Kopiranje: kombinacija tastera CRTL+C

Firefox je uvažio komentar color, tako da je tekst po defaultu crne boje, dok IE nije uvažio komentar i tekst je sada ispisan žutom bojom. Jedna strana 2 browsera i 2 različita prikaza.

Ubacivanje eksternog stila izvršava se tako što se uvacuje sledeći tag u head zaglavlje.

<head>
<link rel="stylesheet" href="mojstil.css" type="text/css">
</head>
Gde mojstil.css predstavlja eksterni fajl koji se nalazi u ovom slučaju u istom folderu gde i strana.html

Sintaksa CSS-a

Sintaksa CSS-a sadrži 3 dela. Sektor, atribut i vrednost i zapisuje se na sledeći način:
sektor { atribut1: vrednost; atribut2: vrednost; atributN: vrednost;}
Radi veće preglednosti usvojen je standard pisanja: jedan adribut jedan red.

sektor {
atribut1: vrednost;
atribut2: vrednost;
atributN: vrednost;
}

Sektor je obično neki html element (body gde se podesava telo strane) ili stil koji želite da definišete (npr naslovi koje možete da iskoristite za sve naslove na Vašoj strani).

Kreiranje prve strane sa CSS-om

Za početak krenućemo od podešavanja tela strane.

body {
background-color: #cccccc; /* boja pozadine */
color: yellow; /* boja teksta */
font-size: 26px; /* velicina fonta */
}

Definisali smo telo strane sa 3 atributa. background-color i dodali vrednost #cccccc (boja pozadine i vrednost boje u heksadecimalnom obliku…neka siva boja) color: i dodali vrednost yellow (boja teksta i vrednost data nazivom boje) font-size: i dodali vrednost 26px (veličina fonta, konkretno 26 piksela)
Ceo kod:

Kopiranje: kombinacija tastera CRTL+C

Ako kopirate ovaj tekst u notepad i sačuvate kao nesto.html dobićete html stranu koja ima sivu pozadinu, "Neki tekst" zute boje i veličine 26 piksela.
Idemo dalje na test. (uvek ostavljamo stari kod da bi videli razliku)

body {
background-color: #cccccc;
color: yellow;
font-size: 26px;
}
p {
font-family: Tahoma, "Times New Roman", Times, serif;
color: #323232;
font-size: 14px;
}

Slovo p predstavlja skraceni oblik paragraf (običan tekst) i definisali smo osnovni oblik. Osnovni oblik je font Tahoma, boje 323232 i veličine 14 px. Poželjno je stavljati font-family: i nabrojati još par fontova pored osnovnog zbog sigurnosti da korisnik ima bar neki od tih pobrojanih fontova. Fontovi koji se sastoje od više reči kao što je Times New Roman treba da se pišu obavezno pod znacima navoda.
Ceo kod:

Kopiranje: kombinacija tastera CRTL+C

Rezultat svega je: font Tahoma, boja 323232 i veličina.

Dakle tekst više nije žute boje a relultat toga je to sto je u samom paragrafu definisano da tekst bude 323232 boje. Da kojim slučajem u paragraf delu nije definisan color rezultat bi bio tekst žute boje jer je nasledio tu osobinu od tela stranice (body deo). Možete to isprobati tako što ćete iskomentarisati color: #323232; ovaj deo koda ali obavezno /* */ ili jednostavno izbrisati taj deo koda pa pogledati rezultat. Inače samo to nasleđivanje treba izbegavati maksimalno jer opet dolazi do izražaja nekompatibilnos među čitačima. Evo primera:

Kopiranje: kombinacija tastera CRTL+C

Dakle FireFox je uzeo vrednost fonta dok je IE nasledio od paragrafa..... inače ovo je class i biće reči nešto kasnije o njemu. I naravno generalni savet kada je upitanju CSS. Svaka stranica bi trebala bar približno da izgleda na većini browsera. Da izgleda identično na FireFox-u i IE je prosto nemoguće jer u samom startu FireFox nema scrollbar dok IE ima scrollbar koji je u funkciji tek kada je stranica "duža/veća" od veličine rezolucije na monitoru. Treba težiti da se sajt podjednako dobro vidi u svim popularnim web browserima u smislu da bude isti font, boja, veličina i tome slično. Zato jedan generalni savet pri izradi strana je da se u samoj izradi CSS-a koriste oba čitača za poređenje a ne samo jedan, kako ne bi došli u situaciju da završite ceo CSS kod i tek na kraju radoznalosti pogledate kako to izgleda u drugom čitaču i dobijete neke čudne rezultate. Zato posle definisanja celog jednog segmena odradite pogled na oba čitača.

Tutorial CSS 2 Class i ID

Vazno !

Ovim putem se izvinjavam za greške koje su možda slučajno promakle kao i za stopostotnu ispravnost teksta.
Pedja

Nazad na početak


VIŠER Vesti

[ 12.07.2013, 15.14 ] Odobrene teme diplomskih radova (NV:08.07.2013.) Link

[ 12.07.2013, 07.58 ] Stipendije i krediti za mesec jun Link

[ 11.07.2013, 11.42 ] Naknadna odbrana vežbi iz Baza podataka pred semptembarski ispitni rok Link

[ 05.07.2013, 12.56 ] Odobrene teme diplomskih radova (NV:03.07.2013.) Link

[ 04.07.2013, 20.12 ] SPECIJALNE ELEKTRIČNE INSTALACIJE-Rezultati drugog kolokvijuma Link

[ 04.07.2013, 16.23 ] SPECIJALNE ELEKTRIČNE INSTALACIJE_Rešenja zadataka_drugi kolokvijum Link

[ 03.07.2013, 11.51 ] Naknadna odbrana vežbi iz Mikroračunara - Septembar 2013 Link

[ 03.07.2013, 11.45 ] Stručna praksa (smer NRT) - Septembarski ispitni rok Link

[ 03.07.2013, 11.35 ] Stručna praksa - Smer NRT Link

[ 02.07.2013, 09.32 ] Memorijski sistemi - Rezultati predispitnih obaveza Link


Puskice i skripte VISER
SEO Optimizacija sajta | Menjačnica | Žute strane
Rolo vrata | Segmetna vrata | Garažna vrata | Aluminijumska stolarija | Alu stolarija