Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

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

  1. Авторские стили – стили, расположенные в элементах HTML;
  2. Пользовательские стили – стили, расположенные в отдельном файле.
  3. Стили установленные по умолчанию для браузера. Стили используемые браузером по умолчанию основываются на предполагаемом отображении элементов HTML, которое основано на рекомендациях, описанных в спецификации HTML 4.0.

Указанные три источника взаимодействуют друг с другом, перекрывая друг друга, то есть каждый из указанных выше источников сверху вниз создаёт иерархию, в которой первый источник (авторский стиль) имеет приоритет над другими – пользовательским стилями и стилями, установленными по умолчанию. Второй источник (пользовательский стиль) имеет приоритет над третьим источником, но перекрывается авторским стилем. Третий источник перекрывается первыми двумя историками.

Принципы каскадирования применяются и для импортируемых стилей, поэтому правила написанные в текущей таблице стилей, перекрывают правила, расположенные в импортируемых стилях. Аналогичное правило установлено и для импортируемых стилей, расположенных в других импортируемых стилях.

Порядок каскадирования

До того как браузер применит CSS свойство к определенному элементу, он должен соблюсти следующие правила:

  1. Сперва CSS находит все объявления, которые соответствуют данному элементу;
  2. После этого первоначальная сортировка объявлений происходит по значимости селектора и по его источнику: для обычных объявлений, авторские стили перекрывают пользовательские стили, последние в свою очередь перекрывают стили установленные о умолчанию. Для правила @!important пользовательские стили перекрывают авторские, а последние перекрывают стиль установленный браузером по умолчанию.
  3. После этого происходит уточнение селектора: более специфичные селекторы перекрывают действие общих селекторов. Псевдо-элементы и псевдо классы рассматриваются как обычные классы или элементы соответственно.

Правила специфичности селекторов:

При определении специфичности шаблона селектора во внимание принимаются атрибуты id, class и элемент. Именно в этом порядке складывается число значение, которого сравнивается со специфичностью другого шаблона. По общему правилу каждый атрибут и имя элемента берутся за 1, то есть шаблон селектора "p.class" равен 11, а шаблон селектора "div#test.test" равен 111.

Поэтому в следующем примере:

  1.<!DOCTYPE html>
  2.<html>
  3.<head>
  4.<style type="text/css">
  5.
  6.div#test.test{
  7.color:blue;
  8.}
  9.div.test{
10.color:red;
11.}
12.</style>
13.</head>
14.<body >
15.<DIV id="test" class="test">
16.Данный элемент применяется для создания свойств
17.в отношении элемента, содержимое которого выделено,
18.например с помощью курсор мыши
19.</DIV>
20.</body>
21.</html>
22.
Первое правило имеет большую специфичность(111>11) и, следовательно, первое правило установит цвет текста, а не второе.

Если Вы укажите шаблон селектора, состоящий из одних классов ".class .class", то специфичность будет определена путём сложения двух единиц, то есть специфичность будут равна 2. Поэтому в примере нижеуказанном специфичность первого правила равна 11 (div(1) + .test(1)), а второго 20(.test(1)+ .test(1)+0(отсутствующие значения определяющие специфичность принимаются за 0 и учитываются, если они следуют за другими значениями специфичности)). Исходя из этого будет применено второе правило.

  1.<!DOCTYPE html>
  2.<html>
  3.<head>
  4.<TITLE>Специфичность в CSS</TiTLE>
  5.<style type="text/css">
  6.BODY{
  7.background:#efe;
  8.}
  9.div.test{
10.color:blue;
11.}
12..test.test1{
13.color:red;
14.}
15.</style>
16.</head>
17.<body >
18.<DIV id="test" class="test test1">
19.Жизнь состоит из двух сил, называемых в общем любовью;
20.одна сила — это любовь рождающая (родовая сила),
21.другая — любовь образующая (сила личности).
22.На одной стороне — роды,
23.на другой — смерть: роды и смерть и смерть и бессмертие. М. М. Пришвин.</DIV>
24.</body>
25.<LINK href="mystyle.css" title="Compact" rel="stylesheet">
26.</html>
27.
28.

Если первые три ступени не дали результата, то есть существуют два или более селектора, которые имеют одинаковые специфичность, то будет применен тот селектор, который расположен ниже в коде CSS.

Формула специфичности селекторов

шаблон идентификатор (id) класс элемент
значение шаблона указан - 1, не указан - 0 указан - 1, не указан - 0 указан - 1, не указан - 0


Александр Ермаков. Хостинг - www.pwstudio.org