logo
Web / Методичка по WEB

5.7 Задание цвета и фона

Цвет текста определяется с помощью параметра color, а цвет фона элемента – с помощью параметра background-color. По умолчанию цвет фона элемента определен как прозрачный (transparent). Значения этих параметров задаются именем цвета или числовым представлением в системе RGB.

Числовое представление цвета допускает следующие варианты:

Пример. Способы задания цвета.

<html>

<head>

<style>

/* текст синий, фон серый */

body {color: blue; background-color:#e0e0e0}

/* заголовок 1-го уровня красный на белом фоне */

h1 {color: #ff0000; background-color:white}

/* заголовок 2-го уровня зеленый на сером фоне */

h2 {color: rgb(0, 255, 0)}

/* заголовок 3-го уровня зеленый на сером фоне */

h3 {color: rgb(0, 255, 0)}

/* заголовок 4-го уровня оранжевый на черном фоне */

h4 {color: rgb(100%, 50%, 0%); background-color: black}

</style>

<body>

<h1> Заголовок 1 </h1>

<h2> Заголовок 2 </h2>

<h3> Заголовок 3 </h3>

<h4> Заголовок 4 </h4>

<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>

</body>

</html>

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

  1. background-image ‑ принимает в качестве значения url (URL-адрес изображения) или none (отсутствие изображения).

Пример. Задание фонового изображения

<style>

body {background-image: url(/img/picture.jpg)}

</style>

  1. background-repeat ‑ определяет способ заполнения области элемента изображением. Возможны следующие значения:

  • background-attachment ‑ определяет, будет ли фоновое изображение прокручиваться при пролистывании документа. Значением по умолчанию является scroll (будет прокручиваться). Для фиксации изображения используется значение fixed;

  • background-position – определяет начальное положение фонового изображения с помощью двух значений (горизонтальной и вертикальной координат), разделенных запятой. Значения задаются в виде процентов, в абсолютных значениях длины или в виде ключевых слов: top, center, bottom, left, right. Значения по умолчанию: left, top;

  • background ‑ позволяет установить значения рассмотренных выше свойств: background-color, background-image, background-repeat и background-attachment. Эти значения указываются через пробел. Значение transparent означает отсутствие фона.

    Пример. Способы задания фона

    <html>

    <head>

    <style>

    h1{background-image: url(23.jpg);}

    h2{background-image: url(22.jpg); background-repeat:no-repeat;}

    h3{background-image: url(22.jpg); background-repeat:no-repeat; background-position:100% 0%}

    body {background: silver url(26.jpg) repeat-x}

    </style>

    <body>

    <h1>Заголовок 1</h1>

    <h2>Заголовок 2 Заголовок 2</h2>

    <h3>Заголовок 3</h3>

    <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>

    </body>

    </html>

    Пример. Использования фона.

    <html>

    <head>

    <style type="text/css">

    BODY {

    background:

    white /* Цвет фона */

    url(help2.gif) /* Путь к файлу с рисунком фона */

    right top /* Положение в правом верхнем углу */

    no-repeat /* Не повторять рисунок */

    fixed /* Зафиксировать фон */

    }

    </style>

    </head>

    <body>

    <h1>Помощь</h1><p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>

    </body>

    </html>