Властивості CSS для зміни графіки

зміни
Після зміни стилів текстових елементів можна перейти до вивчення налаштувань зовнішнього вигляду інтернет-ресурсу за допомогою CSS. Під час верстки сторінок сайту застосовують таківластивості CSS для зміни графіки, як встановлення фону, додавання рамки, кольору. Якщо використовуються зображення, то бажано їх тримати в корені сайту в папці images (шлях буде мати вигляд - "/images/file.jpg") або в папці з шаблоном в аналогічній папці (шлях - "../images/file.jpg" ).

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

background - універсальна властивість, в якій може бути описано до п'яти характеристик фону, це вибір зображення та кольору фону, визначення положення картинки та її поведінки в елементі, можливість повторення:

background: url("/images/1.jpg") no-repeat fixed 0 center #FFFFFF;

background-attachment - служить для встановлення поведінки зображення щодо елементів сторінки. При значенні scroll - прокручується, якщо встановлено fixed - залишається нерухомим:

background-color - задає колір тла, вказуючи значення виду #000000 або black або RGB (0,0,0). Якщо написати transparent – ​​фон буде прозорим.

background-image - вибір фонового зображення, вказуючи абсолютний чи відносний шлях до файлу, значення none - без фонового зображення.

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

background-position: центр 20px;

background-repeat - встановлює можливості повторення фонового зображення. Може бути по горизонталі – repeat-x, вертикалі – repeat-y, repeat – по всіх сторонах, або не повторювати – no-repeat.

background-size - можливість зміни розмірів зображення на нові, вказавши їх розміри в пікселях, відсотках або автоматично. Значення cover - зберігає пропорції зображення так, щоб воно вписувалося по висоті чи ширині блоку. Значення contain забезпечує позицію всього зображення в блоці зі збереженням пропорційності.

  • Для Mazilla Firefox старих версій властивість виглядає так --moz-background-size
  • Для Chrome та Safari --webkit-background-size
  • Для Opera до версії 10.53 --o-background-size

background-size: 100px auto; -Moz-background-size: contain;

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

border - універсальна властивість для завдання товщини кордону, її стилю та кольору. Можна задавати певної сторони, вказуючи її (top, left, bottom, right) через дефіс.

border-collapse - служить для завдання кордонів осередку таблиці. Є два значення:

  • separate - для кожного осередку своя рамка
  • collapse - між осередками лише одна лінія

border-color - встановлює колір кордону

border-radius - для встановлення кутів заокруглення рамки. Можна вказувати значення для кожної сторони через пропуск. До речі, якщо рамка відсутня, цю властивість можна використовувати для заокруглення кутів фонового зображення.

  • Для Mazilla Firefox до 4-ї версії властивість виглядає так- -moz-border-radius
  • Для Safari та Chrome властивість має вигляд --webkit-border-radius

border-radius: 10px 15px 10px 15px; -moz-border-radius: 20px;

border-style - для завдання стилю кордону, яких є 8 видів: dotted (у вигляді крапок), dashed (пунктири), solid (суцільна), double (подвійна), ridge (об'ємна), groove (об'ємна) вдавлена),inset (вдавлена) та outset (опукла). Крім цих значень можна приховати кордон, за допомогою hidden та none.

border-width - для налаштування товщини кордону. Можна задавати за допомогою числових значень або ключових слів - thin (

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

outline - універсальна властивість для завдання кольору, товщини та стилю межі елемента. Властивість за призначенням схоже на попереднє, але відрізняється тим, що не впливає на ширину і положення блоку.

outline: #CCC solid 2px;

Також існують значення окремо -outline-color, outline-width іoutline-style які за своїм призначенням і змінним схожі з властивостямиborder.