Istnieje mnóstwo tutoriali CSS są dostępne na stronie internetowej, ale kilka tutoriali są użyteczne. W tym poradniku znajdziesz 5 kroków do tworzenia lepszych css code do następnej strony internetowej projektu. Mam nadzieję, że korzystają z tego samouczka.

1. ResetCss

Należy zawsze używać reset, czy może ona być Eric Meyer Reset, YUI Reset, lub własne przywrócić zwyczaj, wystarczy użyć czegoś.

Celem reset stylów jest zmniejszenie przeglądarki niespójności w takie rzeczy jak wysokość linii domyślnie, marż i rozmiary czcionek pozycji, i tak dalej - Eric Meyer

  html, body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, address, duże, cite, code, del, dfn, em, 
  czcionki, img, ins, kbd, q, s, samp, small, sub strajku, silny, 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 Stenografia

Jeden z najlepszych i ważnym elementem CSS jest możliwość pisania kodu w sposób zminimalizowane.

Błędny kod

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

  margin-top: 10px; 
  margin-right: 7px; 
  margin-bottom: 10px; 
  padding-left: 7px; 

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

Poprawny kod

 : 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, Tahoma, sans-serif;) 

3. Nie przy tak wielu zajęć i Id

Zauważyłem, że większość początkujących dodać klasy i ID do prawie każdego elementu na stronie, która nie jest required.There kilka przykładów poniżej tego, co mam na myśli.

Błędny kod

 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"> Klasa <p = "heading"> <strong class = "subheading"> Witamy </ strong> </ p> Klasa <p = "linka"> <a href = "#" class = "link"> </ a> </ p> Klasa <p "linkb" => href <a = "#" class = "link"> O </ a> </ p> <p class = "linkc"> href <a = "#" class = "link"> Usługi </ a> </ p> Klasa <p "linkd" => href <a = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Oto poprawny kod

Poprawny kod

 > <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> Witaj </ h1> <ul> <li> href <a = "#"> </ a> </ li> <li> href <a = "#"> O </ a> </ li> <li> href <a = "#"> Usługi </ a> </ li> <li> href <a "#" => Kontakt </ a> </ li> < / ul> </ div> 

4. Organizacja you Stylesheet

Należy uporządkować arkusz stylów, tak aby łatwo było znaleźć rzeczy i podobne elementy są blisko siebie. Komentarze Użyj skutecznie. Na przykład, istnieje Przykład pokaże Ci, jak zorganizować stylów

  / * Reset * / 
   elements Margines Usuń i elementy padding 

  / * Podstawowe Elementy * / 
  Określ styl podstawowych elementów: body, H1, H2, H3, H4, H6, ol, ul, dl, p itd. 

  / * Zajęcia Generic * / 
  Zdefiniuj styl ogólnych klas prostych rzeczy jak usunięcie dołu  
  pływających do stron itp.  
  / * Podstawowego układu * / 

  / * Podstawowego układu * / 
  Określ styl Podstawowy układ: nagłówek.  stopki bocznym, itp. 

  / * Header * / 
  Określ styl nagłówka 

  / * Treść * / 
  Definiowanie stylów dla obszaru zawartości 

  / * Stopka * / 
  Określ styl stopki 

  / * Etc * / 
  Kontynuuj 

5. Użyj stylów warunkowych

Internet Explorer najbardziej buggy wszystkich przeglądarkach. Na szczęście można użyć warunkowego komentarze do zarządzania CSS, które jest podawane do IE. Jeśli chcę to muszę stylów o nazwie ie6.css że cele starszych wersjach IE. Pozwala to na zarządzanie CSS dla starszych przeglądarek szybko i łatwo.

Oto przykład

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

Wnioski

Są to tylko niektóre z porad, które pomogą mi pisać lepsze kodu. Mam nadzieję, że kurs pozwoli Ci również pisać lepiej i czyste kodu. Zastosuj te porady do projektów bieżących i następnych, a na pewno docenią wysiłek.

Jeśli uważasz, że wychowawczy może być bardziej lepszy, podziel się z nami. Komentarz do nas

jeśli chcieliby Państwo uzyskać więcej inspiracji z nami, proszę zapisać się do naszego kanału przez RSS lub poprzez e-mail.

Filed under: CSS, Tutoriale przez admin