|
|
Каскадные таблицы стилей. Свойства цвета и фона.
| color |
Устанавливает цвет текста элемента. Цвет может быть задан:
- стандартным названием
(например, синий — blue),
- соотношением используемых цветов в режиме RGB.
Здесь также возможно несколько вариантов:
- цвет в режиме RGB, записанный в десятичной системе.
Например тот же синий цвет в десятичной системе запишется так: 0, 0, 255
- цвет в режиме RGB, записанный в 16-ричной системе счисления.
Например: #0000ff (синий цвет)
- цвет в режиме RGB, записанный в процентном соотношении цветов.
Например: 160%, 240%, 120% (синий цвет)
p {color: blue;},
p {color: rgb(0,0,255);},
p {color: #0000ff;},
p {color: rgb(160%,240%,120%);}
|
| background-color |
Определяет цвет фона. При этом, если вы примените это свойство к различным селекторам тегов, то получите и
различные результаты: при применении этого свойства к body — в указанный цвет окрасится вся Web-страничка. При применении этого свойства к
тексту — окрасится цвет фона текста. При этом, Explorer отведет под фон текста всю доступную ширину страницы, а Netscape Navigator — лишь ширину,
занимаемую этим текстом.
Пример:
В приведенном ниже примере фон текста будет темно-синим, цвет текста — белым:
<p style="background-color: #000066; color: white">
Вот так:Пример надписи белым цветом на синем фоне.
|
Правила задания цвета фона точно такие же, как и в случае указания цвета текста.
body {background-color: blue;};
p {background-color: blue;} |
| background-image |
С помощью этого свойства можно указать URL картинки, которую вы хотите использовать в качестве фона. Как всегда, лучше пользоваться относительной адресацией.
body {background-image: URL('./img/fon.gif')} |
| background-attachment |
Определяет, будет или нет фоновая картинка прокручиваться при прокрутке страницы. Возможны следующие значения:
- fixed — фон прокручиваться не будет; в Netscape не работает;
- scroll — фон будет прокручиваться вместе с прокруткой страницы.
body {background-attachment: fixed;} |
| background-repeat |
Определяет, повторяется ли фоновая картинки для заполнения страницы или элемента. Если используются значения repeat-x, repeat-y, то картинка повторяется лишь вдоль одного направления.
По умолчанию картинка повторяется по всем направлениям. Возможны следующие значения:
- repeat — фоновая картинка повторяется по всем направлениям;
- repeat-x — фоновая картинка повторяется по горизонтали;
- repeat-y — фоновая картинка повторяется по вертикали;
- no-repeat — фоновая картинка не повторяется.
body {background-repeat: repeat-y;}
p {background-repeat: no-repeat;}
|
| background-position |
Определяет начальное положение фоновой картинки с помощью двух значений — отступа по горизонтали (слева) и отступа по вертикали (сверху).
Порядок задания значений: сначала по горизонтали, потом по вертикали. Используется совместно со свойством background-repeat
равным repeat-x, repeat-y или no-repeat. Возможные значения:
|
| background |
Обобщает вышеперечисленные свойства, позволяя одновременно устанавливать несколько свойств фона документа. Различные значения отделяются друг от друга пробелами. Возможные значения:
- background-color;
- background-image;
- background-attachment;
- background-repeat;
- backgroun-position.
body {background: white url('./img/FonPr.gif') fixed no-repeat 50% 0% ;} |
|
