Наследование. Каскадирование. Приоритеты стилей CSS

Классы элементов. Идентификаторы элементов.

Виды селекторов

Селекторы правила CSS могут быть

· селекторами элементов;

p {font-family: Garamond, serif;}

· селекторами классов;

.note {color: red; background: yellow; font-weight: bold;}

· селекторами идентификаторов;

#paragraph1 {margin: 0;}

· селекторами атрибутов;

a[href="http://www.somesite.com"]{font-weight:bold;}

· селекторами потомков (контекстными селекторами);

div#paragraph1 p.note {color: red;}

· селекторами дочерних элементов;

p.note > b {color: green;}

· селекторами сестринских элементов;

h1 + p {font-size: 24pt;}

· селекторами псевдоклассов;

a:active {color:yellow;}

· селекторами псевдоэлементов.

p::first-letter {font-size: 32px;}

· Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * {color:red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например,.first {...} и *.first {...} имеют один и тот же смысл.

Класс или идентификатор может быть присвоен какому-нибудь элементу (тегу) HTML посредством атрибутов class или id этого элемента (тега):

<div id="first">... </div><p class="big">... </p>

Основное отличие между классами элементов и идентификаторами элементов в том, что в документе какой-нибудь класс может быть присвоен сразу нескольким элементам, а идентификатор - только одному. Также отличие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.

Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в JavaScript для нахождения уникального элемента в документе.

Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.

Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с «.»), или свойство идентификатора самого по себе (в таком случае селектор начинается с «#»), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.

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

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.

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

· Наиболее низким приоритетом обладает стиль браузера;

· Следующим по значимости является стиль, заданный пользователем браузера в его настройках;

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

o Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;

o Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;

o Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:

§ количество идентификаторов (#id) в селекторе — ((1,0,0,0) за каждый объявленный идентификатор в селекторе правила CSS);

§ количество атрибутов ([attr], [attr="value"]) в селекторе — ((0,1,0,0) за каждый объявленный атрибут в селекторе правила CSS);

§ количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе — ((0,0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS);

§ количество тегов в селекторе (H1, INPUT) — ((0,0,0,1) за каждый объявленный тег в селекторе правила CSS).

Принцип расчёта таков, что, например, (1,0,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0,0), (0,1,0,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10,0), а (0,0,1,0) будет иметь больший приоритет, чем (0,0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.

o Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;

o И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова!important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

1.16 CSS-вёрстка

До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

Преимущества:

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

· Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закэшировано.

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

· Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:

· Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.

· Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

Дата добавления: 2015-03-29