Il ya plein de tutoriels CSS sont disponibles sur Internet, mais peu sont les tutoriels utiles. Dans ce tutoriel, vous trouverez 5 étapes pour écrire un meilleur code CSS pour votre projet de site Web suivant. J'espère que vous apprécierez ce didacticiel.

1. ResetCss

Vous devriez toujours utiliser réinitialisation si elle peut être Eric Meyer Reset, la réinitialisation YUI, ou réinitialiser votre mot personnalisé, il suffit d'utiliser quelque chose.

L'objectif d'une feuille de style de réinitialisation est de réduire les incohérences dans des choses comme navigateur par défaut hauteurs ligne, les marges et la taille des polices de rubriques, et ainsi de suite - Eric Meyer

  html, body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, de l'acronyme, adresse, big, cite, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, petites, d'une grève, fort, sub, sup, tt, var, 
  dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot 
  thead, tr, th, td, input, select, textarea 

  ; padding : 0 ; } (Margin: 0; padding: 0;) 


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 

2. CSS Shorthand

L'un des meilleurs et importante caractéristique du CSS est la capacité à écrire du code d'une manière minimisée.

Code incorrect

  ( 
  margin-top: 10px; 
  margin-right: 7px; 
  margin-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-right: 7px; 
  padding-bottom: 10px; 
  padding-left: 7px; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-family: Arial, Verdana, Tahoma, sans-serif; 
  ) 

Corriger Code

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Margin: 10px 7px 10px 7px; padding: 10px 7px 10px 7px; font: bold 12px Arial, Verdana, Tahoma, sans-serif;) 

3. Ne pas utiliser les classes si nombreuses et Id "

J'ai remarqué que la plupart des débutants ajouter des classes et l'ID de presque tous les éléments sur la page, ce qui n'est pas required.There quelques exemples ci-dessous de ce que je fais allusion.

Code incorrect

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = "wrapper" class = "wrapper"> class <p "heading" => classe <strong "subheading" => Bienvenue </ strong> </ classe P <p "linka" => <a href = "#" class = "lien"> Accueil </ a> </ classe P <p "linkb" => href <a = "#" class = "link"> En savoir plus </ a> </ p> <p = "linkc"> class <a href = "#" class = "link"> Services </ a> </ classe P <p "linkd" => href <a = "#" class = "link"> Contact </ a> </ p> </ div> 

Voici le code correct

Corriger Code

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Bienvenue </ h1> <ul> <li> href <a "#" => Accueil </ a> </ li> <li> href <a = "#"> À propos </ a> </ li> <li> href <a "#" => Services </ a> </ li> <li> href <a "#" => Contact </ a> </ li> < / ul> </ div> 

4. Organisation, vous Stylesheet

Vous devez organiser votre feuille de style de sorte qu'il est facile de trouver des choses et articles connexes sont rapprochées. Utiliser les commentaires de façon efficace. Par exemple, il ya l'exemple vous dira comment organiser votre feuille de style

  / * Reset * / 
   elements Retirer de marge et des éléments de rembourrage 

  / * Eléments de base * / 
  Définir le style des éléments de base: le corps, H1, H2, H3, H4, H6, ol, ul, dl, p etc 

  / * Classes génériques * / 
  Définir le style pour les classes génériques: des choses simples comme enlever le fond,  
  flottant sur les côtés, etc  
  / * Structure de base * / 

  / * Structure de base * / 
  Définir le style de présentation de base: en-tête.  pied de page, barre latérale, etc 

  / * Header * / 
  Définir le style d'en-tête 

  / * Contenu * / 
  Définir le style de la zone de contenu 

  / * Footer * / 
  Définir le style de pied de page 

  / * Etc * / 
  Continuer 

5. Usage conditionnel Stylesheets

Internet Explorer est le plus buggy de tous les navigateurs. Heureusement, vous pouvez utiliser des commentaires conditionnels pour gérer le CSS qui est servi à l'IE. Si j'en ai besoin, j'ai une feuille de style appelée ie6.css qui cible les anciennes versions d'IE. Il me permet de gérer les CSS pour les navigateurs plus anciens rapidement et facilement.

Voici l'exemple

  <!--[ if lte IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > <link rel = "stylesheet" href = "ie6.css" type = "text/css" media = "screen" /> 
 
  -- > <! [Endif] -> 

Conclusion

Ce ne sont que quelques-uns des conseils qui m'aident à mieux écrire de code. J'espère que ce tutorial vous aidera également à mieux écrire et propre code. Appliquez ces conseils pour vos projets en cours et la prochaine, et vous apprécierez sûrement les efforts.

Si vous croyez que le tutoriel peut être plus mieux, S'il vous plaît partagez avec nous. Commentaire nous

Si vous souhaitez recevoir plus d'inspiration de nous, s'il vous plaît inscrivez-vous à notre flux par RSS ou par e-mail.

Classé sous: Css, Tutoriels par admin