Izgradnja dobro oblikovanih web stranica na današnjem webu zahtijeva duboko razumijevanje Kaskadni listovi stilova. Primijenite niz CSS stilova na svoj HTML dokument kako biste informirali izgled i izgled vaše web stranice.
Atributi klase i ID-a
Dizajneri ponekad moraju primijeniti stil samo na neki elemenata u dokumentu, ali ne i sve instance tog elementa. Da biste postigli ove željene stilove, upotrijebite razred i iskaznica HTML atributi. Ti su atributi globalni atributi primjenjivi na gotovo sve HTML oznaka—Tako da li stilizirate podjele, odlomke, veze, popise ili bilo koji drugi dio HTML-a u vašem dokumentu, možete se obratiti atributima klase i ID-a koji će vam pomoći da izvršite ovaj zadatak!
Selektori razreda
Birač klase postavlja nekoliko stilova istom elementu ili oznaci u dokumentu. Na primjer, da biste kao upozorenje pozvali određene dijelove teksta u drugoj boji, dodijelite svoje odlomke razredima poput ovog:
p {boja: # 0000ff; }
p.alert {boja: # ff0000; }
Ti bi stilovi postavili boju
svi paragrafe u plavu (# 0000ff), ali bilo koji odlomak s atributom klase od uzbuna umjesto toga crvenim stilom (# ff0000). To je zato što atribut klase ima veću specifičnost od prvog CSS pravila, koje koristi samo selektor oznaka. Pri radu s CSS, preciznije pravilo nadjačat će manje određeno. Dakle, u ovom primjeru općenitije pravilo postavlja boju svih odlomaka, ali drugo, specifičnije pravilo od poništavanja te postavke samo u nekim odlomcima.Evo kako bi se ovo moglo koristiti u nekim HTML oznakama:
Ovaj odlomak bio bi prikazan plavom bojom, što je zadani postav za stranicu.
Ovaj bi odlomak također bio u plavoj boji.
A ovaj bi se odlomak prikazivao crveno, jer bi atribut klase prepisao standardnu plavu boju iz stila birača elemenata.
U tom primjeru stil p. upozorenje odnosilo bi se samo na elemente odlomka koji to koriste uzbuna razred. Da biste koristili tu klasu u nekoliko HTML elemenata, uklonite HTML element s početka poziva stila, ovako:
.alert {background-color: # ff0000;}
Ova je klasa sada dostupna bilo kojem elementu koji joj treba. Bilo koji dio vašeg HTML-a koji ima vrijednost atributa klase uzbuna sada će dobiti ovaj stil. U donjem HTML-u imamo i odlomak i naslov druge razine koji koriste uzbuna razred. Oba prikazuju crvenu pozadinsku boju:
Ovaj bi odlomak bio napisan crvenom bojom.
Na web lokacijama danas se atributi klase često koriste na većini elemenata jer je s njima lakše raditi iz perspektive specifičnosti nego s ID-ovima. Naći ćete najnovije HTML stranice koje se ispunjavaju atributima klase, od kojih se neke često ponavljaju u dokumentu, a druge koje se mogu pojaviti samo jednom.
Selektori ID-a
ID selektor imenuje određeni stil bez povezivanja s oznakom ili nekim drugim HTML element.
Pretpostavite podjelu u vašem HTML označavanju koja sadrži informacije o događaju. Možete dati ovoj diviziji Atribut ID od događaj, a zatim ocrtajte tu podjelu crnim obrubom širine 1 piksela:
#event {border: 1px solid # 000; }
Izazov s Selektori ID-a jest da se ne mogu ponoviti u HTML dokumentu. Moraju biti jedinstveni (možete koristiti isti ID na nekoliko stranica svoje web lokacije, ali samo jednom u svakom pojedinačnom HTML dokumentu). Dakle, za tri događaja kojima je svima potrebna ova granica, morate identificirati ID atribute događaj1, događaj2, i događaj3 i oblikovati svakog od njih. Stoga bi bilo puno lakše koristiti gore spomenuti atribut klase događaj i stilizirati ih sve odjednom.
Komplikacije ID atributa
Sljedeći izazov s ID atributima je taj što imaju veću specifičnost od atributa klase. Da biste nadjačali prethodno uspostavljeni stil, može biti teško to učiniti ako ste se previše oslanjali na ID-ove. Mnogi web programeri odmaknuli su se od koristeći ID-ove u svom označavanju, čak i ako namjeravaju upotrijebiti tu vrijednost samo jednom, a umjesto toga okrenuli su se manje specifičnim atributima klase za gotovo sve stilova.
Jedino područje u kojem se atributi ID pojavljuju jest kada želite stvoriti stranicu koja ima usidrene veze unutar stranice. Na primjer, razmislite o web mjestu u paralaksnom stilu koje sadrži sav sadržaj na jednoj stranici s vezama koje "prelaze" na razne dijelove te stranice. Atributi ID-a i tekstualne poveznice koriste ove sidrene veze. Dodajte vrijednost tog atributa kojem prethodi znak # simbol, na href atribut veze, ovako:
Ovo je poveznica
Kad se klikne ili dodirne, ova veza preskače na dio stranice koji ima ovaj atribut ID. Ako niti jedan element na stranici ne koristi ovu vrijednost ID-a, veza ne bi učinila ništa.
Da biste stvorili povezivanje na stranici na web mjestu, bit će potrebna upotreba ID atributa, ali svejedno se možete obratiti klasama za opće potrebe CSS stila. Na ovaj način dizajneri danas označavaju stranice - oni koriste izbornike klasa što je više moguće i obraćaju se ID-ovima samo kada im je potreban atribut da djeluje ne samo kao spojnica za CSS, već i kao veza na stranici.