Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Порядок применения стилей и приоритеты




Свойства переполнения

Свойство overflow управляет содержанием блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Допустимые значения: auto, hidden, scroll и visible (значение по умолчанию). Значение visible означает, что содержимое элемента будет отображаться даже за пределами установленной ширины и высоты. В случае hidden содержимое, которое не помещается в установленные размеры элемента, отображаться не будет. Значение auto говорит о том, что в случае, когда содержимое элемента выходит за его пределы, все что не попадает в указанный размер отображаться не будет, однако есть возможность их просмотра при помощи полос прокрутки, которые появятся там, где это необходимо. В случае scroll, полосы прокрутки будут всегда отображаться, вне зависимости от того, выходит ли содержимое за пределы установленного размера элемента.

Приоритеты CSS-инструкций определяются по нескольким критериям. Этими критериями являются последовательность подключения CSS-файла в HTML-документе, последовательность определения стилей внутри CSS, критерий веса селектора, наличие инструкции!important и другие. Подробно алгоритм вычисления приоритетов описан в спецификации W3C: http://www.w3.org/TR/CSS21/cascade.html.

На практике все эти сложности знать ни к чему, достаточно понимать основополагающие идеи установки приоритетов для CSS-стилей.

HTML-атрибуты, отвечающие за стиль отображения, например align, valign, bgcolor и пр., имеют самый низкий приоритет. Самый высокий приоритет имеют инлайновые записи стиля внутри атрибута style. Между ними – стили CSS, встроенные в документ с помощью элемента style и внешних CSS-файлов. В соответствии с правилами оформления HTML-документов (см. 6.2) крайние случаи приоритетов встречаются редко, соответственно, основное поле действия веб-разработчика – CSS файлы, или точнее, в общем случае один CSS-файл.

Касательно приоритетов в пределах одного CSS-файла нужно знать следующее:

  1. Существует наследование и переопределение свойств.
  2. Имеет значение вес селектора.
  3. В случае равновесных селекторов побеждает то определение стиля, которое записано последним.
  4. Инструкция!important делает свойство высокоприоритетным.

Наследование и переопределение свойств несложно понять, рассмотрев следующий пример:

Наследование и переопределение свойств

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-свойств.




Поделиться с друзьями:


Дата добавления: 2014-12-16; Просмотров: 363; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.014 сек.