Свежее на сайте:

Вопросы (FAQ)

СТАТЬИ Administrator 17098 Hits
Популярные вопросы от новичков

О графическом редакторе Adobe Photoshop CS6

СТАТЬИ Administrator 27377 Hits 1 Comments
ВСЯ ПРАВДА О ADOBE PHOTOSHOP CS6 Краткое описаниеПрежде, чем мы начнем описание, хотелось бы отметить, что…
показать все

Каскадирование CSS

E-mail

Close


Изучаем CSS - Уроки верстки сайтов

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

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

  • 1. Стиль браузера.
  • 2. Стиль пользователя.
  • 3. Стиль автора.
  • 4. Стиль автора с добавлением !important.
  • 5. Стиль пользователя с добавлением !important.

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

!important

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

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

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

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

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

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

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

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

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

Верстка веб-сайтов с помощью css

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

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

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

Верстка веб-сайтов с помощью css

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

Верстка веб-сайтов с помощью css

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

источник:  designjunkie.ru    

Комментарии:

У Вас недостаточно прав для добавления комментариев.
Возможно, Вам необходимо зарегистрироваться на сайте или пройти авторизацию.

КОММЕНТАРИИ

You are here СТАТЬИ - Каскадирование CSS
линолеум таркетт цены адрес Москва и область . купить дешевый хостинг . экспресс-аудит