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 neki elemenata u dokumentu, ali ne i svih instanci 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. Ovi atributi su globalni atributi koji se mogu primijeniti na gotovo svaku HTML oznaku. To znači da li ste u vašem dokumentu oblikovali odjeljke, odlomke, veze, popise ili bilo koji drugi dio HTML-a, možete se obratiti klasičnim i ID atributima koji će vam pomoći u ostvarivanju ovog zadatka!
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; } Ovi stilovi bi postavili boju svi stavke do plave boje (# 0000ff), no 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 određuje boju svih odlomaka, ali drugo, specifičnije pravilo nego to poništava 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 odlomka koji upotrebljavaju tu klasu "upozorenja". Ako biste htjeli upotrijebiti tu klasu na više HTML elemenata, jednostavno biste uklonili HTML element od početka poziva stila (samo napustite 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.
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 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 simbol "#", atributu "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 ne upotrebljava 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. Tako danas označavamo stranice - što više upotrebljavamo klasne selektore i samo se prebacujemo na ID-ove kada nam je potreban atribut kako bi djelovao ne samo kao kuka za CSS, već i kao vezu unutar stranice.I ovaj h2 bi također bio crven.
ID Izbornici
Komplikacije atributa ID-a
