Klase i ID-ji Pomoć proširite CSS
Izgradnja web stranica na današnjem Vebu zahtijeva duboko razumijevanje CSS-a (Cascading Style Sheets). Ovo su upute koje dajete veb lokaciji kako biste utvrdili kako će izgledati u prozoru pregledača. Primenjujete niz "stilova" u svoj HTML dokument koji će stvoriti izgled i osećaj vaše web stranice.
Postoji mnogo načina da se primenite gore pomenuti stilovi u dokumentu, ali često želite da koristite stil samo za neke elemente u dokumentu, ali ne i sve instance tog elementa.
Takođe možete želeti da kreirate stil koji možete primijeniti na nekoliko elemenata u dokumentu, bez ponavljanja pravila stila za svaku pojedinačnu instancu. Da biste postigli ove željene stilove, koristićete atribute HTML i ID klase. Ovi atributi su globalni atributi koji se mogu primeniti na skoro svaku oznaku HTML-a. To znači da, bez obzira na to da li delite podele, paragrafe, linkove, liste ili bilo koji od drugih komada HTML-a u vašem dokumentu, možete se pretvoriti u atribute razreda i ID pomažu vam da ostvarite ovaj zadatak!
Selektori klase
Selektor za klase vam omogućava da podesite više stilova na isti element ili oznaku u dokumentu. Na primer, možda ćete želeti da se određeni dijelovi vašeg teksta pozivaju u drugoj boji od ostatka teksta u dokumentu. Ove označene sekcije mogu biti "upozorenja" koje postavljate na stranici. Možete dodijeliti svoje paragrafe ovakvim časovima:
p {boja: # 0000ff; }
p.alert {color: # ff0000; }
Ovi stilovi postavili su boju svih paragrafa u plavo (# 0000ff), ali bilo koji odeljak sa atributom tipa "upozorenja" bi umjesto toga stajlao crvenim (# ff0000). To je zato što atribut klase ima veću specifičnost od prvog CSS pravila, koji koristi samo selektor tagova.
Kada radite sa CSS-om, specifičnije pravilo će prevladati manje specifičnim. Dakle, u ovom primjeru, opće pravilo postavlja boju svih paragrafa, ali drugo, specifičnije pravilo od onog koji preklapa to postavljanje samo na nekim paragrafima.
Evo kako se ovo može koristiti u nekoj HTML oznaci:
Ovaj stav bi bio prikazan plavom bojom, što je podrazumevano za stranicu.
Ovaj pasus bi takođe bio u plavoj boji.
I ovaj stav bi bio prikazan crvenom jer atribut klase bi prepisao standardnu plavu boju iz styling selektora.
U tom primjeru, stil "p.alert" bi se primjenio samo na elemente paragrafa koji koriste tu klasu "upozorenja". Ako želite koristiti tu klasu u više HTML elementa, jednostavno biste uklonili HTML element od početka (samo obavezno napustite period (.) na mestu), ovako:
.alert {background-color: # ff0000;}
Ova klasa je sada dostupna svakom elementu koji mu je potreban. Svaki komad vašeg HTML-a koji ima vrijednost atributa klasa "upozorenja" sada će dobiti ovaj stil. U HTML-u ispod, imamo i paragraf i nivo nivoa 2 koji koriste klasu "upozorenja". Oba bi imala boju pozadine crvene boje na osnovu CSS-a koje smo upravo pokazali.
Ovaj pasus bi bio napisan crvenom bojom.
I ovaj h2 bi takođe bio crven.
Na web stranicama danas, atributi klasa se često koriste na većini elemenata jer su lakše raditi s perspektive specifičnosti koje su ID-ji. Najnovije HTML stranice će se popuniti atributima klasa, od kojih se neke više puta ponavljaju u dokumentu, a drugi koji se mogu pojaviti samo jednom.
ID selektori
Selektor ID omogućava vam da navedete ime određenom stilu bez asocijacije sa oznakom ili drugim HTML elementom . Recimo da ste imali podjelu u HTML oznaku koja sadrži informacije o događaju.
Ovom podjelu možete dati atribut ID-a za "događaj", a zatim, ako želite da objasnite tu podjelu s širokom crnom graničnom linijom od 1 piksla, napišite ID-kod ovako:
#event {border: 1px solid # 000; }
Izazov s ID selektora je da se oni ne mogu ponoviti u HTML dokumentu. One moraju biti jedinstvene (možete koristiti isti ID na više stranica vaše stranice, ali samo jednom u svakom pojedinačnom HTML dokumentu). Dakle, ako ste imali 3 događaje koji su potrebni za ovu granicu, morate im dati atribute identiteta "događaja1", "događaja2" i "događaja3" i stila svakog od njih. Zbog toga bi bilo mnogo lakše koristiti prethodni atribut klase "događaja" i stajali ih svi odjednom.
Još jedan izazov sa atributima ID-a je to što imaju veću specifičnost od atributa klasa. To znači da ako je potrebno da CSS prevaziđe prethodno uspostavljen stil, može biti teško to učiniti ako se previše oslanjate na ID-je. Iz tog razloga mnogi web programeri su odustali od korišćenja ID-ova u njihovoj oznaci, čak i ako nameravaju samo jednom koristiti tu vrijednost i umjesto toga pretvorili se u manje specifične atribute klasa za gotovo sve stilove.
Jedna oblast u kojoj atributi ID-a dolaze u igru je kada želite da kreirate stranicu koja ima in-link sidro veze. Na primjer, ako imate web stranicu paralaksnog stila koji sadrži sve sadržaje na jednoj stranici sa vezama koje "skokiraju" na različite dijelove te stranice. Ovo se radi pomoću atributa ID-a i tekstualnih veza koje koriste ove sidrenje veze.
Jednostavno biste dodali vrijednost tog atributa, kojoj prethodi simbol #, u atribut href veze, ovako:
Ovo je veza
Kada kliknete ili dodirnete, ova veza će preći na deo stranice sa atributom ovog ID-a. Ako nijedan element na stranici nije koristio ovu ID vrednost, veza ne bi ništa učinila.
Zapamtite, ako želite da kreirate povezivanje na stranici na sajtu, biće potrebno korištenje ID atributa, ali se i dalje možete pretvoriti u klasu za opšte stilove CSS stila. Ovako obilježavam stranice danas - korištio sam razrede selektora koliko god je to moguće i samo se obraćam ID-ima kada mi je potreban atribut koji djeluju ne samo kao kukavica za CSS, već i kao vezu unutar stranice.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard na 8/9/17