- •1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?
- •2. Что такое стиль?
- •3. Как расшифровывается аббревиатура css?
- •Единое стилевое оформление множества документов
- •Централизованное хранение
- •Способы добавления стилей на страницу
- •Связанные стили
- •Глобальные стили
- •Внутренние стили
- •Импорт css
- •Вопросы для проверки
- •Вопросы для проверки
- •1. Паша решил для своего сайта сделать версию для печати. Какую строку ему следует использовать в коде?
- •2. В какой момент подключается стиль для принтера?
- •3. В какой строке кода содержится ошибка?
- •Правила применения стилей
- •Форма записи
- •Имеет приоритет значение, указанное в коде ниже
- •Значения
- •Комментарии
- •Вопросы для проверки
- •Значения стилевых свойств
- •Проценты
- •Размеры
- •Относительные единицы
- •Абсолютные единицы
- •По шестнадцатеричному значению
- •По названию
- •С помощью rgb
- •Ключевые слова
- •Вопросы для проверки
- •Селекторы тегов
- •Вопросы для проверки
- •Практикум
- •Одновременное использование разных классов
- •Вопросы для проверки
- •1. Какое имя класса написано правильно?
- •Практикум
- •Идентификаторы
- •Вопросы для проверки
- •1. В каких ситуациях имена идентификаторов и классов можно называть одинаково?
- •2. Какое имя идентификатора написано неправильно?
- •3. Какая ошибка содержится в следующем коде?
- •Контекстные селекторы
- •Вопросы для проверки
- •1. Какой цвет будет у текста списка в следующем коде?
- •2. В коде выше какого цвета будут маркеры перед текстом?
- •Соседние селекторы
- •Вопросы для проверки
- •1. Какие теги в данном коде являются соседними?
- •Дочерние селекторы
- •Вопросы для проверки
- •1. Какой цвет будет у жирного курсивного текста в коде
- •Селекторы атрибутов
- •Простой селектор атрибута
- •Атрибут со значением
- •Значение атрибута начинается с определённого текста
- •Значение атрибута оканчивается определённым текстом
- •Значение атрибута содержит указанный текст
- •Одно из нескольких значений атрибута
- •Дефис в значении атрибута
- •Вопросы для проверки
- •1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?
- •2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?
- •3. К какому элементу будет применяться следующий стиль?
- •Универсальный селектор
- •Вопросы для проверки
- •1. Какой стиль установит красный цвет текста в абзаце?
- •2. Что означает следующая запись в стилях?
- •3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?
- •Псевдоклассы
- •Псевдоклассы, определяющие состояние элементов
- •Псевдоклассы, имеющие отношение к дереву документа
- •Псевдоклассы, задающие язык текста
- •Вопросы для проверки
- •1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.
- •2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?
- •3. К каким элементам добавляет стиль следующая конструкция — a:link:visited:hover ?
- •Псевдоэлементы
- •Вопросы для проверки
- •1. Какой псевдоэлемент позволяет добавить текст в начало предложения?
- •2. Что делает следующий стиль?
- •3. Какой селектор написан с ошибкой?
- •Вопросы для проверки
- •1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?
- •Наследование
- •Практикум
- •Каскадирование
- •Специфичность
- •1. Какая специфичность будет у селектора table.Forum tr:hover p?
- •2. Какая специфичность будет у селектора #catalog .Col3 .Height div?
- •Проверить uri
- •Проверить загруженный файл
- •Проверить набранный текст
- •Выбор версии css
- •Идентификаторы и классы
- •Идентификаторы
- •Применяйте группирование
- •Используйте универсальные свойства
- •Форматирование кода
- •Минимизация кода
- •Библиотека minify
Наследование
комментариев: 12
23.09.2010
Влад Мержевич
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберём наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <table> внутри которого добавляются теги <tr>, а затем идёт тег <td>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере 18.1.
Пример 18.1. Наследование параметров цвета
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
TABLE {
color: red; /* Цвет текста */
background: #333; /* Цвет фона таблицы */
border: 2px solid red; /* Красная рамка вокруг таблицы */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="0">
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td><td>Ячейка 4</td>
</tr>
</table>
</body>
</html>
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <td>наследует свойства тега <table>. При этом следует понимать, что не все стилевые свойства наследуются. Так, border задаёт рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение свойства background. Тогда почему цвет фона у ячеек в данном примере тёмный, раз он не наследуется? Дело в том, что у свойства background в качестве значения по умолчанию выступаетtransparent, т. е. прозрачность. Таким образом цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.
Чтобы определить, наследуется значение стилевого свойства или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в подобном случае бесполезно, может и подвести.
Наследование позволяет задавать значения некоторых свойств единожды, определяя их для родителей верхнего уровня. Допустим, требуется установить цвет и шрифт для основного текста. Достаточно воспользоваться селектором BODY, добавить для него желаемые свойства, и цвет текста внутри абзацев и других текстовых элементов поменяется автоматически (пример 18.2).
Пример 18.2. Параметры текста для всей веб-страницы
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
color: navy; /* Синий цвет текста */
}
</style>
</head>
<body>
<p>Цвет текста этого абзаца синий.</p>
</body>
</html>
В данном примере рубленый шрифт и цвет текста абзацев устанавливается с помощью селектора BODY. Благодаря наследованию уже нет нужды задавать цвет для каждого элемента документа в отдельности. Однако бывают варианты, когда требуется всё-таки изменить цвет для отдельного контейнера. В этом случае придётся переопределять нужные параметры явно, как показано в примере 18.3.
Пример 18.3. Изменение свойств наследуемого элемента
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Наследование</title>
<style>
BODY {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта */
color: navy; /* Синий цвет текста */
}
P.red {
color: maroon; /* Темно-красный цвет текста */
}
</style>
</head>
<body>
<p>Цвет текста этого абзаца синий.</p>
<p class="red">А у этого абзаца цвет текста уже другой.</p>
</body>
</html>
В данном примере цвет первого абзаца наследуется от селектора BODY, а для второго установлен явно через класс с именем red.