Det finns gott om CSS självstudiekurser är tillgängliga på Internet, men de få tutorials är användbara. I den här guiden hittar du 5 steg för att skriva bättre css kod för ditt nästa webbplats projektet. Jag hoppas att ni kommer att njuta av den här guiden.

1. ResetCss

Du bör alltid använda återställa om det kan Eric Meyer återställningen YUI Återställ, eller dina egna reset, bara använda något.

Målet för en återställning stilmall är att minska webbläsare inkonsekvenser i saker höjder default linje, marginaler och teckenstorlekar av rubriker, och så vidare - Eric Meyer

  html, body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, adress, big, cite, kod, del, dfn, em, 
  font, img, ins, kbd, q, s, Samp, små, strejk, stark, 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 Stenografi

En av de bästa och viktigaste inslaget i CSS är möjligheten att skriva kod i minimerat sätt.

Felaktig kod

  ( 
  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; 
  ) 

Korrekt kod

 : 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. Inte använder så många klasser och ID

Jag märker att de flesta nybörjare lägga klasser och ID-talet till nästan alla element på sidan, vilket inte är required.There Några exempel nedan på vad jag talar om.

Felaktig kod

 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 class = "subheading"> Välkommen </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Home </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Om </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Tjänster </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Här är rätt kod

Korrekt kod

 > <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> Välkommen </ h1> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Om </ a> </ li> <li> <a href = "#"> Tjänster </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organisation du Stylesheet

Du bör ordna formatmallen så att det är lätt att hitta saker och liknande föremål är nära varandra. Använda kommentarer effektivt. Till exempel finns det exempel berättar hur du ska sortera dina stylesheet

  / * Reset * / 
   elements Bort marginal och element stoppning 

  / * Basic Elements * / 
  Definiera stil för grundläggande delar: kropp, H1, H2, H3, H4, H6, ol, ul, dl, p etc. 

  / * Generiska klasser * / 
  Definiera stil för generiska klasser: enkla saker som att ta bort den nedre,  
  flytande på sidorna etc.  
  / * Grundläggande Layout * / 

  / * Grundläggande Layout * / 
  Definiera stil för den grundläggande layouten: header.  sidfot, sidebar etc. 

  / * Header * / 
  Definiera stil för sidhuvudet 

  / * Content * / 
  Definiera stil för innehållsområdet 

  / * Footer * / 
  Definiera stil för sidfoten 

  / * Etc * / 
  Fortsätt 

5. Använda villkorad Stylesheets

Internet Explorer är den mest buggiga av alla webbläsare. Lyckligtvis kan du använda villkorsstyrd kommentarer att hantera CSS som serveras till IE. Om jag behöver det jag har en stilmall som kallas ie6.css att målen äldre versioner av IE. Det gör att jag kan hantera CSS för äldre webbläsare snabbt och enkelt.

Här är exemplet

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

Slutsats

Dessa är bara några av de tips som hjälper mig att skriva bättre kod. Jag hoppas att handledning också hjälper dig att skriva bättre och ren kod. Använd dessa tips för att din nuvarande och nästa projekt, och du kommer säkert uppskattar de ansträngningar.

Om du tror att handledning kan vara bättre, Vänligen dela med oss. Kommentar oss

Om du vill få mer inspiration från oss, vänligen överväga att prenumerera på vårt foder genom RSS eller e-post.

Filed under: Css, Tutorials av admin