Прохолодний нерухоме тіло, фон HTML-коди

Коди HTML фону

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

Старі коди круто HTML фону


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

Це було ще до високошвидкісних з'єднань в Інтернет, і невеликий файл зображення був спосіб помістити "Текстура" на тлі вашої веб-сторінки, не роблячи ваші глядачі завантажити деякі гігантські 200KB зображення (хочете вірте, хочете ні, але був час, коли 200 кілобайт взяв назавжди, щоб завантажити у Вашому браузері). Однак, використовуючи ранні HTML код фон, таких як BACKGROUND = "paper.gif", або, щоб встановити колір, BGCOLOR = "# FFFFFF", всієї веб-сторінки будуть покриті зображення, тому що властивість фону повторюється - або " черепичні "- знову і знову.

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

CSS і Прохолодне фіксованого фону HTML-коди


Створення каскадних таблиць стилів було так добре, для веб-дизайнерів, як ніж був для хліборізки. Раптом всі аспекти веб-сторінки можна контролювати за допомогою піксельних точності, а ще краще, як фонові зображення були представлені може контролюватися, а також. Визначаючи «фон» власності в "тіло" елемент таблиці стилів, раптом загострення плитки зображення було вирішено:

тіло {фонового зображення: URL (YourBackGround.jpg);

колір: # EEEEEE; фонового кольору: # FFFFFF;}

Більше, ніж просто зображення

Очевидно Є більше частин до цього, ніж просто зображення назви. Справді, Є кілька різних частин ІСТОРІЯ визначення:

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

Правда Фон Ninja кодування

Є кілька способів, щоб встановити всі ці властивості в CSS. Одним із способів було б визначити якість кожного окремо: 

 



 <Divstyle = "фонового зображення: URL (/ жорсткий диск / YourGraphic.jpg);

 

 



 фон-повторити: не повторювати;

 

 



 тлі прихильності: прокрутка;

 

 



 фон-позиції: 45% 70%;>

 

 



 </ P>

Тим не менш, "скорочення", згадані вище, робить його ще простіше, так як кожна якість може бути визначено одне за іншим просто викликом "ІСТОРІЯ" тега. Наприклад, наведений вище код може бути записаний в один рядок: 

 



 <divstyle="background:url(harddrive/YourGraphic.jpg)no-repeatscroll45%70%;>

Це те, що відомо як "правильно сформованим" код, і, якщо вона визначена у вашій таблиці стилів, ви можете отримати ще більший контроль над вашим весь сайт. Для отримання додаткової інформації, подивіться на інші CSS і HTML статей тут на ВікіОсвіта, і незабаром ваш сайт буде виглядати точно так, як ви хочете, передній і задній план.

Див також