Der er masser af CSS tutorials er tilgængelige på internettet, men de få tutorials er nyttige. I denne tutorial vil du finde 5 trin til at skrive bedre css kode til din næste hjemmeside projekt. Jeg håber du vil nyde denne tutorial.

1. ResetCss

Du bør altid anvende nulstille, om det kan Eric Meyer Nulstil, den YUI Nulstil, eller dine egne brugerdefinerede reset, bare bruge noget.

Målet med en reset stilark er at reducere browser uoverensstemmelser i ting som standard linje højder, marginer og skriftstørrelser overskrifter, og så videre - Eric Meyer

  html, body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, adresse, big, cite, code, del, DFN, em, 
  skrifttype, IMG, ins, kbd, q, s, Samp, små, strike, strong, sub, sup, tt, var, 
  dd, dl, dt, fieldset, form, label, legend, tabel, billedtekst, 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 af de bedste og vigtigt element i CSS er evnen til at skrive kode i et minimeret måde.

Forkert kode

  ( 
  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 kode

 : 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. Må ikke bruge så mange klasser og Id's

Jeg har bemærket, at de fleste begyndere tilføje klasser og ID's til næsten ethvert element på siden, hvilket ikke er required.There er nogle eksempler nedenfor, hvad jeg tænker på.

Ukorrekt Kode

 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"> Velkommen </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Hjem </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Om </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Services </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Her er den korrekte kode

Korrekt kode

  > <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> Velkommen </ h1> <ul> <li> <a href = "#"> Hjem </ a> </ li> <li> <a href = "#"> Om </ a> </ li> <li> <a href = "#"> Services </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organisationen du typografiark

Du bør organisere dit typografiark, så det er nemt at finde ting og relaterede emner er tæt på hinanden. Brug kommentarer effektivt. For eksempel er der eksempel vil fortælle dig, hvordan du organisere dine stilark

  / * Reset * / 
   elements Fjerne margin og padding elementer 

  / * Basic Elements * / 
  Definer stil for grundlæggende elementer: krop, H1, H2, H3, H4, H6, ol, ul, dl, p mv 

  / * Generic klasse * / 
  Definer stil til generiske klasser: simple ting som at fjerne bunden,  
  flydende til siderne osv.  
  / * Grundlæggende layout * / 

  / * Grundlæggende layout * / 
  Definer stil for grundlæggende layout: header.  footer, sidebar osv. 

  / * Header * / 
  Definer stil for header 

  / * Indhold * / 
  Definer stil for indholdet område 

  / * Footer * / 
  Definer stil til sidefod 

  / * Etc * / 
  Fortsæt 

5. Brug Betinget Stylesheets

Internet Explorer er den mest buggy af alle browsere. Heldigvis kan du bruge betingede kommentarer til at administrere CSS, der serveres til IE. Hvis jeg har brug for det, jeg har et stilark kaldet ie6.css at målene ældre versioner af IE. Det giver mig mulighed for at håndtere CSS for ældre browsere hurtigt og nemt.

Her er et eksempel

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

Konklusion

Disse er blot nogle af de tips, der hjælper mig til at skrive bedre kode. Jeg håber, at tutorial også vil hjælpe dig til at skrive bedre og ren kode. Anvende disse tips til din nuværende og kommende projekter, og du vil helt sikkert sætte pris på den indsats.

Hvis du tror, at tutorial kan være mere bedre, kan du dele med os. Kommentar os

hvis du ønsker at modtage mere inspiration fra os, kan du overveje at abonnere på vores feed ved RSS eller e-mail.

Filed under: Css, Tutorials af admin