Кольори в 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-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-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;
}
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 ;
background: #ffee8c url(smile.png) no-repeat fixed top right ;
}
Завдання для самостійного виконання:
Створити файли в папці
CSS ornament.css, зображення орнаменту зберегти у папці img та файл ornament.html такого змісту:
"Українська вишивка: символіка орнаментів
З давніх-давен люди зображували на одязі різноманітні знаки та символи, що виконували захисну та декоративну функцію. Абсолютно кожен елемент вишивки мав певне значення, згідно з яким його використовували. Наприклад, голубок та півнів зображували лише на весільних рушниках, бо вони символізували молодят.
Усі існуючі орнаменти умовно поділялись на чотири групи: рослинні, геометричні, рослинно-геометризовані та зооморфні. До найбільш використовуваних належать рослинні та геометричні, зооморфні ж використовувались дуже рідко."
Дуже корисно!
ВідповістиВидалитиДуже дуже корисно!
ВідповістиВидалитиДякую!
ВідповістиВидалитиКласні коди!
ВідповістиВидалитидякую
ВідповістиВидалитиДякую!
ВідповістиВидалити