Ultimo aggiornamento: 18 giugno 2020

Conoscere CSS - Esempio di layout Mobile-First

Layout

Il layout di questa pagina è stato realizzato in modalità Mobile-First.

Gli elementi contenuti nella pagina sono stati disposti uno di seguito all'altro all'interno di un contenitore, article, che occupa tutto il body, che a sua volta occupa tutta la viewport.

Ecco le regole di stile per article:

article{
   background-color:beige;
   font-size:10pt;
   position:relative;
}
@media (min-width:800px){
   article{
      left:20%;
      font-size:12pt;
      width:60%;
   }
}              

Organizzazione del file css

L'approccio seguito è quello di scrivere il minor numero di regole possibile.

I selettori, raggruppati secondo la loro tipologia, sono elencati in ordine alfabetico. Il primo gruppo è quello degli identificatori di tag html, seguono gli identificatori di classe, ed infine gli identificatori di elemento.

All'interno di ogni regola di stile, gli attributi sono definiti in ordine alfabetico.

Ecco il contenuto completo del file css:

article{
   font-size:10pt;
   position:relative;
}
em{color:blue;}
h1 {font-weight:100; text-align:center;}
h2 {font-weight:200;}
h3 {font-weight:300;}
h4 {font-weight:400;}
h5 {font-weight:500;}
h6 {font-weight:600;}
li{margin-right:1em;}

pre{
   background-color:black;
   color:white;
   font-family:sanserif;
   padding:1em;
}
/* Classi */
.button{
   display:inline;
   margin-right:1em;
}
.button a{
   background-color:lightgray; 
   border:1px solid green;
   border-radius:5px;
   line-height:2em;
   padding:5px;
}
.ClearBoth{clear:both;}       
.ClearL{clear:left;}       
.ClearR{clear:right;}
.Left{
   float:left; 
   margin-right:1em;
   margin-top:0;
}        
.Right{
   float:right; 
   margin-left:1em;
   margin-top:0;
} 
.navBottom{
   background-color:lightgray;
   color:black;
   text-align:center;
}
.navTop{
   background-color:lightgray;
   color:black;
}
.navTop li{
text-align:left;
}
.navTop h2{
   left:2%;
   position:relative;
}
#Logo{
   margin:0.5%;
   width:10%;
}
@media (min-width:800px){
   article{
      left:20%;
      font-size:12pt;
      width:60%;
   }
}