Articles
Écrit par Administrator    Lundi, 11 Septembre 2006 10:59    PDF Imprimer Envoyer
Top 5 : Débuter en CSS
Articles - Conception Web
top5cssVoici le top 5 des trucs à apprendre par coeur afin de devenir un expert du CSS. Afin de bien débuter dans votre apprentissage du CSS, c'est truc son quasi indispensable. Ils vous permetterons entre autre d'obtenir des codes efficaces et rapide à utiliser une fois les notions ci-dessous acquisent.
 

1. Modifier la taille du texte sans "pixels"


Si vous vous êtes toujours demandé comment certains programmeurs réussissent à convertir leurs "pixels" en "em" alors lisez ce qui suit. Le truc est bien simple, il suffit de faire la conversion. 1.0em équivaut à 10px!
  
    Exemple :
        1.0em     -> 10px
        10.0em     -> 100px
        100.0em     -> 1000px
        50.5em   -> 505px
      
Maintenant il ne vous reste plus qu'à ajuster la taille du font-size de votre body :

body { font-size: 62.5% }

Vous pouvez maintenant utilisez vos taille en "em" au lieu d'en "pixels".

Vos paragraphes peuvent maintenant avoir l'air comme ceci :

p { font-size: 1.2em; line-height: 1.5em; }

Il faut aussi avoir à l'idée qu'il n'y à pas simplement des jeunes qui consulte des pages sur Internet. Il y a aussi une multitude de personne agé dont la vision n'est pas aussi aiguisé que nous même ou les ados de la dernière génération. C'est pourquoi les tailles absolut sont à évités. La combinaison du body {font-size %} et des tailles de polices en "em" sont fortement recommandé.

2. Faire un code lisible


Je ne m'attarderai pas bien longtemps sur ce point car un exemple de CSS lisible vaut mieux qu'une explication. Le mot d'ordre ? Espacement et lisibilité!

h1 {}
    h1#logo { font-size: 2em; color: #000; }
h2 {}
    h2.title { font-size: 1.8em; font-weight: normal; }

3. Séparé votre code en bloc


Cette technique est très efficace afin de se retrouver dans son propre code rapidement. Si vous ne touchez pas à votre code pendant 4 ou 6 mois, il sera difficile de s'y replonger si vous n'avez pas divisé votre code de cette manière :

/* Structure */

    C'est ici que je place la charpente du site.

/* Typographie */

    Ici, je place tout ce qui ce rapporte au texte, taille, style, couleur, entête ...

/* Liens */

    Le plus simple, tout ce qui se rapporte au lien hypertexte

/* Listes, images, etc. */

    Ici tout le reste, images, listes ...

4. Évité l'utilisation abusive des div


Depuis déjà un bon moment les développeurs on laissé tomber les tableaux pour la mise en page. Aujourd'hui, plusieurs développeur abuse des div comme ils abusaient des tableaux il y a deçà 1 ans. Pour mettre un titre, utilisez les tag <h1>, <h2> ... ne faite pas un div pour une simple ligne de texte. Utilisez les tags appropriés et les plus léger possible afin d'obtenir les meilleur performances de votre site web. L'imbrication de div répété allourdi la page pour rien. Alors pensez-y bien!

5. Styliser tout, une fois


Plusieurs codeurs vont réécrire des centaines de fois les mêmes lignes tel que : "margin: 0; padding: 0;". Celà n'a aucun sens. Il existe une méthode efficace afin d'éviter de répéter.

C'est facile :

* { margin: 0; padding: 0; }

Il ne vous reste plus qu'à ajuter les tag "margin" et "padding" des éléments que vous voulez modifier.

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (0)

Flux RSS pour les commentaires

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy
Mis à jour ( Jeudi, 06 Mars 2008 14:34 )
 

Derniers ajout

Les plus lus