Es gibt eine Vielzahl von CSS Tutorials sind im Internet verfügbar, aber die paar Tutorials sind nützlich. In diesem Tutorial werden Sie 5 Schritte zum Brennen von besseren CSS-Code für Ihr nächstes Projekt-Website zu finden. Ich hoffe, Sie werden dieses Tutorial zu genießen.

1. ResetCss

Sie sollten jedoch stets zurückgesetzt Ob es sein kann Eric Meyer Reset, die YUI Reset, oder Ihre eigenen zurückzusetzen, benutzen Sie einfach etwas.

Das Ziel von einem Reset-Stylesheet wird an den Browser Unstimmigkeiten in Dinge wie Default Zeilenhöhe zu verringern, die Margen und Schriftgrößen von Überschriften, und so weiter - Eric Meyer

  html, body, div, span, Applet, Objekt, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, small, strike, strong, 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

Einer der besten und wichtiges Merkmal von CSS ist die Möglichkeit, Code in einem minimierten Art zu schreiben.

Falscher Code

  ( 
  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, Arial, sans-serif; 
  ) 

Korrigieren 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, Arial, sans-serif;) 

3. Nicht mit so vielen Klassen und IDs

Ich habe bemerkt, dass die meisten der Anfänger-Klassen-IDs hinzufügen und auf fast jedes Element auf der Seite, die nicht required.There sind einige Beispiele unten, was ich meine.

Falscher Code

 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"> <p class = "heading"> <strong "subheading" class => Willkommen </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Home </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Über </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Dienstleistungen </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Hier finden Sie den richtigen Code

Korrigieren 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> Welcome </ h1> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Über </ a> </ li> <li> <a href = "#"> Dienstleistungen </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organisation, die Sie Stylesheet

Sie sollten Ihr Stylesheet so zu organisieren, dass es einfach ist, die Dinge und verwandte Artikel finden liegen dicht beieinander. Verwenden Sie Kommentare wirksam. Zum Beispiel gibt es das Beispiel wird erläutert, wie Sie Ihr Stylesheet organisieren

  / * Reset * / 
   elements Entfernen Sie margin und padding-Elemente 

  / * Basic Elements * / 
  Definieren Stil für grundlegende Elemente: Körper, H1, H2, H3, H4, H6, ol, ul, dl, p usw. 

  / * Generische Klassen * / 
  Definieren Stil für generische Klassen: einfache Dinge wie entfernen Sie den Boden,  
  Floating auf den Seiten usw.  
  / * Basis Layout * / 

  / * Basis Layout * / 
  Definieren Sie den Stil für grundlegende Layout:-Header.  Fußzeile, etc. sidebar 

  / * Header * / 
  Definieren Sie den Stil für Header 

  / * Content * / 
  Definieren Sie den Stil für Content-Bereich 

  / * Fußzeile * / 
  Definieren Sie den Stil für Fußzeile 

  / * Usw. * / 
  Weiter 

5. Verwenden Sie die bedingte Stylesheets

Internet Explorer ist der Buggy von allen Browsern. Zum Glück können Sie bedingte Anmerkungen zu verwenden, zu verwalten, dass die CSS serviert wird IE zusammenhängen. Wenn ich es brauche ich ein Stylesheet aufgerufen ie6.css dass die Ziele älteren Versionen des Internet Explorers. Es erlaubt mir, CSS für ältere Browser schnell und einfach zu verwalten.

Hier ist das Beispiel

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

Fazit

Dies sind nur einige der Tipps, die mir helfen, um besseren Code zu schreiben. Ich hoffe, dass auch Tutorial wird Ihnen helfen, besser schreiben und sauberen Code. Gelten diese Tipps für Ihre aktuellen und kommenden Projekte, und Sie werden sicherlich die Bemühungen.

Wenn Sie glauben, dass Tutorial mehr besser werden kann, bitte mit uns teilen. Comment us

Wenn Sie möchten mehr Inspiration von uns erhalten, prüfen Sie bitte abonnieren Sie unseren Feed von RSS-oder E-Mail.

Abgelegt unter: CSS, Tutorials von admin