"PRATICA 2: Presentazione Css"
#coperturaPagina { width: 1000px; min-height: 800px; margin-left: auto; margin-right: auto; border: #f00 solid 0px; } /* INIZIO: INTESTAZIONE */ header { width: 900px; height: 40px; text-align: center; border: #ccf solid 1px; } /* INIZIO: Menù di Navigazione */ nav#NAV_ORIZZONTALE { width: 900px; height: 50px; font-family: Verdana, "Comic Sans MS", Helvetica, Sans-Serif; margin: 3px 0px 0px 0px; padding: 0px 0px 0px 0px; border: #000 solid 0px; } .menuNavigazione { text-align: center; background: #FFF; color: #000; margin: 0; padding: 6px 0 5px 0; border-bottom: 1px solid #000; } .menuNavigazione li { display: inline; } .menuNavigazione a { height: 0; padding: 5px 0.7em; border: 1px solid #000; text-decoration: none; margin: -6px .3em; } .menuNavigazione .voceCorrente a { border-bottom: none; padding-bottom: 6px; } .menuNavigazione a:link, .menuNavigazione a:visited { background: #97D2D4; color: #444; } .menuNavigazione a:hover, .menuNavigazione a:focus, .menuNavigazione a:active { background: #EEE; color: #000; } .menuNavigazione .voceCorrente a:link, .menuNavigazione .voceCorrente a:visited, .menuNavigazione .voceCorrente a:hover, .menuNavigazione .voceCorrente a:focus, .menuNavigazione .voceCorrente a:active { background: #FFF; color: #000; border-bottom: none; padding-bottom: 6px; } /* - inizio NAV_SINISTRA - */ nav#NAV_SINISTRA { float: left; width: 170px; height: 540px; background: #67C2C7; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: #f00 solid 0px; } .titolo h4 { width: 140px; font-family: Verdana; font-size: 15px; font-weight: normal; color:#999; margin: 10px 0px 0px 15px; padding: 0px 0px 0px 0px; border: #f00 solid 0px; } .menuVerticale { width:160px; margin: 18px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style:none; font-family: Calibri; } .menuVerticale a { display:block; text-decoration:none; border-right:1px solid #000; border-bottom:1px solid #000; border-left:5px solid #722059; padding: 2px 0px 2px 5px; margin: 1px 0px 1px 0px; background:#fff; color:#009; font-size: 14px; } .menuVerticale li { display:inline; } .menuVerticale a { height:auto!important; height:0; } .menuVerticale a:link, .menuVerticale a:visited { background:#678DC8; color:#fff; } .menuVerticale a:hover, .menuVerticale a:focus, .menuVerticale a:active { background:#eee; color:#666; border-color:#666; font-style:italic; padding-left: 5px; } .menuVerticale .active-menuVerticale a { background:#eee; color:#666; border-color:#666; font-style:italic; padding-left: 5px; } /* - inizio CONTENUTI - */ #CONTENUTI { width: 720px; height: 540px; background: #9AD0B9; margin: 0px 0px 0px 180px; padding: 0px 0px 0px 0px; border: #f00 solid 0px; } /* - inizio Contenuto scheda - */ #scheda { float: right; width: 700px; height: 520px; font: oblique small-caps normal 14px Calibri; letter-spacing: 1px; margin: 10px 10px 10px 10px; padding: 0px 0px 0px 0px; border: #f00 solid 0px; } /* - inizio PIE-DI-PAGINA - */ #PIE-DI-PAGINA { width: 900px; height: 25px; background: #CDE1B0; margin: 10px 0px 0px 0px; padding: 5px 0px 0px 0px; font: oblique small-caps normal 16px Calibri; text-align: center; letter-spacing: 2px; border: #f00 solid 0px; } #PIE-DI-PAGINA a { color: #000; text-decoration: underline; } #PIE-DI-PAGINA a:hover { color: #996600; text-decoration: none; } /* - fine PIE-DI-PAGINA - */
Codice sorgente dello style Css
(Browser) Risultato del codice sorgente HtmL CON il foglio di Style