НОУ ИНТУИТ | Введение в стандарты Web. Лекция 28: Наследование и каскадирование

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 188 студентам

| Поделиться |

Поддержать программу

Аннотация: В лекции рассматриваются две фундаментальные концепции CSS - Наследование и каскадирование.

Ключевые слова: наследование, css, HTML, важность, Специфичность, порядок, исходный код, здравый смысл, спецификация CSS-P, семейство шрифта, style, селекторы атрибутов, универсальный селектор

Введение

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

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

Обе концепции будут внимательно рассмотрены в этой лекции. Наследование является, наверно, более простой концепцией для понимания, поэтому мы начнем с нее, а затем перейдем к сложностям каскадирования.

Лекция имеет следующее содержание:

Наследование
- Почему наследование полезно
- Как работает наследование
- Пример наследования
- Принудительное наследование
Каскадирование
- Важность
- Специфичность
- Порядок исходного кода
Заключение
Контрольные вопросы

Наследование

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

Не все свойства CSS наследуются, так как для некоторых из них это не имеет смысла. Например, поля не наследуются, так как маловероятно, что элементу потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в спецификации CSS 2.1 (http://www.w3.org/TR/CSS21/propidx.html).

Почему наследование полезно

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

Используя наследование можно, например, определить свойства шрифта для элементов html или body, и они будут унаследованы всеми другими элементами. Можно определить цвета фона и переднего плана для определенного контейнерного элемента, и цвет переднего плана будет автоматически унаследован элементами потомками в этом контейнере. Фоновый цвет не наследуется, но начальное значение для background-color будет transparent, что означает, что фон предка будет просвечивать. Эффект будет аналогичен тому, который был бы получен при наследовании фонового цвета, но посмотрите, что произойдет, если бы наследовались фоновые изображения! Каждый потомок имел бы такое же фоновое изображение, как и его предок, и результат выглядел бы как некоторая головоломка, собранная человеком с больной головой, так как фон "начинался" бы для каждого элемента.

Как работает наследование

Каждый элемент в документе HTML будет наследовать все наследуемые свойства своего предка, за исключением корневого элемента ( html ), который не имеет предка.

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

Пример наследования

Скопируйте следующий документ HTML в новый файл в текстовом редакторе и сохраните его как inherit.html.
```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Inheritance</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>A paragraph of text.</p>
  </body>
</html>
```
Если открыть этот документ в Web-браузере, то вы увидите достаточно скучный документ, выведенный согласно используемому по умолчанию в браузере оформлению.
Создайте новый пустой файл в текстовом редакторе, скопируйте в него показанное ниже правило CSS, и сохраните файл как style.css в том же месте, что и файл HTML.
```
html {
  font: 75% Verdana,sans-serif;
}
```
Соедините таблицу стилей с документом HTML, вставляя следующую строку перед тегом </head>.
```
<link rel="stylesheet" type="text/css" href="style.css">
```
Сохраните модифицированный файл HTML и перезагрузите документ в браузере. Шрифт изменится с используемого по умолчанию в браузере (часто Times или Times New Roman) на Verdana. Если шрифт Verdana не установлен в компьютере, то текст будет выводиться используемым по умолчанию шрифтом без засечек, определенным в настройках браузера.
Размер текста станет также меньше, только три четверти от того, что было в нестилизованной версии.

Определенное нами правило CSS применимо только к элементу html. Мы не определили никаких правил для заголовков или параграфов, тем не менее весь текст теперь выводится шрифтом Verdana размером 75% от размера по умолчанию. Почему? В связи с наследованием.

Свойство font является сокращенным свойством, которое задает целый ряд связанных с текстом свойств. Мы определили только два из них — размер шрифта и семейство шрифта — но это правило эквивалентно следующему:
```
html {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 75%;
  line-height: normal;
  font-family: Verdana,sans-serif;
}
```
Все эти свойства наследуются, поэтому элемент body будет наследовать их из элемента html, а затем передавать дальше своим потомкам — заголовкам и параграфам.

Но подождите секунду! Происходит что-то подозрительное с наследованием размера шрифта, не так ли? Размер шрифта элемента html задается как 75%, но 75% от чего? И не будет ли размер шрифта тела ( body ) составлять 75% размера шрифта его предка, а размеры шрифта заголовка и параграфа не будут ли составлять 75% от размера шрифта элемента body?

Наследуемое значение не является определенным значением — значением, написанным в таблице стилей — а является так называемым вычисляемым значением. Вычисляемое значение будет, в случае размера шрифта, абсолютным значением, измеренным в пикселях. Для элемента html, который не имеет элемента предка, из которого он наследует, значение процента для размера шрифта связано с используемым по умолчанию размером шрифта, заданным в браузере. Большинство современных браузеров задают по умолчанию размер шрифта как 16px. 75% от 16 равно 12, поэтому вычисленное значение для размера шрифта элемента html будет, вероятно, 12px. И именно это значение наследуется в теле и передается дальше в заголовок и параграф.

(Размер шрифта заголовка будет больше, так как браузер применяет некоторое свое собственное встроенное оформление. Смотрите обсуждение каскадирования ниже.)
Добавьте еще два объявления в правило в своей таблице стилей CSS:
```
html {
  font: 75% Verdana,sans-serif;
  background-color: blue;
  color: white;
}
```
Сохраните файл CSS и перезагрузите документ в браузере.
Теперь фон стал ярко голубым, а весь текст белым. Правило применяется к элементу html — всему документу — фон которого будет голубым. Белый цвет переднего плана наследуется элементом body и передается всем наследникам body — в данном случае заголовку и параграфу. Они не наследуют фон, но он будет по умолчанию прозрачным, поэтому окончательный визуальный результат будет белый текст на синем фоне.
Добавьте еще одно новое правило в таблицу стилей, сохраните и перезагрузите документ:
```
h1 {
  font-size: 300%;
}
```
Это правило задает размер шрифта заголовка. Указанный процент применяется к наследованному размеру шрифта — 75% от размера по умолчанию в браузере, который по нашему предположению будет 12px — поэтому размер заголовка будет 300% от 12px, или 36px.

Принудительное наследование

Можно определить принудительное наследование — даже для свойств, которые не наследуются по умолчанию — используя ключевое слово inherit. Однако это должно использоваться с осторожностью, так как Microsoft Internet Explorer (включая версию 7) не поддерживает это ключевое слово.

Следующее правило заставит все параграфы наследовать все свойства фона от своих предков:

p {
  background: inherit;
}

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

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

<ul id="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/news/">News</a></li>
  <li><a href="/products/">Products</a></li>
  <li><a href="/services/">Services</a></li>
  <li><a href="/about/">About Us</a></li>
</ul>

Чтобы вывести этот список ссылок как горизонтальное меню, можно использовать следующий код CSS:

#nav {
  background: blue;
  color: white;
  margin: 0;
  padding: 0;
}
#nav li {
  display: inline;
  margin: 0;
  padding: 0 0.5em;
  border-right: 1px solid;
}
#nav li a {
  color: inherit;
  text-decoration: none;
}

Здесь в правиле для #nav цвет фона всего списка задается как синий. Оно также задает цвет переднего плана как белый, и это наследуется каждым элементом списка и каждой ссылкой. Это правило для элементов списка задает правую границу, но не определяет цвет границы, что означает, что будет использоваться наследованный цвет переднего плана (белый). Для ссылок используется color:inherit, чтобы принудительно реализовать наследование и переопределить используемый по умолчанию в браузере цвет ссылок.

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

Дальше >>

Введение в стандарты Web

Введение в стандарты Web

Наследование и каскадирование

Введение

Наследование

Почему наследование полезно

Как работает наследование

Пример наследования

Принудительное наследование

Вопросы и ответы

Студенты

Авторизоваться

Введение в стандарты Web

Введение в стандарты Web

Наследование и каскадирование

Введение

Наследование

Почему наследование полезно

Как работает наследование

Пример наследования

Принудительное наследование

Вопросы и ответы

Студенты