Свойства CSS. Цвет и фон (стр.1). |
|
Если цвет текстовых элементов задавать в HTML очень просто, то задать
простыми средствами цвет, например, границ таблицы уже невозможно -
приходится использовать вложенные таблицы. Однако с помощью CSS это можно делать легко и непринужденно. Кроме этого, средствами CSS
можно более гибко управлять фоновым изображением, его повторением по
горизонтали и вертикали. Так же можно помещать фоновое изображение в
любую точку экрана, т.е. позиционировать его.
Рассмотрим свойства работы с цветом и фоном по отдельности.
 Свойство COLOR
С этим свойством мы уже не раз встречались в процессе изучения
предыдущей главы. к вы уже знаете, оно задает цвет элемента, точнее,
цвет текста внутри этого элемента. Вкачестве значения свойства
указывается цвет в одной из доступных форм:
- по ключевому слову (red, yellow, silver и т.д.);
- шестнадцатеричным кодом цвета в полной форме (#00FFCC, #EEDDAA) или сокращенно (#0FC, #EDA);
- десятичным кодом цвета в модели RGB (color: rgb (25, 205, 172)).
Свойство color является наследуемым, т.е. если для какого-то
элемента оно не задано, то этот элемент унаследует его от предка. Если и
для предка оно не задано, то будет I осуществлен поиск вверх по дереву
элементов, пока не будет найден самый старший элемент, для которого это
свойство задано. Такой элемент обязательно найдется, например, им может
оказаться элемент BODY, для которого, даже в отсутствие явно
заданного цвета, будет применена таблица стилей браузера с
использованием значений по умолчанию. Скорее всего, цвет элемента в этом
случае будет черным, что обычно и соответствует значению по умолчанию.
Аналогичный механизм будет работать для всех остальных наследуемых
свойств.
Для сравнения приводим способ задания цвета текста при помощи CSS и только на HTML
|
Задание цвета в CSS и HTML
|
| HTML |
CSS
|
|
<H1><font color="blue">Синий заголовок</H1>
|
H1 { color:blue }
<H1>Синий заголовок</H1>
|
Свойство BACKGROUND-COLOR
Это свойство позволяет задавать цвет фона для страницы или любого
другого элемента. Таким образом, в отличие от простого HTML, где фон
может иметь только страница или ячейка таблицы (т.е. те элементы,
которые имеют атрибут bgcolor), при помощи CSS цвет фона можно задать для заголовка, абзаца, ссылки или любых других элементов HTML.
В качестве значения свойства указываются цвет или ключевое слово transparent (прозрачный). Свойство background-color не наследуется, но по умолчанию для него используется значение transparent - чтобы сквозь прозрачный фон элемента просвечивал фон родительского элемента. Например, если для элемента Р не задано свойство background-color,
то текст абзаца будет располагаться на фоне основного цвета,
установленного для всей страницы в целом. Напомню, что значение по
умолчанию, которое задано в таблице стилей браузера, - белый цвет.
Свойство background-color можно сделать наследуемым, если в качестве его значения указать inherit:
|
P { background-color: inherit }
|
Но, как говорилось раньше, фон элемента-потомка будет по умолчанию
прозрачным, и визуально он и так унаследует его от предка. Поэтому явное
присвоение значения inherit в данном случае смысла не имеет.
Для сравнения приводим способ задания фонового цвета для страницы при помощи CSS и только на HTML:
|
Задание цвета фона страницы в CSS и HTML
|
| HTML |
CSS
|
|
<BODY bgcolor="aqua">...текст страницы...</BODY>
|
BODY {background-colod: aqua }
|
|