Existuje spousta tutoriálů CSS jsou k dispozici na internetu, ale málo cvičení jsou užitečná. V tomto tutoriálu najdete 5 kroků k lepší napsat css kód pro další webové stránky projektu. Doufám, že se vám bude líbit tento tutoriál.

1. ResetCss

Vždy byste měli používat nastavení, zda to může být Eric Meyer Reset, YUI Reset, nebo své vlastní nastavení, stačí použít něco.

Cílem reset stylů je snížit prohlížeč nesrovnalostí v takové věci výškách výchozí linie, okraje a velikosti písma čísel, a tak dále - 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é, stávka, strong, sub, sup, tt, var, 
  dd, dl, dt, div, formuláře, etikety, legenda, tabulka, caption, tbody, TFOOT, 
  thead, tr, th, td, input, select, textarea 

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


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

2. CSS Zkratka

Jeden z nejlepších a důležitý rys CSS je schopnost psát kód v minimalizovaném způsobem.

Nesprávný 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ávný 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. Nemusí používat tolik tříd, a to Id

Všiml jsem si, že většina začátečníků přidat tříd a ID je téměř každý prvek na stránce, která není required.There jsou některé níže uvedené příklady toho, co jsem na mysli.

Nesprávný 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"> Vítejte </ 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> 

Zde je správný kód

Správný 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> Vítejte </ h1> <ul> <li> <a href = "#"> Domů </ a> </ P> <li> <a href = "#"> O </ a> </ P> <li> <a href = "#"> Služby </ a> </ P> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organizace si Stylesheet

Měli byste uspořádat stylů, takže je snadné najít věci a související položky jsou blízko u sebe. Použijte komentáře efektivně. Například, tam je příklad vám řekne, jak organizovat své stylu

  / * Reset * / 
   elements Odstraňte rozpětí a čalounění prvky 

  / * Základní prvky * / 
  Definovat styl pro základní prvky: subjekt, H1, H2, H3, H4, H6, ol, ul, dl, p, atd. 

  / * Generic třídy * / 
  Definovat styl pro generické třídy: jednoduché věci, jako odstranit dole,  
  plovoucí do stran, atd.  
  / * Základní Layout * / 

  / * Základní Layout * / 
  Definovat styl pro základní dispozice: hlavicka.  zápatí, kredenc, atd. 

  / * Header * / 
  Definovat styl záhlaví 

  / * Obsah * / 
  Definovat styl pro obsah oblasti 

  / * Footer * / 
  Definovat styl zápatí 

  / * Etc * / 
  Pokračovat 

5. Podmíněné používání Styly

Internet Explorer je kočárek nejvíce ze všech prohlížečů. Naštěstí můžete použít podmíněné komentáře pro správu CSS, která sloužila k IE. Mám-li potřebovat jsem volal ie6.css styl, který se zaměřuje starší verze IE. To mi umožňuje řídit CSS pro starší prohlížeče snadno a rychle.

Zde je příklad

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

Závěr

To jsou jen některé z tipů, které mi pomohou psát lepší kód. Doufám, že tutoriál vám rovněž pomůže psát lepší a čistý kód. Použít tyto tipy na aktuální a další projekty, a vy jistě ocení úsilí.

Pokud si myslíte, že cvičení může být lepší, prosím, podělit se s námi. Komentář nás

Pokud chcete získat více inspirace od nás, prosím, přihlašte se náš RSS s RSS nebo e-mailem.

Soubor pod: Css, Návody admin