CSS (CSS) on nimi, jota käytetään kuvaamaan tapaa, jolla Hyper Text Markup Language (HTML) – tai Extensible Markup Language (XML) -asiakirja muotoillaan. Sitä voidaan käyttää kaikentyyppisiin XML -asiakirjoihin, mutta sitä käytetään useimmiten HTML -muotoisilla verkkosivuilla. CSS: n avulla voidaan luoda avattavia valikoita verkkosivuille. Avattavissa CSS -valikoissa on yksi tekstikohde, kunnes kävijä vie hiiren valikon päälle, jolloin koko kohteiden luettelo näytetään. Valikko luodaan CSS -tunnisteella ja luokkatunnisteilla.
Avattavat CSS -valikot alkavat ID -valitsimella. Tämä valitsin näyttää #: lta. Sitä seuraa henkilötunnuksen nimi. Voit nimetä tunnuksen mitä tahansa, mutta sen on oltava kuvaava, jotta muut voivat lukea koodisi. Esimerkiksi avattavassa valikossa voi käyttää koodia #drop1.
Luo luokka avattavan valikon ensimmäiselle kohteelle käyttämällä luokan valitsinta, joka näyttää pisteeltä. Luokka on osa HTML -luetteloelementtiä. Luetteloelementti on merkitty merkeillä “li”. Luo ylätason luokka kirjoittamalla “li.top”. Luokkakuvaus on kahden kiharan aaltosulkeen välissä.
Seuraava esimerkki näyttää luettelon ensimmäisen kohteen koko CSS -koodin:
#drop1 li.top {font-family: Verdana, Geneve, san-serif;
kirjasinkoko: 100%;
väri: #FF00FF;}
Luo seuraavaksi luokka kohteille, jotka piilotetaan CSS -valikon ensimmäisen kohteen alle. Luokka kuvaa järjestämättömän HTML -luettelon, joka on merkitty merkeillä “ul”. Kuvaus näyttää olennaisesti samalta kuin ylätason valikkokohta, ja kuvauksen alussa on sanat “display: none#59”. Tämä osoittaa, että järjestämättömän luettelon kohteet ovat piilossa, kunnes osoitin siirtyy avattavan CSS -valikon päälle.
Seuraava on esimerkki tästä CSS -koodin osasta:
#drop1 ul.link {
näyttö: ei#59
fonttiperhe: Verdana, Geneve, san-serif;
kirjasinkoko: 100%;
väri: #FF00FF;}
Haluat avattavan CSS -valikon näkyvän muun HMTL -asiakirjan päällä. Muussa tapauksessa, kun vierailija vie hiiren valikon päälle, se työntää loput asiakirjasta alas sivulle, jotta luettelolle jää tilaa. Asetus -elementin asettaminen absoluuttiseksi tekee tämän.
Paikan asettamiseen käytettävä koodi on:
#pudota1 {position: ehdoton;}
Se on kaikki mitä tarvitaan avattavan valikon CSS -osioon. Loput avattavasta CSS -valikosta luodaan HTML -dokumenttiin käyttämällä “div”, “id”, “class”, “li” ja “ul” -elementtejä. “Div” -tunniste erottaa asiakirjan valikko -osan. Tyyppi
Kun avaat asiakirjan verkkoselaimella, avattava CSS -valikko tulee näkyviin sivun yksittäisenä kohteena. Kun siirrät hiiren ylemmän kohteen päälle, loput valikosta tulevat näkyviin. Loput sivun tekstistä eivät liiku, mutta osa piilotetaan valikosta.