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 Class i ID

Tutorial CSS Class i ID i link

Tutorial CSS 1 Uvod

Selektor služi za definisanje elemenata. Class selektor omogućava da istom elementu pridodate više stilova, za razliku od ID. Kraći primer Deo CSS koda:

p.centar {
text-align: center;
}
p.desno {
text-align: right;
}
Deo html koda:
<p class="centar">centriran paragraf</p>
<p class="desno">poravnat u desno</p>

Rezultat svega je centriran i poravnat uz desnu ivicu paragraf tekst.....sam align se može izvesti i pomoću html koda
<p align="center"> ili <p align="right"> tako da ovo nema potrebe da se koristi. Kada se uzme u obir i razlike u nasleđjivanju onda je jasno da je razlika izmedju class i id svedena na minimum. Sada ćemo definisati clasu naslov i id naslov. Klasa se definiše tako sto se stavi prvo tačka pa naziv, a id tako što se stavi prvo taraba (povisilica #) pa naziv.

Kopiranje: kombinacija tastera CRTL+C

Pored starog koda sada imamo .naslov i #naslov i u body delu paragraf sa određenom klasom i id. Uzeo sam identičan primer i jasno se vidi da je naslov određene boje, fonta, veličine i centrira. Dakle bilo bi dovoljno da definišem samo klasu ili id i da to koristim za svaki naslov na stranici ili bar naslove iste važnosti (u slučaju da sajt ima više vrsta naslova). Klasa i ID se često kombinuju sa td tagom (kada se pravi tabela) pa se onda u td tag ubaci željena klasa ili ID. <td class="naziv klase"> ili <td id="naziv id">. Dakle neki tekst unutar td taga će izgledati bez obzira na browser isto kako je definisana klasa... veličina, boja, font, boja pozadine, magine i tako dalje.

Ukoli sajt nema nikakvu tabelu (nema onda ni td tagova) i ne želimo da se mlatimo oko nasleđivanja definisanog paragrafa i da pisemo klase za paragraf prava stvar je div tag. Div tag poćinje i završava se <div></div> i unutar njega se piše tekst ubacuju slike i ostalo. U div tag se ubacuje class ili id (po želji). Ako nam je za td tag potrebna cela tabela, a mi je nemamo i nije nam potrebna ubacivanje napravljene klase se izvršava upravo u div tagu.
Ceo kod:

Kopiranje: kombinacija tastera CRTL+C

Klasa obojena sadrži boju pozadine (background-color: #000000;) širinu (width: 150px;) boju fonta (color: #FFFFFF;) veličinu fonta (font-size: 14px;) i novinu pomeraj sa leve strane od 5 px (padding-left: 5px;) 2px liniju crvene boje na vrhu (border-top: 2px solid #FF0000;) Ovo je samo primer, i može da sadrži pomeraj i od vrha padding-top, može i da ima crvenu liniju i sa desne strane border-right 2px solid #FF0000 i tako dalje.....

Linkovi:

U html link se zapisuje a tagom i to na sledeći način:
<a href="putanja do linka">naziv linka</a> Dakle ukoliko želimo da uredimo i definišemo igled linka moramo da definišemo a tag u CSS-u.
Ceo kod:

Kopiranje: kombinacija tastera CRTL+C

Interesantan kod u css-u za linkove je a {…… koji sadrži sledeće atribute. Boju (color: #FF0000;) Pomeraj od leve ivice za 15px (padding-left: 15px;) Familiju fontova (font-family: Tahoma, "Times New Roman", Times, serif;) Veličinu (font-size: 12px;) I novinu Dekoracija teksta (text-decoration: none;) koja upravo ukida onu podvučenu liniju od linka.
E sada bi želeli recimo da se nešto dogodi kada se pređe mišem preko tog linka.... Rešenje se nalazi u definisanju a:hover taga
Ceo html kod:

Kopiranje: kombinacija tastera CRTL+C

a:hover sadrži sledeće atribute.
Manje više odradi se copy paste i promeni se samo onaj deo koda koji želite da izmenite. Nije ni malo interesantno menjati sve živo u a:hover delu... pogotovo ne bi trebalo dirati font. U ovom slučaju promenjena je boja (preporučljivo) i veličina (nije preporučljivo) jer pomera i ostatak stranice kada se link povećava i smanjuje tokom prelaska mišem.
Za definisanje već posećenog linka možete definisati u css-u a:visited{} a ako želite i efekat hover onda treba da uradite i a:visited:hover {} kako bi bilo razlike između posećenog i prelaska.

Ako smo ovo savladali mogli bi da krenemo u izradu navigacije.
Tutorial CSS 3 Izrada navigacije

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
Aluminijumska stolarija | Alu stolarija