Kaskadni listovi stilova definirajte izgled elementa web stranice povezivanjem atributa koje primijenite na taj element. Ti atributi mogu biti ID ili klasa i, kao i svi atributi, dodaju korisne informacije elementima kojima su pridruženi.
Ovisno o tome koji atribut dodajete elementu, možete napisati CSS selektor za primjenu potrebni vizualni stilovi koji su potrebni za postizanje izgleda i izgleda tog elementa i web stranice u cjelini.
Iako bilo ID-ovi ili razredi rade u svrhu njihovog spajanja s CSS pravilima, moderni web dizajn metode favoriziraju klase nad ID-ovima, dijelom i zato što su manje specifične i s njima je lakše raditi u cjelini.
Jedan ili više predavanja u CSS-u?
U većini slučajeva elementu dodijelite jedan atribut klase, ali zapravo niste ograničeni samo na jednu klasu kakva jeste s ID-ovima. Dok je element može imati samo jedan atribut ID, elementu možete dati nekoliko klasa, a u nekim će slučajevima to učiniti vašu stranicu lakšom za oblikovanje i još mnogo toga fleksibilno.
Ako elementu trebate dodijeliti nekoliko klasa, dodajte dodatne klase i jednostavno ih odvojite razmakom u svom atributu.
Na primjer, ovaj odlomak ima tri klase:
Ovo bi bio tekst odlomka
Ovo postavlja sljedeće tri klase na oznaku odlomka:
- Pullquote
- Istaknuto
- Lijevo
Primijetite razmake između svake od ovih vrijednosti klase. Ti su prostori ono što ih postavlja kao različite, pojedinačne razrede. To je također razlog zašto imena klasa ne mogu imati razmake u sebi jer bi ih time postavili kao zasebne razrede.
Jednom kad uvrstite vrijednosti razreda HTML, možete ih zatim dodijeliti kao klase u vašem CSS-u i primijeniti stilove koje želite dodati. Na primjer.
.pullquote {... }
.obilježeno {... }
str.lijevo {... }
U ovim se primjerima CSS deklaracije i parovi vrijednosti pojavljuju unutar kovrčavih zagrada, što je način na koji bi se ti stilovi primijenili na odgovarajući selektor.
Ako ti postaviti klasu na određeni element (na primjer, str.lijevo), još uvijek ga možete koristiti kao dio popisa klasa; međutim, imajte na umu da će to utjecati samo na one elemente koji su navedeni u CSS-u. Drugim riječima, str.lijevo stil primijenit će se samo na odlomke s ovom klasom, jer vaš selektor zapravo kaže da se primjenjuju na "odlomke s vrijednošću klase od lijevo, "Suprotno tome, druga dva selektora u primjeru ne navode određeni element, pa bi se primijenili na bilo koji element koji koristi te vrijednosti klase.
Višestruka nastava, semantika i JavaScript
Još jedna prednost korištenja nekoliko klasa je što povećava mogućnosti interaktivnosti.
Primijenite nove klase na postojeće elemente pomoću JavaScript-a bez uklanjanja bilo koje početne klase. Također možete koristiti klase za definiranje semantika elementa - dodajte dodatne klase kako biste definirali što taj element semantički znači. Ovaj pristup je kako Mikroformati djela.
Prednosti više klasa
Slojevitost nekoliko klasa može olakšati dodavanje posebnih efekata elementima bez potrebe za stvaranjem potpuno novog stila za taj element.
Na primjer, da biste plutali elemente lijevo ili desno, možete napisati dvije klase:
lijevo.
i.
pravo.
sa samo.
plutaju: lijevo;
i.
plutati: desno;
u njima. Zatim, kad god biste imali element koji treba plutati lijevo, jednostavno biste klasu dodali "lijevo" na njegov popis klasa.
Međutim, ovdje se može fino prošetati. Imajte na umu da web standardi nalažu razdvajanje stila i strukture. Struktura se obrađuje pomoću HTML-a, dok je stil u CSS-u. Ako je vaš HTML dokument ispunjen elementima koji svi imaju nazive klasa poput "crveno" ili "lijevo", to su imena koja diktirajte kako elementi trebaju izgledati, a ne kakvi jesu, prelazite tu granicu između strukture i stila.
Mane višestruke nastave
Najveći nedostatak korištenja nekoliko istovremenih predavanja na vašim elementima je taj što ih vremenom može učiniti pomalo nezgrapnima za gledanje i upravljanje. Može postati teško odrediti koji stilovi utječu na element i utječu li na njega neke skripte. Mnogi danas dostupni okviri, poput Bootstrapa, intenzivno koriste elemente s više klasa. Taj kôd može vrlo brzo izmaknuti kontroli i teško ga je raditi ako niste oprezni.
Kada koristite nekoliko klasa, riskirate i da stil jedne klase nadjača stil druge. Ovaj sudar tada može otežati dokučivanje zašto se vaši stilovi ne primjenjuju čak i kad se čini da bi trebali. Budite svjesni specifičnosti, čak i s atributima primijenjenim na taj jedan element.
Korištenjem alata poput alata Webmaster u Google Chromeu možete lakše vidjeti kako vaši predmeti utječu na vaše stilove i izbjeći taj problem sukobljenih stilova i atributa.