Има много уроци за CSS са достъпни на интернет, но на няколко уроци са полезни. В този урок ще намерите 5 стъпки, за да пиша по-добре CSS код за следващия си проект уебсайт. Надявам се, че ще се насладите на този урок.

1. ResetCss

Винаги трябва да използвате нулиране дали може да се Ерик Майер Проучване на YUI Проучване, или ваша нулиране обичай, просто използвайте нещо.

Целта на нулиране интерфейс е да се намали браузър несъответствия в неща като височини по подразбиране линия, граници и размери на шрифта на заглавията, и т.н. - Ерик Майер

  HTML, орган, DIV, педя, ябълка, обект, H1, H2, H3, H4, h5, h6, вградена рамка, 
  Текстов блок, предварително, abbr, акроним, адрес, големи, цитират, код, Del, дфн, Em, 
  шрифт, IMG, добавки, KBD, Q, S, качамак, малки, стачка, силна, под, подкрепа, TT, VAR, 
  DD, DL, DT, fieldset, форма, етикет, легенда, таблица, надпис, tbody, tfoot, 
  thead, TR, ти, TD, вход, изберете текстовото поле 

  ; padding : 0 ; } (Граница: 0; подложка: 0;) 


  ; padding : 0 ; } * (Граница: 0; подложка: 0;) 

2. CSS стенограмите

Един от най-добрите и важна черта на СГО е способността за писане на код в минимизиран начин.

Неправилно кодекс

  ( 
  марж-нагоре: 10px; 
  марж-надясно: 7px; 
  марж-отдолу: 10px; 
  марж-наляво: 7px; 

  подплата-нагоре: 10px; 
  подплата-надясно: 7px; 
  подплата-отдолу: 10px; 
  подплата-наляво: 7px; 

  Font-размер: 12px; 
  Font-тегло: Bold; 
  ; шрифт семейство: Arial, Verdana, Tahoma, Sans-Serif; 
  ) 

Точен кодекс

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Граница: 10px 7px 10px 7px; подложка: 10px 7px 10px 7px; шрифта: получер 12px Arial, Verdana, Tahoma, Sans-Serif;) 

3. Да не се използва толкова много упражнения и Id's

Забелязал съм, че повечето от начинаещите добавите класовете и ID за почти всеки елемент от страницата, която не е required.There няколко примера по-долу на това, което съм, отнасящи се до.

Неправилно кодекс

 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" клас "wrapper" => клас <p "heading" => <strong клас "subheading" => Добре дошли </ STRONG> </ P <p клас "linka" => <един HREF = "#" клас = "Връзка"> Начало </ A> </ P <p "linkb" клас => HREF <a = "#" клас "link" => За </ A> </ P> <P клас = "linkc"> <a HREF = "#" клас "link" => Услуги </ A> </ P <p "linkd" клас => HREF <a = "#" клас "link" => Контакт </ A> </ P> </ span> 

Това е правилния код

Точен кодекс

 > <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> Добре дошли </ h1> <ul> <li> HREF <a = "#"> Начало </ A> </ Li> <li> <a HREF = "#"> За </ A> </ Li> <li> <a "#" HREF => Услуги </ A> </ Li> <li> <a "#" HREF => Контакти </ A> </ Li> < / UL> </ span> 

4. Организацията ви стиловите

Трябва да подредите вашите стилове, така че е лесно да се намерят неща, и свързаните с тях продукти са близо един до друг. Използвайте коментари ефективно. Например, там е пример ще ви кажа как да организирате вашите стилове

  / * Проучване * / 
   elements Премахване на граница и елементи подложка 

  / * Основни елементи * / 
  Задаване на стил за основните елементи: структура, H1, H2, H3, H4, h6, ол, ул., DL, п др 

  / * * Generic класове / 
  Задаване на стил за генерични класове: прости неща, като премахване на дъното,  
  плаващ по стените др  
  / * Основни Разпределение * / 

  / * Основни Разпределение * / 
  Определят стила за основния формат: заглавието.  Footer, лента др 

  / * Header * / 
  Дефиниране на стил за заглавието 

  / * Съдържание * / 
  Дефиниране на стил за съдържанието област 

  / * Footer * / 
  Дефиниране на стил за Footer 

  / * * Т.н. / 
  Продължи 

5. Използвате условно Stylesheets

Internet Explorer е най-бъгав от всички браузъри. За щастие можете да използвате условно коментари за управление на СГО, че се сервира на IE. Ако аз имам нужда от един интерфейс наречен ie6.css, насочена към по-старите версии на IE. Това ми позволява да управлявате СГО за по-старите браузъри бързо и лесно.

Ето пример

  <!--[ ако LTE IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > <link Rel = "stylesheet" HREF = "ie6.css" тип = "text/css" медии = "screen" /> 
 
  -- > <! [Endif] -> 

Заключение

Това са само някои от съветите, които ми помогне по-добре да пиша код. Надявам се, че клип ще ви помогне да напишете по-добър и чист код. Приложете тези съвети, за да си настоящи и следващи проекти, а вие със сигурност ще оценят усилията.

Ако мислите, че настойнически може да бъде по-добре, Моля, споделете с нас. Коментар нас

Ако бихте искали да получите повече вдъхновение от нас, моля, помисли абонирате за нашия емисия от RSS или чрез имейл.

Пила под: Css, уроци от администратор