Rengeteg olyan CSS oktatóanyagok állnak rendelkezésre az interneten, de a kevés tutorials hasznosak is. Ez a bemutató talál 5 lépést kell jobb css kódot itt a következő projekt weboldalán. Remélem tetszeni fog ez a bemutató.

1. ResetCss

Mindig a reset-e használni lehet Eric Meyer Reset, a YUI Reset, vagy a saját egyéni reset, csak használ valamit.

A cél a reset stíluslap, hogy csökkentse a böngésző ellentmondások dolgok, mint például az alapértelmezett sor magasságú, árrések és betüméret a fejezetek, és így tovább - Eric Meyer

  html, body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, cím, nagy, cite, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
  dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, 
  thead, tr, th, td, input, select, textarea 

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


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

2. CSS Shorthand

Az egyik legjobb és legfontosabb tulajdonsága a CSS az a képesség, hogy írjon kódot a lekicsinyített módon.

Hibás kód

  ( 
  text-top: 10px; 
  a margin-right: 7px; 
  a margin-bottom: 10px; 
  a 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; 
  ) 

Helyes kódot

 : 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. Ne használja olyan sok osztály és azonosítóit

Vettem észre, hogy a legtöbb kezdő osztályok és add azonosítót szinte minden eleme az oldalon, ami nem required.There néhány példát az alábbiakban, hogy mi vagyok utalva.

Hibás kód

 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"> Welcome </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Home </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> A </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Szolgáltatások </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kapcsolat </ a> </ p> </ div> 

Itt van a helyes kódot

Helyes kódot

 > <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> Welcome </ h1> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Leírás </ a> </ li> <li> <a href = "#"> Szolgáltatások </ a> </ li> <li> <a href = "#"> Kapcsolat </ a> </ li> < / ul> </ div> 

4. Szervezete you stíluslap

Meg kell szervezni a stíluslap úgy, hogy könnyen meg lehessen találni a dolgokat és a kapcsolódó jogcímek közel állnak egymáshoz. Hozzászólásokat hatékonyan. Például ott van a példa megmondja, hogyan kell megszervezni a stíluslap

  / * Törlés * / 
   elements Távolítsa el árrés és padding elemeket 

  / * Alapelemeit * / 
  Adjuk meg a stílus alapvető elemei: test, H1, H2, H3, H4, H6, ol, ul, dl, p, stb 

  / * Generic Classes * / 
  Adjuk meg a stílus generikus osztályok: az egyszerű dolgok, mint például távolítsa el az alsó,  
  úszó az oldalakkal, stb  
  / * Basisdesign * / 

  / * Basisdesign * / 
  Adjuk meg a stílus alapvető layout: header.  footer, oldalsáv, stb 

  / * Fejléc * / 
  Adjuk meg a stílus fejléc 

  / * Tartalom * / 
  Adjuk meg a stílus tartalmi terület 

  / * Footer * / 
  Adjuk meg a stílus lábléc 

  / * Etc * / 
  Továbbra 

5. Használja Feltételes Stíluslapok

Az Internet Explorer a leginkább hibás az összes böngészőben. Szerencsére használhatjuk a feltételes megjegyzéseket kezelni a CSS ez szolgált IE. Ha kell, hogy van egy úgynevezett stylesheet ie6.css hogy e célok régebbi verziói IE. Lehetővé teszi számomra, hogy kezeli a régebbi böngészők CSS gyorsan és egyszerűen.

Itt a példa

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

Következtetést

Ez csak néhány a tipp, hogy segítsen nekem, hogy jobb kódot írni. Remélem, hogy a tutorial is segíteni fogja írni, hogy a jobb és a tiszta kódot. Tippek, hogy alkalmazzák ezeket a jelenlegi és a következő projekteket, és akkor biztosan értékelni az erőfeszítéseket.

Ha úgy gondolja, hogy tutorial nagyobb lehet, jobban, kérjük ossza meg velünk. Hozzászólás minket

Ha szeretne többet kapnak ihletet tőlünk, kérjük, fontolja meg a feliratkozást a feedre az RSS, vagy e-mailben.

Kategória: Css, Tutorials by admin