Cascading Style Sheets (CSS) naziv je koji se koristi za opisivanje načina na koji se formatira dokument jezika za označavanje hiperteksta (HTML) ili Extensible Markup Language (XML). Može se koristiti za bilo koju vrstu XML dokumenta, ali se najčešće koristi s web stranicama napisanim u HTML-u. CSS se može koristiti za stvaranje padajućih izbornika na web stranicama. Padajući CSS izbornici imaju jednu tekstualnu stavku koja se prikazuje sve dok posjetitelj ne upotrijebi pokazivač miša preko izbornika, u kojem trenutku se prikazuje cijeli popis stavki. Izbornik je kreiran pomoću CSS identifikacije i oznaka klase.
Padajući CSS izbornici počinju s ID selektorom. Ovaj birač izgleda kao #. Slijedi naziv ID-a. ID-u možete imenovati bilo što, ali bi trebao biti opisan kako bi drugi mogli pročitati vaš kod. Na primjer, padajući izbornik može koristiti kod #drop1.
Stvorite klasu za prvu stavku u padajućem izborniku pomoću birača klase, koji izgleda kao točka. Klasa će biti dio elementa HTML popisa. Element popisa označen je znakovima “li”. Stvorite klasu najviše razine upisivanjem “li.top”. Opis klase nalazi se između dvije vitičaste zagrade.
Sljedeći primjer prikazuje cijeli CSS kod za prvu stavku na popisu:
#drop1 li.top {font-family: Verdana, Geneva, san-serif;
veličina slova: 100%;
boja: #FF00FF;}
Zatim stvorite klasu za stavke koje će biti skrivene ispod prve stavke u CSS izborniku. Klasa će opisati HTML neuređeni popis, koji je označen znakovima “ul.” Opis će izgledati u osnovi isto kao i stavka izbornika najviše razine, s dodatkom riječi “display:none#59” na početku opisa. To znači da će stavke na neuređenom popisu biti skrivene sve dok pokazivač ne pređe iznad padajućeg CSS izbornika.
Sljedeći je primjer ovog dijela CSS koda:
#drop1 ul.link {
display:none#59
font-family: Verdana, Geneva, san-serif;
veličina slova: 100%;
boja: #FF00FF;}
Htjet ćete da se padajući CSS izbornik pojavi iznad ostatka HMTL dokumenta. Inače, kada posjetitelj pređe mišem iznad izbornika, gurnut će ostatak dokumenta niz stranicu kako bi napravio mjesta za popis. Postavljanje elementa položaja na apsolutni, učinit će to.
Kod za postavljanje položaja je:
#drop1{position:apsolute;}
To je sve što je potrebno za CSS dio padajućeg izbornika. Ostatak padajućeg CSS izbornika kreiran je u HTML dokumentu pomoću elemenata “div”, “id”, “class”, “li” i “ul”. Oznaka “div” odvaja dio izbornika dokumenta. Tip
Kada otvorite dokument u web-pregledniku, padajući CSS izbornik pojavit će se kao jedna stavka na stranici. Kada pomaknete miša preko gornje stavke, pojavit će se ostatak izbornika. Ostatak teksta na stranici neće se pomicati, ali će dio biti skriven izbornikom.