Menù CSS da file in cartella esterna

Veronica_

Nuovo Utente
29 Apr 2018
9
0
1
25
Buonasera,
Sto cercando di creare un menù con quattro semplici link.
Il problema è che siccome il file css deve essere per forza esterno al file HTML (comandi dettati dal professore) non riesco a farli comunicare e il risultato è una lista di link in HTML semplici.
Questo che segue è il codice HTML:
HTML:
<html>
    <head>
        <title>
            Volontariato
        </title>
    </head>
<body style="background-color: black;">
            <div id="footer" style="background-color: white; height: 700px;">
                <div id="Menu">
                    <ul>
                        <li class="voceMenu"><a href="ServizioCivile.html">Servizio Civile</a></li>
                        <li class="voceMenu"><a href="dischi.html">BLS-D</a> </li>
                        <li class="voceMenu"><a href="libri.html">bla bla</a> </li>
                        <li class="voceMenu"><a href="film.html">bla bla</a> </li>
                    </ul>
                </div>
            </div>
            
    </body>



</html>
e questo è il file CSS esterno:
Codice:
.voceMenu {
    list-style-type:none;
    background-color:white;
    border:2px solid black;
    border-radius:20px;
    width:75%;
    padding:3px;
    text-align:center;
}
.voceMenu:hover {
    background-color:#ddd; font-size:100%;
    animation: animazione 1s;
}

@keyframes animazione {
    0% {    background-color:white; }
    100% {    background-color:#ddd; font-size:130%;}
}

.testata {
    background-color:#000099;
    height:20%;
    line-height:100px;
    text-align:center;
}
.centrale {
    background-color:#000099;
    height:70%;

}
.contenuto {
    vertical-align:top;
        background-color:#00FF00;

    height:100%;
    width:70%;

    display:inline-block;
}
.menu {
    vertical-align:top;
    background-color:#CCFF00;
    height:100%;
    width:30%;

    display:inline-block;
}
.fondoPagina {
    background-color:#FF0000;
    height:10%;
    line-height:50px;
    text-align:center;
}
.bottone {
    background-color:red;
    border-radius:5px;
    border:2.5px solid black;
    padding:2px;
}

Potete darmi una mano a capire l'errore e risolverlo? Grazie mille :D
 
nella root principale metti un file con nome style.css dentro al file metti tutto il tuo codice css sempre nella root principale metti la tua pagina html dove tra i tag <head>...</head> metti questo codice
HTML:
<link href="style.css" rel="stylesheet" type="text/css">
Ricorda che il colore di sfondo del body è meglio metterlo nel css non in linea nel tag body e il DTD è meglio sia html5
 
Grazie mille, adesso funziona. Una curiosità: per il javascript, sostituendo "style.css" con "style.js" e il "type", è la stessa sintassi?
 
Codice:
<script src="style.js" type="text/javascript"></script>
 

Discussioni simili