Есть множество учебников 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, ТД, 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 ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Маржа: 10px 7px 10px 7px; обивка: 10px 7px 10px 7px; шрифта: 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, Обучение по администратора