Каскадирование css.

Принцип каскадирования стилей css применяется в том случае, если одному и тому же элементу задано несколько css свойств с разными значениями и между ними возникает конфликт.

Что это значит? Для того, чтобы правильно назначить стили какому-либо элементу, мы можем использовать различные комбинации селекторов и придать нашему свойству более весомый приоритет, чем тот, который наследуется элементом от родителя или прописан в другой css инструкции.

3. Приоритеты css стилей.

Итак, мы с Вами подошли к самому интересному. Сейчас мы научимся правильно адресовать стили, чтобы они применялись именно там, где нам нужно, а не где попало.

Начнем с самого низа:

1. Самым низким приоритетом обладают стили браузера. Не удивляйтесь — каждый браузер имеет свои стили по умолчанию. Они применяются, если для элемента вообще не заданы никакие стили. Поэтому, если Вы хотите, чтобы Ваш сайт во всех браузерах смотрелся одинаково — нужно обязательно прописывать стили всем элементам.Есть еще один способ на тот случай, если Вы все-таки забыли прописать стили к какому-нибудь элементу. Это сброс css стилей. Смысл заключается в том, чтобы изначально сбросить все стили браузеров. Для этого используются готовые блоки css инструкций, которые нужно просто вставить в начало вашего файла со стилями. Вот Вам один из вариантов такого «сбрасывающего» блока инструкций:

12345678910111213141516171819202122232425262728293031323334353637383940414243

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}:focus { outline: 0;} body { line-height: 1; color: black; background: white;} ol, ul { list-style: none;} table { border-collapse: separate; border-spacing: 0;} caption, th, td { text-align: left; font-weight: normal;} blockquote:before, blockquote:after,q:before, q:after { content: "";} blockquote, q { quotes: "" "";}

2. Просто вставляете этот код в начало Вашего файла css и можете не беспокоиться о том, что Ваш сайт будет выглядеть в разных браузерах по разному.

3. Вторыми по значимости являются стили, которые пользователь выставил в настройках браузера. Они тоже сбрасываются при помощи вышеуказанного списка инструкций.

4. Следующим уровнем приоритета обладают стили, унаследованные элементами от своих предков. Это то, о чем мы говорили в начале статьи.

5. Еще более высокий приоритет имеют стили, прописанные при помощи различных селекторов во внешнем файле с css стилями. Как подключить файл со стилями к Вашей интернет странице, я рассказывал в статье: Как привязать CSS стили к HTML коду интернет страницы.

6. Следующими по значимости являются стили, прописанные при помощи селекторов непосредственно внутри HTML документа внутри тегов <style>.Часто бывает так, что к одному и тому же элементу имеют отношение стили, прописанные в разных селекторах. Чтобы разрешить этот конфликт используется расчет специфичности селектора. И инструкции будут применяться к элементу в соответствии с этим расчетом. При расчёте специфичности селекторапринимается во внимание:

o количество идентификаторов (#id) в селекторе — ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);

o количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе — ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS);

o количество тегов в селекторе — ((0,0,1) за каждый объявленный тег в селекторе правила CSS).

Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.

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

Отслеживать селекторы проще всего при помощи дополнения к браузеру Mozilla FireFox — Firebug. Как его установить и использовать, я подробно описал здесь.

7. Далее идут стили, прописанные непосредственно внутри тега элемента с помощью атрибута style.

8. И наконец, самым высоким приоритетом обладают стили, отмеченные специальным сопроводительным словом!important.

На этом все на сегодня. Надеюсь, что информация оказалась полезной для Вас.

---

Дата добавления: 2015-08-18