Internet ancak birkaç öğreticiler yararlı kullanılabilir çok sayıda CSS öğreticiler burada bulunmaktadır. Bu bir sonraki web projesi için daha iyi css kodu yazmak için 5 adım bulacaksınız eğitimle,. Bunu eğitim zevk umuyoruz.

1. ResetCss

Her zaman Eric Meyer Sıfırla, YUI sıfırla veya kendi özel sıfırlamak, sadece bir şey kullanmak olabilir İster sıfırlamak kullanmalısınız.

Bir stil sıfırlama hedefi varsayılan satır yükseklikleri gibi şeyler tarayıcı tutarsızlıkları azaltmak için ise, kenar boşlukları ve başlıklarının font büyüklüklerinin, vb - Eric Meyer

  html, body, div, span, applet, nesne, H1, H2, H3, H4, H5, h6, iframe, 
  blockquote, pre, kısalt, kısaltma, adres, büyük,,, kod, del, dfn, em Cite 
  font, img, ins, kbd, q, samp, küçük, grev, strong, sub, sup, tt, var, var 
  , dt, dl dd fieldset, form, etiket, efsane, masa, caption, tbody, tfoot, 
  thead, tr, th, td, input, textarea seçin 

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


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

2. CSS Shorthand

En iyi ve önemli bir CSS özelliğinin yeteneği küçültülmüş bir şekilde kod yazmasıdır.

Yanlış Kodu

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

Doğru Kodu

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

3. Çok sınıflar ve kullanarak Don't ID

Ben yeni başlayanlar çoğu sınıfları eklemek ve kimlik sayfa hangi required.There Ben ne kastediyorum aşağıda bazı örnekler değil hemen hemen her unsur için's farkettik.

Yanlış Kodu

 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 = "wrapper"> <p class = "heading"> <strong class = "subheading"> Hoşgeldiniz </ strong> </ p> <p class = "linka"> <a href = = "wrapper" Sınıf Kimliği "#" class = "link"> Anasayfa </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> </ a> </ p> Hakk <p class = "linkc> <a href = "#" class = "link"> Hizmetler </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> İletişim </ a> </ p> </ div> 

Burada doğru kod

Doğru Kodu

 > <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 = "wrapper"> <h1> Hoşgeldiniz </ h1> <ul> <li> <a href id = "#"> Anasayfa </ a> </ li> <li> <a href = "#"> Hakkında </ a> </ li> <li> <a href = "#"> Hizmetler </ a> </ li> <li> <a href = "#"> İletişim </ a> </ li> < / ul> </ div> 

4. Organizasyonu Stil

Sen o kadar şey ve ilgili öğeleri bulmak kolay stil düzenlemek gerekir birbirine yakın bulunmaktadır. Kullanım yorumları etkili. Örneğin, nasıl stil düzenlemek için söyleyecektir örnek

  / * Reset * / 
   elements Kaldır marjı ve dolgu elemanları 

  / * Temel Elemanları * / 
  Temel unsurları tanımlama tarzı: beden, H1, H2, H3, H4, h6, ol, ul, dl, p vb 

  / * Generic Sınıflar * / 
  Genel sınıflar için tanımlayın stili: alt kaldırmak gibi basit şeyler,  
  taraf vb yüzen  
  / * Temel Düzeni * / 

  / * Temel Düzeni * / 
  Temel düzen için stil: başlık tanımlayın.  altbilgi kenar çubuğu vb 

  / * Header * / 
  Define başlık için stil 

  / * Content * / 
  Define içerik alanı için stil 

  / * Footer * / 
  Define altbilgi tarzı 

  / * Etc * / 
  Devam 

5. Kullanım Koşullu Stylesheets

Internet Explorer'ın en tarayıcıları buggy olduğunu. Neyse ki sen bu CSS IE sunulduğunda yönetmek için koşullu yorum kullanabilirsiniz. Eğer ihtiyacınız bir stil olarak ie6.css var ki IE hedefleri eski sürümlerini. Benim eski tarayıcılar için hızlı ve kolay CSS yönetmenize olanak sağlar.

Burada örnek

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

Sonuç

Bunlar sadece bazı ipuçları daha iyi kod yazmak için bana yardım vardır. O öğretici de daha iyi ve temiz kod yazmak için yardımcı olacağını umuyoruz. Mevcut ve gelecek projeler için aşağıdaki ipuçlarını uygulayın ve mutlaka çabalarını takdir edeceklerdir.

If You Think bu eğitim için daha iyi, lütfen bizimle paylaşmaktadır olabilir. Yorum bize

Eğer bizden daha fazla ilham almak istiyorsanız, lütfen RSS ya da e-posta ile yaparak yem Katılınız.

Filed under: Css, yönetici tarafından Tutorials