Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

Как использовать цвета в CSS.

Представлю основные свойства CSS, которые определяют цвета текста, цвет фона и расположения фоновых рисунков.

- COLOR
- BACKGROUND-COLOR
- BACKGROUND-IMAGE
- BACKGROUND-REPEAT
- BACKGROUND-ATTACHMENT
- BACKGROUND-POSITION
- BACKGROUND

Теперь конкретней:

color

Определяет цвет какого либо элемента. Например:

h1
{color: black; }
h2
{color: green; }
p
{color: red; }

Получается, что в HTML-документе, заголовки <h1> будут чёрного цвета, заголовки <h2> зелёного, а текст в параграфе <p> будет красным. Цвет текста в CSS можно задавать как названием, так и в шестнадцатиричном значении.

 


background-color

Определяет цвет фона определённого элемента. Это может быть параграф или заголовок, ячейка таблицы или весь документ полностью, короче, что угодно. Пример:

body
{background-color: blue; }
h1
{color: white; background-color: #000000; }

Цвет фона документа будет синим, цвет текста в <h1> будет белым на чёрном фоне.

 


backgroud-image

Задаёт изображение для заливки фона. Значением является путь (URL) до картинки.

body
{background-color: blue;
bаckgroud-imagе: uгl('fon.gif'); }
h1
{color: white; background-color: #000000; }

Изображением для фона будет служить файл fon.gif. Значение url('fon.gif') пишется без пробелов!!! Если файл картинки находится в папке picture значение будет таким url('picture/fon.gif')

 


background-repeat

Задаёт повторение фоновому рисунку. Имеет четыре значения:
background-repeat: repeat ; по всему экрану (по умолчанию)
background-repeat: repeat-x ; повторение по горизонтали
background-repeat: repeat-y ; повторение по вертикали
background-repeat: no-repeat ; не повторять

Пример кода:

body
 {background-image: uгl('fon.gif') ;
background-repeat: repeat-x; }

Изображение будет повторятся по горизонтали во всю ширину окна.

 


background-attachment

Определяет свойство фонового рисунка при прокрутке. Имеет два значения:
scroll - фон пркручивается вместе с текстом (как на этом сайте)
fixed - фон строго зафиксирован, то есть прокручивается только текст, фон стоит на месте. Пример :

body
 {background-image : uгl('fon.png') ;
background-repeat: no-repeat;
background-attachment: fixed ; }

Фон остаётся неподвижным.

 


background-position

Определяет позицию фонового изображения. Значения могут задаваться в пикселях, процентах, и при помощи слов. Сначала задаётся координата по оси Х, потом через пробел по оси Y. Начало отсчёта левый верхний угол.
Как задавать с помощью слов. Задаётся сначала по оси Y:
top, center, bottom далее по оси X: left, center, right (top left, top center, top right; center left, center center, center right; bottom left, bottom center, bottom right.). Пример словами:

body
{background-image : uгl('fon.gif') ;
background-repeat: no-repeat;
background-position: top center; }

Пример в пикселях:

body
{background-image : uгl('picture/fon.gif') ;
background-repeat: no-repeat;
background-position: 700px 50px ; }

 


background

Используется для сокращённой записи значений всех вышеперечисленных свойств.
Порядок перечисления:
1 - BACKGROUND-COLOR
2 - BACKGROUND-IMAGE
3- BACKGROUND-REPEAT
4- BACKGROUND-ATTACHMENT
5- BACKGROUND-POSITION

Например вот такое правило:

body
{background-color:#000000 ;
background-image : uгl('fon.gif') ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center; }

Можно заменить сокращённым, вот таким:

body
{background: #000000 uгl('fon.gif') no-repeat fixed top right ; }

Значения свойств пишутся через пробел. Если какое то значнение пропустить, оно будет считаться по умолчанию. Пробуйте, экспериментируйте.

Перейти к следующему уроку
Выравнивание текста в CSS и другие свойства.

 

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!