Барьер CSS “на вступление крайне низка, в основном из-за характера его синтаксис.Быть ясным и легко понять, синтаксис имеет смысл даже для неопытных веб-дизайнера.It’ так просто, на самом деле, что вы могли бы просто стиль CSS-сайта в течение нескольких часов обучения it.

Но этой кажущейся простоте deceitful.Если после нескольких часов работы, вашим прекрасно созданный сайт отлично смотрится в Safari, весь ад может сорваться, если вы не приняло необходимых мер, чтобы сделать его работу в Internet Explorer.В панике, вы добавляете хаки и фильтры, где только несколько настроек или иной подход может сделать.Зная, как иметь дело с этими вопросами приходит с опытом, с проб и ошибок и с невозможностью массово, а затем обучение правильному way.

Понимание несколько часто упускается из виду концепции также важно.Концепции может быть трудно понять и посмотреть скучный на первый, но понять их и зная, как воспользоваться ими является important.

Два из этих понятий specificity __ и 3 | inheritance.Не очень общие слова среди веб-дизайнеров, не так ли?Говоря о border-radius и text-shadow есть гораздо больше удовольствия, но специфичность и наследование являются фундаментальные понятия, что любой человек, который хочет быть хорошим CSS должны понимать.Они помогут вам создать чистую, обслуживании и гибкие листы стилей.Давайте посмотрим на то, что они означают и как они work.

Понятие “ cascade ” находится в самом сердце CSS (просто посмотрите на его имя).Это в конечном счете определяет, какие свойства будут изменения данного элемента.Каскад связан с тремя основными понятиями: значение, специфика и исходном порядке.Каскад состоит из следующих трех шагов, чтобы определить, какие свойства присвоить элементу.К концу этого процесса, каскад присвоило weight для каждого правила, и этот вес определяет, какое правило имеет приоритет, когда более чем один applies.

Обратите внимание на чтение наших предыдущих статья по теме:

• CSS Специфичность: вещи вы должны Know

1.Importance

Таблица стилей может иметь несколько различных источников:

1. Пользователь agentНапример, стиль по умолчанию в браузере sheet.
2. UserТакие, как браузер пользователя options.
3. AuthorЭто CSS предоставляемых страницы (встроенный, встроенный или внешний)

По умолчанию, это порядок, в котором различные источники обрабатываются, так что правила автора будет доминировать над пользователя и агент, и так on.

Существует также !important заявление для рассмотрения в каскаде.Это заявление используется, чтобы сбалансировать относительный приоритет пользователя и листы автором стиля.Хотя автор стилеЛисты имеют приоритет над пользователем них, если пользователь правило, имеет !important применяется к нему, она перекрывает даже автор правило, которое также имеет !important применяется к it.

Зная это, давайте посмотрим на окончательный приказ, в порядке возрастания importance:

1. Пользователь агента деклараций,
2. Пользователь деклараций,
3. Автор заявления,
4. Автор !important декларации,
5. Пользователь !important declarations.

Эта гибкость в приоритетных является ключевой, поскольку она позволяет пользователям переопределять стили, которые могли бы затруднить доступ к веб-сайту.(Пользователю может понадобиться более крупным шрифтом или другим цветом, например).

2.Specificity

Каждое правило CSS имеет частности weight (как уже упоминалось в введении), то есть он может быть более или менее важными, чем другие, или одинаково важны.Этот вес определяет, какие свойства будут применены к элементу, когда существуют противоречивые rules.

По оценке rule’ значение с, каскад объясняет специфику ее, если одно правило, является более конкретным, чем другой, он перекрывает it.

Если два правила одни и те же веса, источник и специфичность, позже один applied.

? 2,1 Как рассчитать Специфика

Есть несколькими способами calculate селектора specificity.

Самый быстрый способ это сделать следующее.Добавить 1 для каждого элемента и псевдо-элемента (например, :before и :after), добавить 10 для каждого атрибута (например, [type=”text”]), классов и псевдо-класса (например, :link или :hover), добавить 100 для каждого ID и добавить 1000 для встроенного style.

Давайте подсчитаем специфичность следующих селекторов помощью этого метода:

• p.note1 класс 1 элемент = 11
• #sidebar p[lang="en"]1 ID 1 атрибут 1 элемент = 111
• body #main .post ul li:last-child1 ID 1 класс 1 псевдо-класс 3 элемента = 123

Подобный метод, описанный в W3C’ характеристики с, это начать с = 0, B = 0, C = 0, D = 0 и заменить номера соответственно:

• = 1, если стиль является встроенным,
• B = количество идентификаторов,
• C = количество селекторов атрибутов, классов и псевдо-классы,
• D = количество имен элементов и псевдо-elements.

Давайте подсчитаем специфичность другой набор селекторов:

• <p style="color:#000000;">= 1, B = 0, C = 0, D = 0 → 1000
• footer nav li:last-child= 0, B = 0, C = 1, D = 3 → 0013
• #sidebar input:not([type="submit"])= 0, B = 1, C = 1, D = 1 → 0111 (Заметим, что отрицание псевдо-класса не в счет, но селектор внутри он делает.)

Если вы предпочитаете учиться в этой веселее way Энди Кларк обратила умный аналогия между специфичностью и звезды Wars назад в 2005 году, что, несомненно, облегчило для поклонников Star Wars, чтобы понять специфику.Еще один хороший объяснение “ CSS специфичность для покераPlayers, ” хотя и несколько более complicated.

Энди Clarke’ с CSS Специфика войны chart.

Помните, что не-CSS презентационной разметки связано со специфичностью 0, который будет применяться, например, в font tag.

Возвращаясь к !important заявление, имейте в виду, что использование его на сокращенное свойство такое же, как объявить всех своих подчиненных свойств как !important. (Даже если это было бы вернуть их к значениям по умолчанию)

Если Вы используете импортировать таблицы стилей (@import) в вашем CSS, вы должны объявить их перед всеми другими правилами.Таким образом, они будут рассматриваться как исходящие, прежде чем все другие правила в CSS file.

Наконец, если два селектора при этом имеют одинаковую специфичность, последняя будет override предыдущая (ы)

2,2 внесении Специфика работы для You

Если не тщательно рассмотрены, специфика может вернуться к преследовать вас и приведет вас невольно превратить ваши таблицы стилей в сложной иерархии излишне сложными rules.

Вы можете следить за несколькими guidelines чтобы избежать серьезных вопросов:

• Когда начала работы над CSS, использовать общие селекторы и добавить специфику как вы идете вперед;
• Использование дополнительных селекторов не означает, что использование излишне сложным;
• . Больше полагаться на специфику чем на порядок селекторов, так что ваши таблицы стилей легче редактировать и сохранять (особенно др.)

Хорошее эмпирическое правило, можно найти в статье Джим Джефферс, “ Искусство и дзен написания CSS“:

Рефакторинг CSS селекторы быть менее конкретным экспоненциально сложнее, чем просто добавление определенных правил, ситуации arise.

3.Inheritance

Кратким и четким разъяснением наследов …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров