Уроки 46 - 47
Содержание и оформление. Стили
(§26. Оформление документа)
Содержание урока
Стили для элементов
Стили для элементов
Задав стиль для контейнера <body>, мы определили свойства по умолчанию для вложенных в него элементов. Так в предыдущем примере для всех абзацев (<р>) будет установлен белый цвет символов. Это говорит о том, что свойство color передаётся вложенным элементам, т. е. наследуется.
Наследование означает, что некоторые свойства контейнера- «родителя» передаются всем вложенным элементам.
Это удобно, потому что во многих случаях в стилевом файле достаточно определить только свойства «родителя».
Однако не все свойства наследуются 1. Например, фон (background) не наследуется, по умолчанию он прозрачный для всех элементов, поэтому фактически мы видим фон «родителя».
1 В справочниках по CSS можно уточнить, наследуется ли то или другое свойство.
Можно задать стиль оформления любого тэга. Например, чтобы сделать рамку (англ. border) у всех абзацев, нужно добавить в стилевой файл строки
Здесь для свойства border задано (через пробел) сразу три «подсвойства»: ...
• 1рх — толщина линии (1 пиксель);
• solid — тип линии (сплошная);
• blue — цвет линии (синий).
Для настройки цвета гиперссылок изменяется стиль для тэга <a>:
а { color: green; }
Стиль посещённых ссылок задаётся с помощью обозначения a:visited (англ. visited — посещённый):
a:visited { color: white; }
Здесь visited — это так называемый псевдокласс, который обозначает состояние объекта. Часто применяется также псевдокласс hover (состояние «мышь над объектом»).
В рассмотренных примерах оформление определялось сразу для всех одноимённых тэгов на странице. Часто бывает нужно выделить с помощью специального оформления не все абзацы, а только некоторые. В этом случае используют классы. Каждому тэгу можно присвоить свой класс с помощью атрибута class, например:
<р class="error">Ошибка. Что-то с памятью.</р>
Специальное оформление для абзацев класса error определяется в стилевом файле:
p.error { background: red; }
Внешний вид остальных абзацев при этом остаётся без изменений.
Может оказаться, что к какому-то тэгу применимы несколько правил оформления, указанных в таблице стилей. Например, к абзацу класса error относятся все стили, определённые для тэга <р>, а также все стили для класса p.error. Такая ситуация называется каскадом, поэтому таблицы стилей называют каскадными. В этом случае браузер определяет окончательный вид элемента по специальным (достаточно сложным) правилам. Их смысл состоит в том, что более конкретное указание отменяет более общее. Например, пусть в стилевом файле определён зелёный цвет текста для всех абзацев (общее правило) и красный цвет — для абзацев класса error (более конкретное правило):
р { color: green; }
p.error { color: red; }
Тогда для абзаца класса error будет установлен красный цвет, общее правило отменяется.
Можно вообще не указывать тэг, оставив только название класса:
.error { color: red; }
В этом случае оформление применяется к любым тэгам, для которых задан класс error. Например, для выделения специальным стилем слова или словосочетания (а не всего абзаца) можно использовать тэг <span> (от англ. span — интервал, промежуток):
<p><span class="error">Ошибка</span>. Что-то с памятью.</р>
В этом примере красным цветом будет выделено только слово «Ошибка» (для него использован класс error).
С помощью стилей можно определить оформление тэга, который вложен в другой тэг. Например, пусть мы хотим использовать дополнительное выделение в контейнере <еm> с помощью такого же вложенного контейнера <еm>:
<еm>Тэги <еm>логической</еm> разметки </еm>.
Если не изменять стили, то повторное применение тэга <еm> не меняет результат, и слово «логической» никак не будет выделяться на фоне соседей. Если же добавить в стилевой файл строки
то слово «логической» будет записано прямым (нормальным, не курсивным) шрифтом, в отличие от окружения, набранного курсивом (так обычно выделяется содержимое контейнера <еm>). Чтобы определить курсив, нужно задать значение italic вместо normal. Запись ет ет означает «тэг <еm> внутри другого тэга <еm>», а р еm — «тэг <еm> внутри тэга <p>».
Существует много разных типов селекторов, свойств и их возможных значений. Полную информацию вы можете найти в справочной литературе или в Интернете.
Следующая страница 
Вопросы и задания
Cкачать материалы урока
