Фон та колір в css

Кольори в CSS вказуються так само, як і в html. Тобто можна вказувати шістнядцяткове значення, наприклад # ff3355, або ж назву кольору (red, green, blue та ін.)
Основними властивостями кольору і фону в CSS є:
  •          color
  •          background-color
  •         background-image
  •         background-repeat
  •         background-attachment
  •         background-position
  •          background
Властивості
опис
Можливі значення
color
колір текста
Будь яке значення, що відповідає стандарту
background-color
колір фона
Будь яке значення, що відповідає стандарту кольору.
background-image
малюнок в якості фона
вказується ім’я файла background-image: url(і’мя файла)
background-repeat
повторюваність для фону заданого зображенням
по горизонталі: repeat-x ;
по вертикалі: repeat-y
не повторюється: no-repeat
по замовчуванню повторення і по горизонталі і по вертикалі
background-attachment
нерухомість фона при прокрутці
fixed
background-position
положеня зображення відносно верхнього лівого кута елемента
задається в відсотках від разміру елемента (перше число – зміщення по горизонталі, друге по вертикалі)

Властивість COLOR

Задає основний колір (колір переднього плану) того чи іншого елемента. Наприклад, якщо потрібно зробити колір всіх заголовків першого рівня червоним, а колір тексту параграфів зеленим, то таблиця стилів буде виглядати так:
H1 {
color: red;
}
P {
color: green;
}

Властивість BACKGROUND-COLOR

Задає фоновий колір елемента. В CSS, фоновий колір можна задавати для чого завгодно: для таблиць, заголовків, параграфів, посилань тощо. Ну от наприклад, щоб змінити фоновий колір всієї сторінки, потрібно задати цю властивість елементу BODY - тому саме він відповідає за тіло документа, тобто за всю сторінку.
Приклад запису файлу style2.ccs
BODY {
background-color: # FFEE8C;
}
H1 {
color: red;
background-color: blue;
}
P {
color: green;
}

Властивість BACKGROUND-IMAGE

Дана властивість використовується для завдання фонового зображення. У прикладі нижче вказано фонове зображення для всієї сторінки, тобто для елемента BODY.
Приклад запису файлу style3.ccs
BODY {
background-color: # FFEE8C;
background-image: url(smile.png);
}
H1 {
color: red;
background-color: blue;
}
P {
color: green;
}
Як значення властивості, вказується шлях до зображення, але трохи не так як в html. На початку пишеться URL а потім відразу, Без пробілів !!! в круглих дужках положення картинки. Якщо вона знаходиться в тій же папці, то пишеться  просто назва картинки, як у прикладі вище. Якщо в підпапці img, то пишеться так url (img/smile.png)

Властивість BACKGROUND-REPEAT

Фонове зображення за замовчуванням повторюється починаючи з верхнього лівого кута, як по вертикалі, так і по горизонталі, поки не заповнить весь екран. За допомогою властивості background-repeat  можна контролювати ці повторення.
Ця властивість може приймати чотири значення:



Приклад запису файлу style4.ccs

BODY {
background-image : url(smile.png) ;
background-repeat: repeat-x;
}

Властивість BACKGROUND-ATTACHMENT

При наявності фонового малюнка, ця властивість встановлює, чи буде фонове зображення прокручуватися з вмістом сторінки, або буде заблоковано, тобто нерухоме. Може приймати два значення:
  • SCROLL - фон прокручується разом з вмістом;
  • FIXED - фон строго зафіксований.

Приклад запису файлу style8.ccs

BODY {
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
}

Властивість BACKGROUND-POSITION

Задає позицію фонового зображення. Значення можна задавати у відсотках, в одиницях довжини і за допомогою ключових слів. Відлік як зазвичай ведеться з лівого верхнього кута браузера, де і розташовується фонове зображення за замовчуванням. На малюнку наведено приклади позиціонування (точка це тип зображення, а те що під нею - приблизні координати)



На початку вказується координата по горизонталі (по осі Х), потім через пробіл координату по вертикалі (по осі Y). Координату можна задавати у відсотках від ширини вікна браузера, також в пікселях. Можна задавати і в сантиметрах, але не варто.
Також положення можна задавати спеціальними словами:
  • left - ліво,
  • right - право,
  • center -центр, 
  • top - верх,
  • bottom - низ.


Приклад запису файлу style10.ccs

BODY {
background-image: url(smile.png) ;
background-repeat: no-repeat;
background-position: top right;
}
!!! Змінити в файлі  style10.ccs background-position на 300px 500px  або на 75% 25%;

Скорочена форма запису - BACKGROUND

Властивість BACKGROUND служить для скороченого запису всіх вище розглянутих властивостей.
Порядок властивостей цього елемента такий:
background-color_background-image_background-repeat_background-attachment_background-position
Тобто просто записується п'ять значень властивостей через пробіл.
Те що записано так:
BODY {
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

Можна записати скорочено:
BODY {
background: #ffee8c url(smile.png) no-repeat fixed top right ;
}

Завдання для самостійного виконання:

Створити файли  в папці  CSS ornament.css,  зображення орнаменту зберегти у папці img та  файл ornament.html такого змісту:
"Українська вишивка: символіка орнаментів 
 З давніх-давен люди зображували на одязі різноманітні знаки та символи, що виконували захисну та декоративну функцію. Абсолютно кожен елемент вишивки мав певне значення, згідно з яким його використовували. Наприклад, голубок та півнів зображували лише на весільних рушниках, бо вони символізували молодят.

Усі існуючі орнаменти умовно поділялись на чотири групи: рослинні, геометричні, рослинно-геометризовані та зооморфні. До найбільш використовуваних належать рослинні та геометричні, зооморфні ж використовувались дуже рідко."









6 коментарів:

Підписатися на: Дописи (Atom)