Articles
|
||||
| Top 5 : Débuter en CSS |
| Articles - Conception Web |
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 lisibleJe 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 {} 3. Séparé votre code en blocCette 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 */ 4. Évité l'utilisation abusive des divDepuis 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 foisPlusieurs 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.
Ajouter aux favoris
Bookmarker
Envoyer par mail
Vu: 1037 Rétrolien(0)Adresse URI pour un rétrolien sur cet articleCommentaires (0)Ecrivez un commentaire |
| Mis à jour ( Jeudi, 06 Mars 2008 14:34 ) |



