Вторник, 19.09.2017, 14:39
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 2
Гостей: 2
Пользователей: 0

Урок 3: Цвет и фон


В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах. Мы рассмотрим также продвинутые методы позиционирования и управления фоновым изображением. Будут разъяснены следующие CSS-свойства:

  •   color
  •  background-color
  •  background-image
  •  background-repeat
  •  background-attachment
  •  background-position
  •  background

Цвет переднего плана : свойство 'color'

Свойство color описывает цвет переднего плана элемента.

Например, представьте, что мы хотим сделать все заголовки документа синими. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается синим.

h1{
color:#0000FF;
}


цвет переднего фона




Цвета можно указывать как шестнадцатеричные значения, как в примере (
#0000FF), либо вы можете использовать названия цветов ("Blue") или rgb-значеня ( 0,0,255).

 Свойство 'background-color'


Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.

Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и <h1>.

body{
background-color:
#FFE4B5;
}


h1{
color:#8B4513;
background-color:#FC9804;
}


цвет фона


Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.

 

Фоновые изображения [background-image]


CSS-свойство background-image используется для вставки фонового изображения.

Ниже мы используем в качестве фонового изображение бабочки. Вы можете загрузить это изображение и использовать его на вашем компьютере (щёлкните правой клавишей мыши на изображении и выберите "сохранить изображение как/save image as"), либо вы можете использовать другое изображение.

фоновое изображение


Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.

body{
background-color:#FFE4B5;
background-image:url('/butterfly.gif');
}

h1{
color:#8B4513;
background-color:#FC9804;
}



Вот так это будет выглядеть в браузере:


фоновый рисунок

 

 Обратите внимание, что мы специфицируем место, где находится файл как url("butterfly.gif"). Это означает, что он находится в той же папке, что и таблица стилей. Вы, разумеется, можете ссылаться и на файлы изображений в других папках, используя, например, url("../images/butterfly.gif"), или даже на файлы в Internet, указывая полный адрес файла : url("http://www.html.net/butterfly.gif").

 

Повторение/мультипликация фонового изображения [background-repeat]

 
Вы заметили в предыдущем примере, что изображение бабочки повторяется по умолчанию по горизонтали и вертикали, заполняя весь экран? Свойство background-repeat управляет этим.

А вот так это можно регулировать:

Background-repeat: repeat-x      Рисунок повторяется по горизонтали

background-repeat: repeat-y      Рисунок повторяется по вертикали

background-repeat: repeat        Рисунок повторяется по горизонтали и вертикали

background-repeat: no-repeat     Рисунок не повторяется

Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:

body{
background-color:#FFE4B5;
background-image:url('/butterfly.gif');
background-repeat:no-repeat;
}

h1{
color:#8B4513;
background-color:#FC9804;
}




При нём картинка будет располагаться в верхнем левом углу:


рисунок не повторяется


 

 Расположение фонового рисунка [background-position]

По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное:


расположение фонового рисунка



Вот пример в котором изображение располагается в нижнем левом углу:


body{
background-color:#FFE4B5;
background-image:url('/butterfly.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom;
}

h1{
color:#8B4513;
background-color:#FC9804;
}



позиционирование



Сокращённая запись [background]

Свойство background входит в состав всех свойств, перечисленных в этом уроке.

С помощью background вы можете сжимать несколько свойств и записывать ваши стили в сокращённом виде, что облегчает чтение таблиц.

Например, посмотрите на эти строки:

background-color:#FFE4B5;
background-image:url('/butterfly.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: left bottom;



Используя background, того же результата можно достичь одной строкой кода:

background:#FFE4B5url("butterfly.gif") no-repeat fixed left bottom;



Порядок свойств этого элемента таков:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Если свойство отсутствует, оно автоматически получает значение по умолчанию. Например, если background-attachment и background-position нет в данном примере:

background:#FFE4B5url("butterfly.gif") no-repeat;


то этим двум неспецифицированным свойствам будут присвоены значения по умолчанию - scroll и top left.


Поиск
Календарь
«  Сентябрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет