Riprendendo il discorso da dove lo avevamo interrotto nell’articolo “OTTIMIZZARE CSS PER IPHONE“, iniziamo a creare per la nostra pagina Html il relativo CSS. Come avevamo visto nell’esempio il file si dovra’ chiamare iphone.css, quindi apriamo il nostro editor di testo e costruiamo il CSS.
body{background-color:#666666; /*colore di sfondo*/
color:#000; /*colore usato per il testo*/
font-family: Helvetica;
font-size:14px;
margin:0;
padding:0;
}Abbiamo usato come font Helvetica perche’ e’ quello utilizzato dalla maggior parte delle applicazioni iPhone.
Adesso aggiungeremo l’intestazione dei vari div utilizzati nel codice Html.
#header h1{
margin:0;
padding:0;
}
#header h1 a{
background-color:#ffffff;
border-bottom: 1px solid #666;
color:#000;
display: block;
font-size:22px;
font-weight:bold;
padding:10px 0;
text-align:center;
text-decoration:none;
}L’header e’ stato fatto, e gia’ l’aspetto per la pagina visualizzata dall’iPhone e’ migliorato notevolmente.
Manca da sistemare il div content e la formattazione del testo.
Continuiamo:
#content{padding:10px;}
#content h2{
margin:0;
padding:0;
font-size:18px;
font-weight:bold;
padding:5px 0;
text-decoration:none;
}Ecco il risultato di questa ultima modifica:
Questo e’ tutto per oggi, la prossima volta vedremo di aggiungere un po’ di look iPhone alla nostra pagina.