Ka shumë mësime CSS janë në dispozicion në internet, por disa mësime janë të dobishme. Në këtë tutorial ju do të gjeni 5 hapa që duhet të shkruani kodin css më të mirë për projektin e ardhshëm faqen tuaj te internetit. Unë shpresoj se ju do të gëzojë këtë tutorial.

1. ResetCss

Do të duhej që të përdorni përherë reset Nëse kjo mund të jetë, Eric Meyer Reset, Reset YUI, ose reset your own custom, përdorni vetëm diçka.

Qëllimi i një stylesheet reset është për të reduktuar mospërputhjet shfletues në gjëra të tilla si lartësitë linjë default, kufijtë dhe madhësinë e shkronjave të krerëve, dhe kështu me radhë - Eric Meyer

  trupit html, div, span, applet, objekt, h1, h2, h3, h4, h5, h6, iframe, 
  blockquote, para, Abbr, akronim, adresa, madhe, citoj, kodi, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, të vogla, greva, e fortë, sub, sup, tt, var, 
  fieldset dd, dl, dt,, formën, etiketë, legjenda, tavolinë, caption, tbody, tfoot, 
  thead, tr, th, td, input, zgjidhni, textarea 

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


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

2. CSS stenografi

Një nga më të mira dhe të rëndësishme tipar i CSS është aftësia për të shkruar kodin në një mënyrë të minimizohet.

Incorrect Kodi

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

Correct Kodi

 : 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. A mos përdor klasa kaq shumë dhe Id's

Unë kam vënë re se shumica e fillestar shtoni klasat dhe ID për pothuajse çdo element në faqe, e cila nuk është required.There më poshtë janë disa shembuj të asaj që unë jam duke iu referuar.

Incorrect Kodi

 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 = klasë "wrapper" = "wrapper"> klasë <p "heading" => klasë <strong = "subheading"> Mirë se vini </ strong> </ p> <p klasë = "linka"> <a href = "#" klasë = "link"> Home </ a> </ p> <p klasë = "linkb"> href <a = "#" klasë "link" => Rreth </ a> </ p> </ p = "linkc"> klasë <a href = "#" klasë "link" => Shërbimet </ a> </ p> <p klasë = "linkd"> href <a = "#" klasë "link" => Kontakt </ a> </ p> </ div> 

Këtu është kodi korrekt

Correct Kodi

 > <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> Mirë se vini </ h1> <ul> <li> href <a = "#"> Home </ a> </ li> <li> href <a = "#"> Rreth </ a> </ li> <li> href <a = "#"> Shërbimet </ a> </ li> <li> href <a = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organizata ju stylesheet

Ju duhet të organizojnë stylesheet tuaj në mënyrë që ajo është e lehtë për të gjetur gjëra dhe sende të lidhura janë ngushtë së bashku. Komentet e Përdor në mënyrë efektive. Për shembull, nuk është shembull do të tregojë se si të organizojnë stylesheet tuaj

  / * Reset * / 
   elements Diferencë Hiq dhe elementet mbushje 

  / * Elementet baze * / 
  Stil Definimi për elementet themelore: trupit, h1, h2, h3, h4, h6, ol, ul, dl, p etj 

  / * Klasët Generic * / 
  Stil Definimi për klasat e përgjithshme: gjëra të thjeshta si hiqni fund,  
  lundrues për palët etj  
  / * Layout baze * / 

  / * Layout baze * / 
  Definimi stil për paraqitjen themelore: header.  footer, etj sidebar 

  / * Header * / 
  Definimi stil për kokë 

  / * Content * / 
  Definimi stil për zonën e përmbajtjes 

  / * Footer * / 
  Definimi stil për futboll 

  / * Etj * / 
  Vazhdo 

5. Përdorimi Stylesheets kushtëzuar

Internet Explorer është më buggy të gjithë shfletuesit. Për fat të mirë ju mund të përdorni Komentet e kushtëzuar për të menaxhuar CSS se është shërbyer për të IE. Nëse unë kam nevojë për një stylesheet quajtur ie6.css se objektivat e versione të vjetra të IE. Kjo lejon mua që të menaxhuar CSS për shfletuesit e vjetër shpejt dhe me lehtësi.

Këtu është Shembull

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

Përfundim

Këto janë vetëm disa këshilla që ndihmojnë mua që të shkruani kodin më të mirë. Unë shpresoj se tutorial do t'ju ndihmojnë gjithashtu për të shkruar mirë dhe të pastër kodin. Aplikoni këto Këshilla për projektet tuaja aktuale dhe të ardhshme, dhe ju me siguri do të vlerësojmë përpjekjet.

Nëse mendoni që tutorial mund të jetë më mirë, Ju lutem ndani me ne. Koment ne

në qoftë se ju dëshironi të merrni më shumë frymëzim prej nesh, ju lutem konsideroni nënshkrimit to our feed duke RSS ose me email.

Paraqitur sipas: Css, Tutorials nga admin