Є безліч підручників CSS можна ознайомитися на Інтернет, але кілька підручників є корисними. У цьому підручнику ви знайдете 5 кроків, щоб писати краще, CSS код для вашого наступного сайті проекту. Сподіваюся, вам сподобається цей урок.

1. ResetCss

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

Мета скидання стилів зі скорочення браузера невідповідностей у речах, як висоту рядка за умовчанням, поля і розмірів шрифтів заголовків і так далі - Ерік Мейер

  HTML, тіло, DIV, SPAN, аплету, об'єкт, H1, H2, H3, H4, H5, H6, IFRAME, 
  BLOCKQUOTE, PRE, скор, скорочене найменування, адреса, великий, цитують, код справі, DFN, EM, 
  шрифт, IMG, СК, KBD, Q, S, SAMP, невеликий, удар, сильний, SUB, SUP, TT, VAR, 
  DD, DL, DT, FIELDSET, форми, етикетки, легенда, таблиці, текст, TBODY, TFOOT 
  THEAD, TR, Th, TD, INPUT, SELECT, TEXTAREA 

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


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

2. CSS Стенографія

Один з кращих і важливих особливостей CSS є можливість писати код на мінімізовано шляхом.

Невірний код

  ( 
  різниці-топ: 10px; 
  MARGIN-направо: 7px; 
  різниці-дно: 10px; 
  MARGIN-наліво: 7px; 

  FONT-SIZE: 10px; 
  font-направо: 7px; 
  PADDING-BOTTOM: 10px; 
  font-наліво: 7px; 

  Размер шрифта: 12px; 
  FONT-WEIGHT: Bold; 
  ; font-family: Arial, Verdana, Tahoma, Sans-Serif; 
  ) 

Правильний код

  ( 
  ; Маржа: 10px 7px 10px 7px; 
  ; PADDING: 10px 7px 10px 7px; 
   Arial, Verdana, Tahoma, sans-serif ; шрифта: Bold 12px Arial, Verdana, Tahoma, Sans-Serif;  
  ) 

3. Не використовуючи так багато класи і ідентифікатори

Я помітив, що найбільш для початківців додати класи і ідентифікатори майже кожного елемента на сторінці, яка не 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" клас => <a HREF = "#" клас "link" => Про </ A> </ P> <P клас = "linkc"> <a HREF = "#" клас "link" => Послуги </ A> </ p> <P "linkd" клас => <a HREF = "#" клас "link" => Контакт </ A> </ P> </ div> 

Ось правильний код

Правильний код

 > <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> <a "#" HREF => Головна </ A> </ LI> <li> <a HREF = "#"> Про програму </ A> </ LI> <li> <a "#" HREF => Послуги </ A> </ LI> <li> <a "#" HREF => Контакт </ A> </ LI> < / UL> </ div> 

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

Ви повинні організувати ваш стиль так, щоб легко знайти речі та пов'язані з ним близькі один до одного. Використовуйте коментарі ефективно. Наприклад, Існує приклад розповісти вам, як організувати ваш стиль

  / * Reset * / 
   elements Видалити поля і відступи елемента 

  / * Основні елементи * / 
  Визначити стиль для основних елементів: тіло, H1, H2, H3, H4, H6, OL, UL, DL, р т.д. 

  / * Узагальнені класи * / 
  Визначити стиль для загального класу: прості речі, як видалити дно,  
  плаваючі по сторонах т.д.  
  / * Основний макета * / 

  / * Основний макета * / 
  Визначити стиль для основних верстка: заголовок.  Footer, бічний т.д. 

  / * Заголовок * / 
  Визначити стиль для заголовка 

  / * Зміст * / 
  Визначити стиль для вмісту області 

  / * Footer * / 
  Визначити стиль для Footer 

  / * * Etc / 
  Продовжити 

5. Використовувати умовні Stylesheets

Internet Explorer є найбільш Buggy всіх браузерах. На щастя, ви можете використовувати умовні коментарі для управління CSS, який подається в IE. Якщо мені треба у мене є стиль, що називається ie6.css цілі старих версіях IE. Це дозволяє мені справлятися з CSS для старих браузерів швидко і легко.

Ось приклад

  <!--[ Якщо LTE IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > <link REL = "stylesheet" HREF = "ie6.css" Type = "text/css" ЗМІ "screen" = /> 
 
  -- > <! [ENDIF] -> 

Висновок

Такими є лише деякі з порад, які допоможуть мені краще писати код. Я сподіваюся, що навчальний посібник також допоможе вам писати краще і чистого коду. Застосовувати ці поради на поточний і наступні проекти, і ви, безсумнівно, оцінять зусилля.

Якщо ви вважаєте, що навчальний посібник може бути більш кращого, будь ласка, поділіться з нами. Коментарі нас

Якщо Ви хотіли б отримувати більше натхнення з нас, будь ласка, підпишіться на наш канал по RSS або по електронній пошті.

Подано в: Css, Навчання по адміністратора