Existuje množstvo tutoriálov CSS sú k dispozícii na internete, ale málo cvičenia sú užitočné. V tomto tutoriálu nájdete 5 krokov k lepšej napísať css kód na ďalšie webové stránky projektu. Dúfam, že sa vám bude páčiť tento tutoriál.

1. ResetCss

Vždy by ste mali používať nastavenia, či to môže byť Eric Meyer Reset, YUI Reset, alebo svoje vlastné nastavenia, stačí použiť niečo.

Cieľom reset štýlov je znížiť prehliadač nezrovnalostí v takejto veci výškach predvolené línie, okraje a veľkosti písma čísel, a tak ďalej - Eric Meyer

  html, body, div, span, applet, objekt, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, adresa, big, cite, code, del, DFN, em, 
  font, img, ins, kbd, q, s, samp, malé, štrajk, strong, sub, sup, tt, var, 
  dd, dl, dt, div, formuláre, etikety, legenda, tabuľka, caption, tbody, tfoot, 
  thead, tr, th, td, input, select, textarea 

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


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

2. CSS Skratka

Jeden z najlepších a dôležitý rys CSS je schopnosť písať kód v minimalizovanom spôsobom.

Nesprávny kód

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

Správny kód

 : 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. Nemusia používať toľko tried, a to Id

Všimol som si, že väčšina začiatočníkov pridať tried a ID je takmer každý prvok na stránke, ktorá nie je required.There sú niektoré nižšie uvedené príklady toho, čo som na mysli.

Nesprávny 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"> Vitajte </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Home </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> O </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Služby </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Tu je správny kód

Správny kód

 > <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> Vitajte </ h1> <ul> <li> <a href = "#"> Domov </ a> </ P> <li> <a href = "#"> O </ a> </ P> <li> <a href = "#"> Služby </ a> </ P> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organizácia si Stylesheet

Mali by ste zorganizovať štýlov, takže je ľahké nájsť veci a súvisiace položky sú blízko pri sebe. Použite komentáre efektívne. Napríklad, tam je príklad vám povie, ako organizovať svoje štýlu

  / * Reset * / 
   elements Odstráňte rozpätie a čalúnenia prvky 

  / * Základné prvky * / 
  Definovať štýl pre základné prvky: subjekt, H1, H2, H3, H4, H6, ol, ul, dl, p, atď 

  / * Generic triedy * / 
  Definovať štýl pre generické triedy: jednoduché veci, ako odstrániť dole,  
  plávajúce do strán, atď  
  / * Základné Layout * / 

  / * Základné Layout * / 
  Definovať štýl pre základné dispozície: hlavicka.  päty, kredenc, atď 

  / * Header * / 
  Definovať štýl hlavičky 

  / * Obsah * / 
  Definovať štýl pre obsah oblasti 

  / * Footer * / 
  Definovať štýl päty 

  / * Etc * / 
  Pokračovať 

5. Dočasné uplatňovanie Štýly

Internet Explorer je kočík najviac zo všetkých prehliadačov. Našťastie môžete použiť podmienené komentáre pre správu CSS, ktorá slúžila na IE. Mám-li potrebovať som volal ie6.css štýl, ktorý sa zameriava staršie verzie IE. To mi umožňuje riadiť CSS pre staršie prehliadače ľahko a rýchlo.

Tu je príklad

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

Záver

To sú len niektoré z tipov, ktoré mi pomôžu písať lepšie kód. Dúfam, že tutoriál vám tiež pomôže písať lepšie a čistý kód. Použiť tieto tipy na aktuálne a ďalšie projekty, a vy iste ocenia úsilie.

Ak si myslíte, že cvičenie môže byť lepší, prosím, podeliť sa s nami. Komentár nás

Ak chcete získať viac inšpirácie od nás, prosím, prihláste sa náš RSS s RSS alebo e-mailom.

Súbor pod: Css, Návody admin