Er zijn tal van CSS tutorials zijn beschikbaar op internet, maar de paar tutorials zijn nuttig. In deze handleiding vind je 5 stappen om betere CSS-code voor uw volgende project website schrijven. Ik hoop dat u deze tutorial genieten.

1. ResetCss

You should always use reset Whether it can be Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something.

Het doel van een reset stylesheet is het terugdringen browser inconsistenties in dingen als hoogtes standaard lijn, marges en lettertype groottes van de posten, enzovoort - Eric Meyer

  html, body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, adres, groot, cite, code, del, DFN, em, 
  lettertype, img, ins, kbd, q, s, samp, kleine, staking, sterk, sub, sup, tt, var, 
  dd, dl, dt, fieldset, vorm, label, legende, tafel, caption, TBODY, tfoot, 
  thead, tr, th, td, input, selecteren, textarea 

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


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

2. CSS Shorthand

Een van de beste en belangrijke eigenschap van CSS is de mogelijkheid om code te schrijven op een manier geminimaliseerd.

Verkeerde 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, Tahoma, sans-serif; 
  ) 

Juiste 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. Niet met het gebruik zo veel classes en id's

Ik heb gemerkt dat de meeste beginners klassen toevoegen en ID's bijna elk element op de pagina, die niet required.There zijn enkele voorbeelden van wat ik bedoelde.

Verkeerde code

  class = "wrapper" > <div id = "wrapper" class = "wrapper"> 
  > <strong class = "subheading" > Welcome </strong> </p> <p class = "heading"> <strong "subheading" class => Welkom, </ strong> </ p> 
  > <a href = "#" class = "link" > Home </a> </p> <p class = "linka"> <a href = "#" class = "link"> Home </ a> </ p> 
  > <a href = "#" class = "link" > About </a> </p> <p class = "linkb"> <a href = "#" class = "link"> Over </ a> </ p> 
  > <a href = "#" class = "link" > Services </a> </p> <p class = "linkc"> <a href = "#" class = "link"> Diensten </ a> </ p> 
  > <a href = "#" class = "link" > Contact </a> </p> <p class = "linkd"> <a href = "#" class = "link"> Contact </ a> </ p> 
  </ div> 

Hier is de juiste code

Juiste 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> Welkom </ h1> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Over </ a> </ li> <li> <a href = "#"> Diensten </ a> </ li> <li> <a href = "#"> Contact </ a> </ li> < / ul> </ div> 

4. Organisatie u Stylesheet

U moet uw stylesheet organiseren, zodat het gemakkelijk is om dingen en aanverwante artikelen te vinden dicht bij elkaar. Gebruik reacties effectief. Bijvoorbeeld, Er is het voorbeeld zal u vertellen hoe u uw stylesheet organiseren

  / * Reset * / 
   elements Verwijder marge en padding elementen 

  / * Basic Elements * / 
  Definieer stijl voor basiselementen: lichaam, H1, H2, H3, H4, H6, ol, ul, dl, p enz. 

  / * Generic Klassen * / 
  Definieer stijl voor generieke klassen: simpele dingen zoals het verwijderen van de bodem,  
  zwevend aan de zijkanten, enz.  
  / * Basis Layout * / 

  / * Basis Layout * / 
  Definieer de stijl voor basis-layout: header.  voettekst, sidebar etc. 

  / * Header * / 
  Definieer de stijl voor header 

  / * Content * / 
  Definieer de stijl voor de inhoud ruimte 

  / * Footer * / 
  Definieer de stijl voor voettekst 

  / * Etc * / 
  Doorgaan 

5. Gebruik Voorwaardelijke Stylesheets

Internet Explorer is de meest buggy van alle browsers. Gelukkig kunt u voorwaardelijke opmerkingen voor het beheer van de CSS die wordt geserveerd aan IE. Als ik het nodig heb ik een stylesheet genoemd ie6.css die zich richt op oudere versies van IE. Het maakt me om CSS te beheren voor oudere browsers snel en eenvoudig.

Hier is het voorbeeld

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

Conclusie

Dit zijn slechts enkele van de tips die mij helpen om betere code te schrijven. Ik hoop dat ook tutorial zal je helpen om beter en schone code schrijven. Pas deze tips om uw huidige en volgende projecten, en u zal zeker waardering voor de inspanningen.

Als u denkt dat tutorial kan meer beter, U kunt met ons deelt. Reactie ons

Als u wilt meer inspiratie van ons te ontvangen, kunt u overwegen een abonnement op onze feed met RSS of per e-mail.

Geplaatst onder: Css, Tutorials door admin