Nel precendente articolo, abbiamo visto il codice della pagina in Html5, adesso gli attribuiamo il foglio di stile o CSS.
Avevamo chiamato il CSS style.css e lo iniziamo subito a scrivere.
Apriamo Dreamweaver e scriviamo:
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,ul,li,form,tr,th,td{
margin:0;
padding:0;border:0;outline:0;
}
ol,ul,li{
list-style:none;
}Ora dobbiamo inserire gli elementi a livello di blocco:
header,nav,footer,section{
display:block;
}Come impostazione predefinita, questi vengono visualizzati come elementi in line e quindi e’ necessario impostarli come abbiamo appena fatto.
Inseriamo nel foglio di stile lo sfondo e l’header:
body{
background-color:#942c2d;
font-family:Verdana,Geneva,sans-serif;
font-size:14px;
}
#wrapper{
width:960px;
height:768px;
margin:0 auto;
background: url('images/bg.jpg');
}
header{
width:900;
}A questo punto, dobbiamo definire un logo:
#logo{
border:none;
margin-left:20px;
}Abbiamo dato un valore a margin left, in modo che non rimanga proprio attaccato al bordo.
Aggiungiamo nel CSS anche il menu’ di navigazione:
nav{
float:right;
width:550px;
height:45px;
margin:40px -120px 0 0;
background-color:#942c2d;
}
nav li{
display:block;
float:left;
margin-top:5px;
font-size:14px;
text-trasform:capitalize;
}
nav li a{
text-decoration:none;
margin-left:23px;
padding-right:23px;
color:#b4b492;
font-weight:bold;
}
nav li a:hover{
color:#635c49;
font-weight:bold;
}
.current{
color:#635c49;
}Adesso aggiungiamo l’area sezione con l’aiuto dei css3:
section{
float:left;
width:500px;
}
#tag_line{
float:left;
margin:60pX 0 0 20px;
}
blockquote{
float:left;
margin:15px 0 0 25px;
width:375px;
padding:90px 45px 35px 90px;
min-height:90px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
blockquote h1{
font-family:Century Gothic,"Courier New",
Courier,monospace;
font-size:40px;
font-weight:none;
color:#000;
}
.client{
font-size:30px;
float:right;
margin-top:50px;
color:#000;
}Ed ecco il nostro file CSS, compilato perfettamente. Vi ricordate come si presentava la pagina? Guardate adesso:
Demo