Як зробити рамку на сайті

Як зробити рамку на сайті

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

Вам знадобиться

- Мати власний сайт;
- Знати, що таке CSS і де ці стилі прописуються на сайті.

Інструкція

  1. Щоб створити рамку, спочатку напишіть в CSS такий код:

    ramka {}
  2. Для того, щоб рамка була потрібного розміру, використовуйте параметр border-width, який призначає лінії ширину в пікселях. Наприклад, якщо лінія рамки повинна бути шириною в 3 пікселі, то запис буде виглядати так:

    ramka {border-width: 3px;}
  3. Тепер визначте стиль рамки за допомогою параметра border-style. Якщо ви хочете створити рамку, сторонами якої є звичайні суцільні лінії, то помістіть в код між фігурними дужками такий запис — border-style: solid.
  4. Обрамлення, що складається з точок можна отримати, записавши так: border-style: dotted. Відзначивши border-style: dashed, ви отримаєте пунктирну рамку.
  5. Зробити окантовку подвійної суцільної лінією можна так: border-style: double. Для оформлення тексту або картинок в рамки з ефектом об’ємних сторін напишіть border-style: groove або border-style: ridge. Різниця між цими двома варіантами полягає в тому, що в першому випадку рамка складається з вдавлених ліній, а в другому — з опуклих.
  6. Для створення ефекту вдавленого разом з рамкою елементу сайту використовуйте цей код: border-style: inset. Щоб зробити вміст рамки разом з обрамленням навпаки опуклим, напишіть border-style: outset.
  7. Додати потрібний колір рамці можна за допомогою параметра border-color, поміщеного також між фігурних дужок. Якщо ви хочете зробити рамку червоною, то напишіть border-color: red, синьою — border-color: blue, помаранчевою — border-color: orange.
  8. Код рамки в CSS, що включає всі параметри, виглядає так:

    ramka {border-width: 3px; border-style: solid; border-color: blue;}
  9. Тепер в HTML зробіть такий запис:

    <div id=»ramka»> Вміст рамки </ div>

    Замість словосполучення «Вміст рамки» вставте текст або код потрібної картинки.
  10. Таким чином можна оформляти необмежену кількість елементів на сайті. Для зміни виду рамки потрібно внести зміни тільки в код CSS.