НОУ ІНТУІТ, Лекція, Фонові зображення CSS

Погодьтеся! З першої лекції цього курсу вам не терпілося дізнатися, як зробити свій сайт енергійним та привабливим. Можливо, ви навіть перескочили вперед відразу до цього розділу?

Фонові зображення повинні зробити сайт більш привабливим, але ви можете бути здивовані, наскільки тісно вони спираються на фундаментальні концепції, які ви вже вивчили.

CSS , і зокрема властивість background , зберігає код HTML вільним від презентаційної плутанини. Перепроектування та інші перетворення в житті сайтів, які створюються за допомогою сучасних методів, можна буде виконати значно легше. Ви зможете оновити весь сайт, змінюючи лише таблицю стилів, а не переписуючи кожну сторінку HTML. Залежно від розміру сайту, це може виявитися істотним збереженням ресурсів.

У цій лекції розглядаються основи роботи з фоновими зображеннями CSS, включаючи застосування фонових зображень за допомогою CSS, налаштування їх розміщення, укладання їх вертикально або горизонтально, та об'єднання фонових зображень за допомогою спрайтів CSS (http://www.alistapart.com/articles/ sprites/) для покращення продуктивності сайту (http://developer.yahoo.com/performance/index.html).

Лекція має таку структуру:

  • Як це працює?
  • Властивості фону

Як це працює?

CSS для оформлення фону розщеплюється на різні властивості. Використовуючи ці властивості, такі як position та color, можна керувати зовнішнім виглядом сторінки. У цій лекції ми докладно розглянемо фонові зображення CSS і крок за кроком створимо як приклад тривожне повідомлення.

Спочатку давайте дізнаємося трохи більше про наявні в нашому розпорядженні різні властивості.

Властивості фону

Багато інструментів вибору кольору допомагають визначити шістнадцятковий запис заданого кольору. Чистий червоний колір, наприклад, буде #FF0000.

лекція

Допустимі значення включають color, transparent, або inherit.

Допустимі значення включають URL, none, або inherit.

Допустимими значеннями є repeat, repeat-x, repeat-y, і no-repeat.

Існує багато корисних способів вказівки позиції фону, ключові слова та числові значення. Ключові слова (такі як top і bottom) дуже корисні та легко читаються. Піксельні значення дуже точні, але не адаптуються до зміни висоти та ширини. Негативні значення пікселів будуть корисні при використанні спрайтів CSS, як ви дізнаєтеся пізніше.

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

Допустимі значення включають length (зазвичай у пікселях), percentage (від ширини елемента), і ключові слова top , right , bottom , left , і center . Зазначимо, що центр можна використовувати для вказівки вертикального, так і горизонтального центру. Відзначимо також, що можна змішувати у правилах відсотки та пікселі, але не ключові слова та пікселі або ключові слова та відсотки.

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

  1. color
  2. url
  3. repeat
  4. attachment (дуже рідко використовується; може опускатися)
  5. horizontal-position
  6. vertical-position

Прикладом такого скорочення з усіма використаними властивостями (за винятком attachment) буде наступний: