Informatica 3 Liceo Scientifico Scienze Applicate/CSS pag3 Progetto
Aspetto
CSS menù di scelta
[modifica | modifica sorgente]Questa parte indica una lista in cui sono raggruppati: l’inserimento, la modifica e i progetti del docente, ai quali vengono date delle dimensioni
div.lista {
width: 700px;
}
Con questo comando le liste non risultano puntate.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Qui invece viene definito il carattere delle voci che fanno parte della lista.
li {
font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
}
Si riferisce sempre alla lista e in questa parte del codice possiamo notare che ci sono dei comandi che ci permettono di aumentare la dimensione del carattere e anche della riga quando si passa sopra il cursore del mouse, rimanendo sempre nel posto in cui si trovano.
li a {
text-decoration: none;
color: #4D4D4D;
display: block;
width: 700px;
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;}
li a:hover {
font-size: 25px;
background: #f6f6f6;
}
Questo è il risultato ottenuto:
Qui puoi vedere il funzionamento della funzione: