Cascading Style Sheets (CSS) è un nome utilizzato per descrivere il modo in cui viene formattato un documento Hyper Text Markup Language (HTML) o Extensible Markup Language (XML). Può essere utilizzato per qualsiasi tipo di documento XML, ma è più spesso utilizzato con pagine Web scritte in HTML. I CSS possono essere utilizzati per creare menu a discesa nelle pagine web. I menu CSS a discesa hanno un singolo elemento di testo mostrato fino a quando il visitatore non usa il mouse per passare il mouse sul menu, a quel punto viene mostrato l’intero elenco di elementi. Il menu viene creato utilizzando l’identificazione CSS e i tag di classe.
I menu CSS a discesa iniziano con il selettore ID. Questo selettore assomiglia a #. È seguito dal nome dell’ID. Puoi nominare l’ID qualsiasi cosa, ma dovrebbe essere descrittivo in modo che altri possano leggere il tuo codice. Ad esempio, un menu a discesa può utilizzare il codice #drop1.
Crea la classe per il primo elemento nel menu a discesa utilizzando il selettore di classe, che assomiglia a un punto. La classe farà parte dell’elemento dell’elenco HTML. L’elemento della lista è designato dai caratteri “li”. Crea la classe di primo livello digitando “li.top”. La descrizione della classe è contenuta tra due parentesi graffe.
L’esempio seguente mostra l’intero codice CSS per il primo elemento nell’elenco:
#drop1 li.top {font-family: Verdana, Ginevra, san-serif;
dimensione carattere: 100%;
colore: #FF00FF;}
Quindi, crea una classe per gli elementi che saranno nascosti sotto il primo elemento nel menu CSS. La classe descriverà l’elenco non ordinato HTML, che è designato con i caratteri “ul”. La descrizione avrà essenzialmente lo stesso aspetto della voce di menu di primo livello, con l’aggiunta delle parole “display:none#59” all’inizio della descrizione. Ciò indica che gli elementi nell’elenco non ordinato verranno nascosti finché il puntatore non passa sopra il menu CSS a discesa.
Quello che segue è un esempio di questa parte del codice CSS:
#drop1 ul.link {
display: nessuno#59
font-family: Verdana, Ginevra, san-serif;
dimensione carattere: 100%;
colore: #FF00FF;}
Dovrai visualizzare il menu CSS a discesa sul resto del documento HTML. Altrimenti, quando il visitatore passa con il mouse sul menu, spingerà il resto del documento in basso nella pagina per fare spazio all’elenco. L’impostazione dell’elemento position su assoluto lo farà.
Il codice per impostare la posizione è:
#drop1{posizione:assoluta;}
Questo è tutto ciò che è necessario per la parte CSS del menu a discesa. Il resto del menu CSS a discesa viene creato nel documento HTML utilizzando gli elementi “div”, “id”, “class”, “li” e “ul”. Il tag “div” separa la parte del menu del documento. genere
Quando apri il documento in un browser web, il menu CSS a discesa apparirà come un singolo elemento nella pagina. Quando sposti il mouse sull’elemento in alto, apparirà il resto del menu. Il resto del testo sulla pagina non si sposterà, ma una parte sarà nascosta dal menu.