Cascading Style Sheets (CSS) je ime, ki se uporablja za opis načina oblikovanja dokumenta za označevalni jezik hiperbesedila (HTML) ali razširljiv označevalni jezik (XML). Uporablja se lahko za vse vrste dokumentov XML, vendar se najpogosteje uporablja pri spletnih straneh, napisanih v HTML. CSS se lahko uporablja za ustvarjanje spustnih menijev na spletnih straneh. V spustnih menijih CSS je prikazan en sam element besedila, dokler obiskovalec ne uporabi miške, da se premakne nad meni, pri čemer se prikaže celoten seznam elementov. Meni je ustvarjen z uporabo identifikacije CSS in oznak razreda.
Spustni meniji CSS se začnejo z izbirnikom ID-jev. Ta izbirnik je videti kot #. Sledi ime ID-ja. ID lahko poimenujete kar koli, vendar mora biti opisen, da lahko drugi preberejo vašo kodo. Na primer, spustni meni lahko uporablja kodo #drop1.
Ustvarite razred za prvi element v spustnem meniju z izbirnikom razreda, ki je videti kot pika. Razred bo del elementa seznama HTML. Element seznama je označen z znaki “li”. Ustvarite razred najvišje ravni tako, da vnesete »li.top«. Opis razreda je med dvema zavitim oklepajem.
Naslednji primer prikazuje celotno kodo CSS za prvi element na seznamu:
#drop1 li.top {font-family: Verdana, Geneva, san-serif;
velikost pisave: 100%;
barva: #FF00FF;}
Nato ustvarite razred za elemente, ki bodo skriti pod prvim elementom v meniju CSS. Razred bo opisal neurejen seznam HTML, ki je označen z znaki “ul.” Opis bo v bistvu videti enako kot element menija na najvišji ravni, z dodatkom besed “display:none#59” na začetku opisa. To pomeni, da bodo elementi na neurejenem seznamu skriti, dokler se kazalec ne premakne nad spustni meni CSS.
Spodaj je primer tega dela kode CSS:
#drop1 ul.link {
display:none#59
družina pisav: Verdana, Geneva, san-serif;
velikost pisave: 100%;
barva: #FF00FF;}
Želeli boste, da se spustni meni CSS prikaže nad preostalim delom dokumenta HMTL. V nasprotnem primeru, ko obiskovalec lebdi nad menijem, bo preostanek dokumenta potisnil navzdol po strani, da bi naredil prostor za seznam. To bo naredilo, če element položaja nastavite na absolutno.
Koda za nastavitev položaja je:
#drop1{position:absolute;}
To je vse, kar je potrebno za CSS del spustnega menija. Preostanek spustnega menija CSS je ustvarjen v dokumentu HTML z elementi »div«, »id«, »class«, »li« in »ul«. Oznaka “div” ločuje menijski del dokumenta. Vrsta
Ko odprete dokument v spletnem brskalniku, se spustni meni CSS prikaže kot en sam element na strani. Ko premaknete miško nad zgornji element, se prikaže preostali del menija. Preostalo besedilo na strani se ne bo premaknilo, del pa bo skrit v meniju.