dimanche 14 avril 2013

Gestion global des CSS

Pour utiliser de façon intelligente les css, il faut ce donné des standards d'affichage dans notre page.

Par exemple quelle police on va utiliser pour la page, quelle taille vont avoir nos différent texte dans la page, quel couleur va être le texte, ...

Une bonne feuille de style css commence par un bon code HTML avec l'utilisation des balise sémantique.
Exemple de balise sémantique:

  • <body>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • <p>
  • <img>
  • <strong>
  • <ul>, <ol>, <li>
  • <i>, <u>, <sup>, <em>
Pour un site web avec un design graphique simple, on ne devrait avoir plusieurs classe css à créé. Toutes les balise html existantes nous permet un vaste choix d'habillage avec les css.

Par exemple le code source de cette page j'utilise seulement 10 classes CSS. Ceci permet d'avoir une feuille de style simple et facile à modifier.

Exemple de base pour un CSS Global pour un site web utilisant uniquement les balise sémantique HTML:

body { background-color:#005BA3; margin:0px; font-family:Arial, Helvetica, sans-serif;}
a:link, a:hover, a:visited { text-decoration:none;}
a:visited:hover, a:hover { text-decoration:underline;}
img { border:0px; }
h1 {font-size:24px; }
h2 {font-size:20px; margin-bottom:2px; padding-bottom:0px; }
h3 {font-size:16px; margin:0px; padding:0px; margin-top:10px; margin-bottom:0px; }
li {margin-left:20px; }

Aucun commentaire:

Enregistrer un commentaire