![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Порядок применения стилей и приоритеты
Приоритеты CSS-инструкций определяются по нескольким критериям. Этими критериями являются последовательность подключения CSS-файлов в HTML-документе, последовательность определения стилей внутри CSS, критерий веса селектора, наличие инструкций! important и другие. Подробно алгоритм вычисления приоритетов описан в спецификации W3C: https://www.w3.org/TR/CSS21/cascade.html. На практике все эти сложности знать ни к чему, достаточно понимать основополагающие идеи установки приоритетов для CSS-стилей. HTML-атрибуты, отвечающие за стиль отображения, например align, valign, bgcolor и пр., имеют самый низкий приоритет. Самый высокий приоритет имеют инлайновые записи стиля внутри атрибута style. Между ними – стили CSS, встроенные в документ с помощью элемента style и внешних CSS-файлов. В соответствии с современныит требованиями для HTML-документов крайние случаи приоритетов встречаются редко, соответственно, основное поле действия веб-разработчика – CSS файлы, в общем случае – один CSS-файл. Касательно приоритетов в пределах одного CSS-файла нужно знать следующее:
Наследование и переопределение свойств несложно понять, рассмотрев следующий пример: Наследование и переопределение свойств div { color: #000; background: #0f0; } div.particular {color: #fff; } В примере, первое определение стиля для всех элементов div, говорит о том, что все они имеют черный цвет текста и зеленый цвет фона. Следующая запись определяет стиль для элементов div с классом «particular», к которым также применяется и первая запись. В данном случае, элементы div с классом «particular» будут иметь зеленый цвет фона, так как свойство background будет унаследовано от определения стиля для всех div элементов, а свойство color, т.е. цвет текста, будет переопределено на белый. Если эти два определения стиля поменять местами, т.е. сперва записать определение для элемента div с классом «particular», а затем общее определение для div, то общий результат не изменится потому, что в силу вступает вес селектора – «div.particular» более специализированный, чем просто «div», поэтому имеет больший вес. Последующее определение стиля равновесных селекторов имеет больший приоритет. Следующий пример продемонстрирует приоритетность последней записи стиля. Последняя запись приоритетнее предыдущей div {color: #000; } div {color: #fff; } В данном случае цвет текста div элементов документа будет белый, а не черный, потому, что определение белого цвета стоит ниже, чем определение черного. Что касается инструкции! important, то ее наличие делает CSS-свойство высокоприоритетным, независимо от позиции и веса селектора. Использование инструкции! important div {color: #000! important; } div {color: #fff; } В этом случае цвет текста для элементов div будет черным. Инструкция! important записывается через пробел, после значения CSS-свойства. Инструкцию! important следует использовать в случаях особой необходимости, при решении конфликтов приоритета CSS-свойств.
|