Nello sviluppo di progetti Web è possibile identificare un sottoinsieme di regole e stili CSS condivisibili; la definizione di un insieme base di regole CSS permette infatti di avere una solida base tipografica che all' occorrenza potrà subire modifiche legate a particolari necessità di design. Vediamo di definire quindi un foglio di stile privilegiando l' accessibilità dell' utente 

   1: Base.css
   2: /*Stili TipoGrafici*/
   3: *{    font-size:100%; }
   4:  
   5: body{ font:76%/120% Verdana,Arial,sans-serif;  }
   6:  
   7: p {    font-size:0.9em;  }
   8:  
   9: p, blockquote, pre, ol, dl, ul, form {line-height:1.4}
  10:  
  11:  
  12:  
  13: /*Clearing margin e padding*/
  14: html, body{margin: 0;padding: 0}
  15:  
  16: h1, h2, h3, h4, h5, h6, p, pre,
  17: blockquote, ul, ol, dl {
  18:         margin: 1em 0;
  19:         padding: 0;
  20: }
  21:  
  22:  
  23: /*Classi*/
  24: .width100 { width: 100%;  }
  25:  
  26: .width75 { width: 75%; }
  27:  
  28: .width50 { width: 50%; }
  29:  
  30: .floatLeft { float: left; }
  31:  
  32: .floatRight { float: right; }
  33:  
  34: .alignLeft { text-align: left; }
  35:  
  36: .alignRight { text-align: right; }
  37:  
  38: .capitalize {text-transform: capitalize;}
  39:  
  40:  
  41: /*Stili Frequenti*/
  42:  
  43:  
  44: /* Min Width: molte soluzioni sia solo CSS che Javascript; per soluzione Css visitare cssplay */
  45: #container600
  46: {
  47: min-width:600px;
  48: width:expression(document.body.clientWidth < 600? "600px": "auto");
  49: }
  50:  
  51: /*Allineamento Verticale Testo all'interno del div mioBox->Div stessa altezza della riga*/
  52: #mioBox{
  53:     height:60px;
  54:     line-height:60px;
  55: }
  56:  
  57:  
  58: /*Centrare un div container di dimensione fissa (600px)*/
  59: /*Per avere lo stesso effetto anche su IE5 serve anche il text-align sull'elemento parent*/
  60:  
  61: /*body{
  62:   text-align: center;
  63:   }
  64: */
  65:  
  66: #container  {
  67:   margin: 0 auto;
  68:   width: 600px;
  69:   } 
 
 

Vox populi, vox dei ...

Technorati tags: