Početak CSS-a
CSS se oslanja na pravila uparivanja uzoraka kako bi utvrdila koji stil se primjenjuje na koji element u dokumentu. Ovi obrasci se zovu selektori i kreću se od imena oznaka (na primjer, p da se podudaraju sa oznakama pasusa) vrlo složenim obrascima koji se podudaraju s specifičnim dijelovima dokumenta (na primjer, p # myid> b.highlight bi se podudarala s bilo kojom oznakom b klasa isticanja koja je dijete pasusa sa id miidom).
Selektor CSS-a je deo CSS stila koji identifikuje koji deo web stranice treba stajling. Selektor sadrži jedno ili više svojstava koja definišu kako će izabrani HTML biti stilizovan.
CSS selektori
Postoji nekoliko različitih vrsta selektora:
- tip selektora - usklađivanje određenog elementa
- klase selektora - elementi koji odgovaraju specifičnoj klasi
- ID selektora - podudaranje elementa sa određenim ID-om
- potomci selektora - elementi koji su potomci određenog elementa
- detektori selektora - elementi koji odgovaraju detetu određenog elementa
- univerzalni selektori - odgovarajući bilo koji element
- susednim selektorima-srodnim elementima koji su prethodili određenom elementu
- atribut selektora-podudaranja elemenata sa određenom vrijednošću atributa ili atributa
- pseudo-klasa selektora - elementi koji odgovaraju specifičnoj pseudo klasi
- pseudo-elementi selektora - elementi koji odgovaraju specifičnim osobinama pseudo-elementa
Formatiraj CSS stilove i CSS selektore
Format CSS stila izgleda ovako:
selektor {stil svojstvo: stil; }
Odvojite više selektora koji imaju isti stil sa zapovijima. Ovo se zove selektorska grupacija. Na primjer:
selector1 , selector2 {style property: style; }
Selektori za grupisanje su stenografski mehanizam za čuvanje vaših CSS stilova kompaktnih.
Gornja grupa bi imala isti efekat kao i:
selector1 {style property: style; }
selector2 {style property: style; }
Uvek testirajte CSS selektore
Svi pretraživači ne podržavaju sve CSS selektore. Zato obavezno testirajte svoje birače u onom broju pretraživača na što više operativnih sistema koliko možete. Ali ako koristite CSS 1 ili CSS2 selektore, trebalo bi da ste u redu.