Det er mange CSS opplæringsprogrammer er tilgjengelige på internett, men de få opplæring er nyttige. I denne opplæringen vil du finne 5 trinn til å skrive bedre css-koden til din neste nettside prosjektet. Jeg håper du vil like denne opplæringen.

1. ResetCss

Du bør alltid bruke tilbakestille Enten det kan bli Eric Meyer tilbakestilt, YUI Tilbakestill eller dine egne restarte, bare bruk noe.

Målet om en tilbakestilling stilark er å redusere nettleser inkonsekvens i ting som standard linje høyder, marginer og skriftstørrelser av overskrifter og så videre - Eric Meyer

  html, body, div, span, applet, objekt, h1, h2, h3, h4, h5, h6, iframe, 
  blockquote, pre, abbr, akronym, adresse, big, cite, kode, del, DFN, em, 
  skrift, img, ins, kbd, q, s, SAMP, liten, streik, sterk, sub, sup, tt, var, 
  dd, dl, dt, fieldset, form, etikett, legende, bord, bildetekst, 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 beste og viktigste funksjon i CSS er evnen til å skrive kode i en minimert måte.

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

Riktig kode

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

3. Ikke bruk så mange klasser og ID

Jeg har lagt merke til at de fleste nybegynnere legge til klasser og ID til nesten hver eneste element på siden, som ikke er required.There er noen eksempler nedenfor om hva jeg sikter til.

Feil 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"> </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Om </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Tjenester </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Her er den riktige koden

Riktig 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 = "#"> </ a> </ li> <li> <a href = "#"> Om </ a> </ li> <li> <a href = "#"> Tjenester </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organisasjon du stilark

Du bør organisere stilark slik at det er lett å finne ting og relaterte elementer er tett sammen. Bruk kommentarer effektivt. For eksempel er det den Eksempel vil fortelle deg hvordan du kan organisere stilarket

  / * Reset * / 
   elements Fjern margin og padding elementer 

  / * Basic Elements * / 
  Definer stil for grunnelementer: kropp, h1, h2, h3, h4, h6, ol, ul, dl, p etc. 

  / * Generic Classes * / 
  Definer stilen for generiske klasser: enkle ting som å fjerne bunnen,  
  flytende til sidene osv.  
  / * Basic Layout * / 

  / * Basic Layout * / 
  Definer stilen enkel layout: header.  bunntekst, sidebar osv. 

  / * Header * / 
  Definer stilen til header 

  / * Innhold * / 
  Definer stilen for innhold området 

  / * Footer * / 
  Definer stilen til footer 

  / * Etc * / 
  Fortsett 

5. Bruk Betinget Stilsett

Internet Explorer er den mest vognen av alle nettlesere. Heldigvis kan du bruke betinget kommentarer å administrere CSS som serveres til IE. Hvis jeg trenger det, jeg har et stilark kalles ie6.css som er rettet mot eldre versjoner av IE. Det tillater meg å administrere CSS for eldre nettlesere raskt og enkelt.

Her er den Eksempel

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

Konklusjon

Dette er noen av tipsene som hjelper meg til å skrive bedre kode. Jeg håper at veiledningen vil også hjelpe deg å skrive bedre og ren kode. Bruk disse tipsene til din nåværende og neste prosjekter, og du vil sikkert sette pris på innsatsen.

Hvis du tror at opplæringen kan bli mer bedre, kan du dele med oss. Kommentar oss

Hvis du ønsker å motta mer inspirasjon fra oss, kan du vurdere å abonnere på vårt feed via RSS eller via e-post.

Arkivert under: Css, Tutorials av admin