Hemm ħafna tutorials CSS huma disponibbli fuq l-internet iżda l-tutorials ftit huma utli. F'dan il-tutorja għandek issib 5 passi biex jikteb il-kodiċi css aħjar għall-proġett website tiegħek li jmiss. Nispera li jgawdu din tutorja.

1. ResetCss

Għandek dejjem tuża reset Kemm jista 'jkun Eric Meyer Irrisettja, il-Reset YUI, jew reset tiegħek konswetudini stess, l-użu biss xi ħaġa.

L-għan ta 'stylesheet ssettjat mill-ġdid huwa li jitnaqqsu l-inkonsistenzi fil-browser affarijiet bħall-għoli tal-linja tal-kontumaċja, il-marġni u daqsijiet font ta' l-intestaturi, u l-bqija - Eric Meyer

  html korp,, div, span, applet, oġġett, H1, H2, H3, h4, H5, H6, iframe, 
  blockquote, pre, abbr, akronimu, indirizz, big, isemmi, il-kodiċi, del, dfn, em, 
  font, img, ins, kbd, q, s, Samp, żgħar, strajk, qawwija, sub, appoġġ, tt, var, 
  fieldset dd, dl, dt,, il-forma, it-tikketta, leġġenda, tabella, caption,, tfoot tbody, 
  thead, tr,, etd th, input, tagħżel, textarea 

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


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

2. CSS Shorthand

Wieħed mill-aħjar u l-karatteristika importanti tal-CSS huwa l-abbiltà li jikteb il-kodiċi b'mod mminimizzat.

Żbaljata Kodiċi

  ( 
  margin-top: 10px; 
  marġini-dritt: 7px; 
  margin-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-dritt: 7px; 
  padding-bottom: 10px; 
  padding-left: 7px; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-familja: Arial, Verdana, Tahoma, sans-Serif; 
  ) 

Correct Kodiċi

 : 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'għandekx tuża klassijiet tant u Id's

Għandi ndunat li l-biċċa l-kbira ta 'l-jibdew żid klassijiet u l-identità li kważi kull element fuq il-paġna, li mhuwiex required.There huma xi eżempji ta' hawn taħt dak li nirreferi għall.

Żbaljata Kodiċi

 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" klassi = "wrapper"> <p klassi = "heading"> klassi <strong = "subheading"> Merħba </ strong> </ p klassi <p> = "linka"> <a href = "#" klassi = "rabta"> Home </ a> </ p klassi <p> = "linkb" href <a> = "#" klassi = "link"> Dwar </ a> </ p <p = "linkc"> klassi <a href = "#" klassi = "link"> Servizzi </ a> </ p klassi <p> = "linkd" href <a> = "#" klassi = "link"> Kuntatt </ a> </ p> </ div> 

Hawn hu l-kodiċi korretta

Correct Kodiċi

 > <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> Merħba </ h1> <ul> href <a <li> = "#"> Home </ a> </ li> href <a <li> = "#"> About </ a> </ li> href <a <li> = "#"> Servizzi </ a> </ li> href <a <li> = "#"> Kuntatt </ a> </ li> < / ul> </ div> 

4. Organizzazzjoni inti stylesheet

Għandek jorganizzaw stylesheet tiegħek hekk li jkun faċli li ssib affarijiet u oġġetti relatati mill-qrib flimkien. Uża kummenti effettiv. Per eżempju, hemm il-Eżempju se jgħidulek kif għandek torganizza stylesheet tiegħek

  / * Reset * / 
   elements Marġini Neħħi u elementi ikkuttunar 

  / * Elementi bażiċi * / 
  Stil Iddefinixxi għall-elementi bażiċi: korp, H1, H2, H3, h4, H6,, ul ol, dl, p eċċ 

  / * Klassijiet Ġeneriċi * / 
  Stil Iddefinixxi għal klassijiet ġeneriku: affarijiet sempliċi bħal tneħħi l-qiegħ,  
  f'wiċċ l-ilma lejn il-ġnub eċċ  
  / * Layout bażiċi * / 

  / * Layout bażiċi * / 
  Iddefinixxi l-istil ta 'tqassim bażiku: header.  footer, eċċ sidebar 

  / * Header * / 
  Iddefinixxi l-istil għall-header 

  / * Kontenut * / 
  Iddefinixxi l-istil ta 'żona ta' kontenut 

  / * Footer * / 
  Iddefinixxi l-istil ta 'footer 

  / * Eċċ * / 
  Kompli 

5. Użu Stylesheets Kundizzjonali

Internet Explorer Buggy hija l-aktar ta 'l-browsers. Fortunatament tista 'tuża l-kummenti bil-kondizzjoni li jmexxi l-CSS li jiġi notifikat lill-IE. Jekk I ħtieġa I jkollhom stylesheet imsejjaħ ie6.css li l-miri ta 'verżjonijiet anzjani IE. Hija tippermetti lili biex jimmaniġġjaw CSS għall-browsers anzjani malajr u faċilment.

Hawn hu l-Eżempju

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

Konklużjoni

Dawn huma biss ftit mill-tips li jgħini biex jikteb il-kodiċi aħjar. Nittama li tutorja se jgħinek biex jiktbu aħjar u nodfa tal-kodiċi. Għajnuniet biex japplikaw dawn il-proġetti attwali u li jmiss tiegħek, u inti żgur li se japprezzaw l-isforzi.

Jekk taħseb li tista 'tkun aktar tutorja aħjar, Jekk jogħġbok sehem magħna. Kumment us

jekk inti tixtieq tirċievi ispirazzjoni aktar minna, jekk jogħġbok jikkunsidraw li jabbonnaw għal għalf tagħna billi RSS jew email.

Iffajljati taħt: css, tutorials by admin