body {/*background : url(sfondo.jpg) fixed #808080*/
background: green;}
#contenitore
{margin: 2px auto; /* margini sup e inf */
border: 2px #f0f0f0 solid;
background: white;
width: 86%;
border-radius: 6px;} /* angolo arrotondato */
#contenitore2
{margin: 2px auto; /* margini sup e inf */
border: 2px #f0f0f0 solid;
font-size: 12px;
font-family: arial;
background: white;
border-radius: 2px;} /* angolo arrotondato */
#testataverde
{border: 1px green solid; width: 99%;
height: 67px;
font-size: 11px;
font-family: arial;
text-align: center;
color:black;
background:LIGHTCYAN;
margin: 0 auto;}
#tabsx {border: 1px #f0f0f0 solid;
width: 14%;
font-size: 10px;
font-family: arial;
background: white;
color:black;
margin: 0 auto;
float: left;} /*l’elemento viene spostato sul lato sx del box contenitore, il contenuto scorre a dx */
#tabcentro {border: 2px #f0f0f0 solid;
width: 83%;
font-size: 12px;
font-family: arial;
background: white;
color:black;
margin: 0 auto;
text-align: left;
float: right;} /*l’elemento viene spostato sul lato dx del box contenitore, il contenuto scorre a sx */
#bottone {border: 3px #f0f0f0 solid;
width: 22%;
font-size: 10px;
font: bold;
font-family: arial;
background: #c0c0c0;
color:black;
margin: 0 auto;
border-radius: 5px;
float: center;
height: 18px;
text-align: center; /* orizzontale */
/*margin-left: 3px;*/ }
/* a.immagine:hover {
border-color: red}
SCARICA IL PROGRAMMA ANALITICO
padding: 3px 0.5em;
padding è usato per creare spazio intorno al contenuto del box;
se si usano tre valori: il primo si riferisce al margine sup, il secondo sx/dx, il terzo inf;
se si usano due valori: il primo si riferisce ai lati sup/inf, il secondo sx/dx;
se si usa un solo valore: uguale distanza ai quattro lati.
width: 120px;
height: 120x;*/
#footer {border: 2px #c0c0c0 solid;
width: 98%;
font: 12px arial;
background: #F5F5F5;
color: black;
border-radius: 3px;
margin: 0 auto;}
/*height: 50px; background: #f0f0f0;
font-size: 12px;
font: bold;
font-family: arial; */
a:link /*link non visitati*/
{text-decoration:none; color: green;}
a:visited /*link visitati*/
{text-decoration:none;color: green;}
a:hover /*mouse over link 12px*/
{color: green; font-size: 18px; font: bold; text-decoration: underline;}
a:active /*selected link*/
{color: green; font: bold;}
#navlist
{padding: 1px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px arial;}
#navlist li
{list-style: none;
margin: 0;
display: inline;}
#navlist li a
{padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #c0c0c0;
text-decoration: none;}
#navlist li a:link { color: #448;} /* a:link sono i link ancora da visitare (da cliccare)*/
#navlist li a:visited { color: #667;} /* a:visited sono i links visitati (già cliccati)*/
#navlist li a:hover /* a:hover evento del mouse quando viene posizionato sopra il link */
{color: CHOCOLATE;
background: #f0f0f0;
border-color: #227;
font-size: 13px}
#navlist li a#current
{background: white;
border-bottom: 1px solid white;}
/* Dove a:link sono i link ancora da visitare (da cliccare). a:visited sono invece i links visitati (già cliccati) e a:hover si riferisce all'evento del mouse nel momento preciso in cui viene posizionato sopra il link.
*/
/* ESEMPIO
a:link {text-decoration: none;}
a:visited {text-decoration: none; color: green;}
a:hover {
Color: red;
font-family: "MS Sans Serif", Geneva, sans-serif;
font-weight: bold;
font-size: 35px;
}
*/
#menu_orizzontale
{
border: 5px #00f solid;
width: 80%;
font-size: 20px;
font-family: consolas;
background: #157;
color: #fff;
border-radius: 10px;
margin: 10px auto;
height: 70px;
clear: both;
}
#menu_orizzontale li
{
float: left;
margin: 20px;
}
#c2{
margin-left: auto;
margin-right: auto;
width: 95%;
}
#menu {
border: 5px #00f solid;
width: 20%;
font-size: 16px;
font-family: consolas;
background: #157;
color: #fff;
border-radius: 10px;
margin-left: 15px;
float: left;
}
#colonna2 {
border: 5px #00f solid;
width: 40%;
font-size: 10px;
font-family: arial;
background: #157;
color: #fff;
border-radius: 10px;
margin-left: 15px;
float: left;
}
#colonna3 {
border: 5px #00f solid;
width: 20%;
font-size: 10px;
font-family: arial;
background: #157;
color: #fff;
border-radius: 10px;
margin-left: 15px;
float: left;
}
#contenuti {
border: 5px #00f solid;
width: 75%;
font-size: 20px;
font-family: consolas;
background: #157;
color: #fff;
border-radius: 10px;
margin-left: 15px;
float: left;
}
p {
margin: 20px;
}
h3 {
margin: 10px;
}
#footer p
{text-align: center;}
/* 22-01-2020 Immagine flessibile: le immagini si adattano automaticamente al layout, ovvero
assumono una larghezza che sia sempre pari a quella dell’elemento che le contiene.
*/
.flex {max-width: 100%}