Каскадирование - «CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Наш опрос



Наши новости

       
17-03-2016, 18:24
Каскадирование - «CSS»
Рейтинг:

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.


Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.



  1. Стиль браузера.

  2. Стиль автора.

  3. Стиль пользователя.

  4. Стиль автора с добавлением !important.

  5. Стиль пользователя с добавлением !important.


Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.


Как задавать пользовательский стиль рассказывалось в главе 1 (см. рис. 1.3 и 1.4).


!important


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


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



  • !important добавлен в авторский стиль — будет применяться стиль автора.

  • !important добавлен в пользовательский стиль — будет применяться стиль пользователя.

  • !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль пользователя.

  • !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.


Синтаксис применения !important следующий.



Свойство: значение !important


Вначале пишется желаемое стилевое свойство, затем через двоеточие его значение и в конце после пробела указывается ключевое слово !important.


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


Специфичность


Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определённом порядке, получим значение специфичности для данного селектора.


*              {} /* a=0 b=0 c=0 -> специфичность = 0   */
li {} /* a=0 b=0 c=1 -> специфичность = 1 */
li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */
ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */
ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */
li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */
#t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */

Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление !important перекрывает в том числе и встроенные стили.


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


В примере 19.1 показано, как влияет специфичность на стиль элементов списка.


Пример 19.1. Цвет списка


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
<style>
#menu ul li {
color: green;
}
.two {
color: red;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Первый</li>
<li class="two">Второй</li>
<li>Третий</li>
</ul>
</div>
</body>
</html>

В данном примере цвет текста списка задан зелёным, а второй пункт списка с помощью класса two выделен красным цветом. Вычисляем специфичность селектора #menu ul li — один идентификатор (100) и два тега (2) в сумме дают значение 102, а селектор .two будет иметь значение специфичности 10, что явно меньше. Поэтому текст окрашиваться красным цветом не будет. Чтобы исправить ситуацию, необходимо либо понизить специфичность первого селектора, либо повысить специфичность второго (пример 19.2).


Пример 19.2. Изменение специфичности


/* Понижаем специфичность первого селектора */
ul li {...} /* Убираем идентификатор */
.two {...}

/* Повышаем специфичность второго селектора */
#menu ul li {...}
#menu .two {...} /* Добавляем идентификатор */

#menu ul li {...}
.two { color: red !important; } /* Добавляем !important */

Добавление идентификатора используется не только для изменения специфичности селектора, но и для применения стиля только к указанному списку. Поэтому понижение специфичности за счёт убирания идентификатора применяется редко, в основном, повышается специфичность нужного селектора.



Вопросы для проверки


1. Какая специфичность будет у селектора table.forum tr:hover p?



  1. 14

  2. 22

  3. 23

  4. 32

  5. 41


2. Какая специфичность будет у селектора #catalog .col3 .height div?



  1. 301

  2. 203

  3. 121

  4. 40

  5. 31



Ответы


1. 23


2. 121


Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа

Теги: CSS, , , Каскадирование

Просмотров: 27 637
Комментариев: 3:   17-03-2016, 18:24
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме: