May sobra-sobra ng CSS Tutorials ay makukuha sa internet ngunit ang ilang mga Tutorials ay kapaki-pakinabang. Sa ganitong tutorial makikita mo ang 5 hakbang na sumulat ng mas mahusay css code para sa iyong susunod na website ng proyekto. Umaasa ako na masisiyahan ka sa ito tutorial.

1. ResetCss

Ikaw ay dapat palaging gumamit ng i-reset ang kung maaari itong si Eric Meyer I-reset, ang I-reset ang YUI, o ang iyong sariling pasadyang i-reset, makatarungan gumamit ng isang bagay.

Ang layunin ng isang i-reset ang stylesheet ay upang mabawasan ang browser inconsistencies sa mga bagay tulad ng Heights default na linya, mga gilid at laki ng font ng mga headings, at iba pa - Eric Meyer

  html, body, div, tagal, applet, object, h1, h2, H3, h4, h5, h6, iframe, 
  blockquote, pre, abbr, acronym, address, malaki, sipiin, code, del, dfn, em, 
  font, img, pandagdag, kbd, q, s, samp, maliit, welga, malakas, sub, maghapunan, tt, var, 
  dd, DL, dt, fieldset, form, label, alamat, mesa, ang caption, tbody, tfoot, 
  thead, tr, th, td, input, piliin, textarea 

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


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

2. CSS takigrapya

Isa sa mga pinakamahusay at mahalagang katangian ng CSS ay ang kakayahan upang sumulat ng code sa isang mababawasan paraan.

Maling Code

  ( 
  margin-top: 10px; 
  margin-kanan: 7px; 
  margin-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-kanan: 7px; 
  padding-ilalim: 10px; 
  padding-kaliwa: 7px; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-family: Arial, Verdana, Tahoma, walang-serif; 
  ) 

Tamang Code

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

3. Hindi gumagamit ng maraming klase at Id's

Ako may napansin na ang halos lahat ng mga beginners magdagdag ng klase at ID sa halos bawat elemento sa pahina, na kung saan ay hindi required.There ay ilang mga halimbawa sa ibaba kung ano ako ay nagre-refer sa.

Maling Code

  class = "wrapper" > <div id = "wrapper" klase = "wrapper"> 
  > <strong class = "subheading" > Welcome </strong> </p> <p klase = "heading"> <strong klase = "subheading"> Maligayang pagdating </ strong> </ p> 
  > <a href = "#" class = "link" > Home </a> </p> <p klase = "linka"> <a href = "#" klase = "link"> Home </ a> </ p> 
  > <a href = "#" class = "link" > About </a> </p> <p klase = "linkb"> <a href = "#" klase = "link"> Tungkol sa </ a> </ p> 
  > <a href = "#" class = "link" > Services </a> </p> <p klase = "linkc"> <a href = "#" klase = "link"> Serbisyo </ a> </ p> 
  > <a href = "#" class = "link" > Contact </a> </p> <p klase = "linkd"> <a href = "#" klase = "link"> Makipag-ugnayan sa </ a> </ p> 
  </ div> 

Narito ang tamang code

Tamang Code

  > <div id = "wrapper"> 
  <h1> Welcome </ h1> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About </a> </li> <li> <a href = "#"> Tungkol sa </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Serbisyo </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Makipag-ugnayan sa </ a> </ li> 
  </ ul> 
  </ div> 

4. Organization mo stylesheet

Dapat mong isaayos ang iyong mga stylesheet upang ito ay madaling mahanap ang mga bagay-bagay at mga kaugnay na mga bagay ay malapit na sama-sama. Gamitin ang mga komento mabisa. Halimbawa, May ang mga Halimbawa ay magsasabi sa iyo kung paano isaayos ang iyong mga stylesheet

  / * I-reset ang * / 
   elements Alisin ang puwang sa paligid at mga sangkap ng palaman 

  / * Basic Sangkap * / 
  Tukuyin ang estilo para sa mga pangunahing sangkap: katawan, h1, h2, H3, h4, h6, ol, ul, DL, p atbp 

  / * Generic Pag-aaral * / 
  Tukuyin ang estilo para sa pangkaraniwang mga klase: mga simpleng bagay na tulad ng tanggalin sa ibaba,  
  nakalutang sa panig atbp  
  / * Basic Layout * / 

  / * Basic Layout * / 
  Tukuyin ang mga estilo para sa basic layout: header.  footer, sidebar atbp 

  / * * * * * * Header / 
  Tukuyin ang mga estilo para sa header 

  / * * * * * * Nilalaman / 
  Tukuyin ang mga estilo para sa nilalaman na lugar 

  / Footer * * * * * * / 
  Tukuyin ang mga estilo para sa footer 

  / * * * * * * Etc / 
  Magpatuloy 

5. Gamitin ang kondisyon Stylesheets

Internet Explorer ay ang pinaka-maraming surot ng lahat ng mga browser. Sa kabutihang palad ay maaari mong gamitin ang comments kondisyon upang pamahalaan ang CSS na nanilbihan sa mga IE. Kung kailangan ko ito Mayroon akong stylesheet tinatawag ie6.css na tumatarget sa mas lumang bersyon ng IE. Ito ay nagbibigay-daan sa akin upang mapamahalaan ang CSS para sa mas lumang mga browser ay mabilis at madali.

Narito ang Halimbawa ng

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

Paghihinuha

Ang mga ito ay lamang ang ilan sa mga tips na makakatulong sa akin na sumulat ng mas mahusay na code. Umaasa ako na ang tutorial ay maaari ring makatulong sa iyo na sumulat ng mas mahusay at malinis ang code. Mag-apply ang mga Tips sa iyong kasalukuyan at susunod na proyekto, at ikaw ay tiyak na pahalagahan ang mga pagsisikap.

Kung Isipin mo na ang tutorial ay maaaring maging mas mahusay, Paki-share sa amin. Comment sa amin

kung nais mong makatanggap ng mas maraming inspirasyon mula sa amin, mangyaring isaalang-alang-subscribe sa aming mga feed sa pamamagitan ng RSS o sa pamamagitan ng email.

Filed under: Css, Tutorials sa pamamagitan ng admin