Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31


Чувашия-это моя Россия

Конфликтующие правила стилей: каскад.

(продолжение)

Специфичность селектора в CSS.

После того как применяемый набор стилевых правил был выбран и определен для каждого элемента, все равно остается возможность для конфликтов. Поэтому конфликтующие правила стилей: каскад продолжается на уровне правил. Стили, применяемые в конкретном документе сайта, подменяют или заменяют, как Вам удобнее, которые берутся извне.

В следующем примере существует два правила, относящиеся к элементу strong;

                      strong {
                               color: red;
                               }; 
                      h2 strong {
                               color: blue;
                               }; 

Пользовательский агент присваивает разные веса разным типам селекторов в CSS. Чем более специфичен селектор, тем больший вес он получает при конфликтах. В предыдущем примере весь жирный шрифт в документе сайта будет отображаться красным цветом. Однако если жирный шрифт появляется в заголовке второго уровня, он будет отображаться синим цветом, поскольку элемент strong в данной ситуации будет более специфичным и получит больший весь, чем одинокий элемент strong. Ниже приводится список типов селекторов, отсортированный по весу, в порядке от наименьшего к наибольшему.

• Селекторы индивидуальных элементов или псевдоэлементов в CSS (например, р или :firrst-letter).

• Контекстные селекторы в CSS (например, h2 strong).

• Селекторы классов в CSS (например, р.special).

• Селекторы идентификаторов в CSS (например, p#nav).

Надеюсь, теперь непонятных ситуации почти не осталось.

Только помните, что любое правило, имеющее индикатор !important, подменяет конфликтующие с ним правила, независимо от специфичности или порядка.

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

                     h2	{color:	green;}
                     h2	{color:	blue; }
                     h2	{color:	red; }

Ситуация с «приоритетом последнего» уже упоминалась ранее применительно к нескольким элемента link или нескольким командам @import. Она также относится к одному блоку объявлений. В следующем примере первое объявление делает рамку со всех сторон элемента div серой при помощи краткого свойства border-color. Второе объявление конфликтует с первым, указывая, что верхняя граница должна быть черной. Поскольку объявление, указанное последним, имеет приоритет перед предыдущими, элемент div будет иметь черную верхнюю границу, а оставшиеся три стороны будут серыми.

 

                     div#side {
                            border-color: gray; 
                            border-color-top: black; 
                            }
      

Теперь рассмотрели все конфликтующие моменты каскадных таблиц стилей и нам понятны правила их делающие. Перейдем к блочным и внутристрочным элементам.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: