Razredi i ID-ovi Pomoć Proširite svoj CSS
Izgradnja web stranica na današnjem webu zahtijeva duboko razumijevanje CSS (Cascading Style Sheets). Ovo su upute koje dajete web stranici kako biste utvrdili kako će izgledati u prozoru preglednika. Na svoj HTML dokument primjenjujete niz "stilova" koji će stvoriti izgled i dojam vaše web stranice.
Postoji mnogo načina primjene navedenih stilova preko dokumenta, ali često želite koristiti stil samo na nekim elementima u dokumentu, ali ne i za sve instance tog elementa.
Možda ćete također htjeti izraditi stil koji možete primijeniti na nekoliko elemenata u dokumentu, a da ne morate ponoviti pravilo stila za svaku pojedinu instancu. Da biste postigli te željene stilove, koristit ćete klase i ID HTML atribute. Ove atribute su globalni atributi koji se mogu primijeniti na gotovo svaku HTML oznaku . To znači da li ste u svojem dokumentu oblikovali odjeljke, stavke, veze, popise ili bilo koji drugi dio HTML-a, možete se obratiti klasama i ID atributima pomoći vam ostvariti ovaj zadatak!
Odabiri klase
Odabir klase omogućuje postavljanje više stilova na isti element ili oznaku u dokumentu. Na primjer, možda biste htjeli da se određene odjeljke vašeg teksta pozivaju u drugu boju od ostatka teksta u dokumentu. Ovi istaknuti dijelovi mogu biti "upozorenje" koje postavljate na stranici. Možete dodijeliti svoje odlomke s ovakvim klasama:
p {boja: # 0000ff; }
p.alert {color: # ff0000; }
Ti stilovi bi postavili boju svih odlomaka na plavo (# 0000ff), ali bilo koji stavak s klasičnim atributom "upozorenja" umjesto toga trebao bi biti označen crvenom bojom (# ff0000). To je zato što atribut klase ima veću specifičnost nego prvi pravilnik CSS-a koji koristi samo selektor oznake.
Kada radite s CSS-om, određeno pravilo nadjačat će manje specifičan. Dakle, u ovom primjeru, općenitije pravilo postavlja boju svih odlomaka, ali drugo, specifičnije pravilo nego nadjačava tu postavku samo u nekim odlomcima.
Evo kako bi se to moglo upotrijebiti u nekim HTML oznakama:
Ovaj stavak bit će prikazan plavom bojom, što je zadana postavka za stranicu.
Ovaj stavak također bi bio plavi.
I ovaj stavak bit će prikazan crveno jer će klasični atribut prebrisati standardnu plavu boju iz elementa odabira elemenata.
U tom primjeru, stil "p.alert" odnosi se samo na elemente odlomaka koji upotrebljavaju tu klasu "upozorenja". Ako ste htjeli upotrijebiti tu klasu u više HTML elemenata, jednostavno biste uklonili HTML element od početka (samo ostavite razdoblje (.) na mjestu), ovako:
.alert {background-color: # ff0000;}
Ova je klasa dostupna svim elementima koji ga trebaju. Svaki dio HTML-a koji ima vrijednost atributa klase "upozorenje" sada će dobiti taj stil. U HTML-u u nastavku imamo i stavak i razinu naslova 2 koja upotrebljava klasu "upozorenja". Oboje bi imale pozadinsku boju crvene boje na temelju CSS-a koji smo upravo pokazali.
Ovaj stavak bi bio napisan crvenom bojom.
I ovo h2 bi također bilo crveno.
Na web mjestima danas se klasični atributi često upotrebljavaju na većini elemenata jer je lakše raditi s perspektivom specifičnosti kao ID-ovi. Većina aktualnih HTML stranica pronaći ćete u klasičnim atributima, od kojih se neke ponavljaju u dokumentu i drugima koji se mogu pojaviti samo jednom.
ID Izbornici
ID selektor omogućuje vam da dajete naziv određenom stilu bez pridruživanja oznaku ili nekom drugom HTML elementu . Recimo da ste podijelili svoju HTML oznaku koja sadrži informacije o događaju.
Moguće je da ova odjeljka bude ID atribut "događaja", a zatim, ako želite skicirati tu podjelu s crnom crnom od 1 piksela, napišite ovakav ID kod:
#event {border: 1px solid # 000; }
Izazov s ID selektorima je taj da se ne mogu ponoviti u HTML dokumentu. Moraju biti jedinstvene (možete upotrijebiti isti ID na više stranica vaše web-lokacije, ali samo jednom u svakom pojedinačnom HTML dokumentu). Dakle, ako ste imali 3 događaja koji su svi trebali ovu granicu, trebali biste im dati ID atribute "event1", "event2" i "event3" i stil svakog od njih. Stoga bi bilo mnogo lakše koristiti gore navedeni atribut klase "događaja" i stilirati ih sve odjednom.
Drugi izazov s ID osobinama je da imaju veću specifičnost od atributa klase. To znači da ako morate imati CSS koji nadjačava prethodno uspostavljeni stil, to može biti teško učiniti ako se previše oslanjate na identifikacijske brojeve. Zbog toga se mnogi razvojni programeri web-lokacije odmaknuli od upotrebe ID-ova u svojem označavanju, čak i ako samo jednom namjeravaju koristiti tu vrijednost, a umjesto toga su se okrenuli manje atraktivnim atributima klase za gotovo sve stilove.
Jedno područje na kojem ID atributi dolaze u igru je kada želite stvoriti stranicu koja ima veze za sidrenje unutar stranice. Na primjer, ako imate web mjesto paralakse koja sadrži sav sadržaj na jednoj stranici s vezama koje "preskaču" na različite dijelove te stranice. To je učinjeno pomoću ID atributa i tekstualnih veza koje koriste ove sidrene veze.
Jednostavno biste dodali vrijednost tog atributa, prethodi znak #, u atribut href veze, ovako:
Ovo je veza
Kada kliknete ili dodirnete, ova će veza prijeći na dio stranice s ovim ID atributom. Ako nijedan element na stranici nije upotrijebio ovu ID vrijednost, veza ne bi učinila ništa.
Imajte na umu da, ako želite stvoriti vezu unutar stranice na web lokaciji, upotreba ID atributa bit će potrebna, ali se i dalje možete obratiti klasama za opće CSS styling svrhe. Na taj način danas označavam stranice - upotrebljavala sam klasne selektore što je više moguće i samo se obraćam ID-ovima kada mi je potrebna atribut ne samo kao kuka za CSS, već i kao vezu unutar stranice.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 8/9/17