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

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

Така технологія дозволить при необхідності за пару хвилин поміняти вид рамок на сайті. Створити сайт самостійно з Wix.com

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

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

Інструкція

  • Щоб створити рамку, спочатку напишіть в CSS такий код: ramka <>
  • Для того, щоб рамка була потрібного розміру, використовуйте параметр border-width, який призначає лінії ширину в пікселях. Наприклад, якщо лінія рамки повинна бути шириною в 3 пікселі, то запис буде виглядати так:ramka
  • Тепер визначте стиль рамки за допомогою параметра border-style. Якщо ви хочете створити рамку, сторонами якої є звичайні суцільні лінії, то помістіть в код між фігурними дужками такий запис - border-style: solid.
  • Обрамлення, що складається з точок можна отримати, записавши так: border-style: dotted. Відзначивши border-style: dashed, ви отримаєте пунктирну рамку.
  • Зробити окантовку подвійної суцільної лінією можна так: border-style: double. Для оформлення тексту або картинок в рамки з ефектом об'ємних сторін напишіть border-style: groove або border-style: ridge. Різниця між цими двома варіантами полягає в тому, що в першому випадку рамка складається з вдавлених ліній, а в другому - з опуклих.
  • Для створення ефекту вдавленого разом з рамкою елементу сайту використовуйте цей код: border-style: inset. Щоб зробити вміст рамки разом з обрамленням навпаки опуклим, напишіть border-style: outset.
  • Надати потрібний колір рамці можна за допомогою параметра border-color, поміщеного також між фігурних дужок. Якщо ви хочете зробити рамку червоною, то напишіть border-color: red, синьою - border-color: blue, помаранчевої - border-color: orange.
  • Код рамки в CSS, що включає всі параметри, виглядає так: Вміст рамки Замість словосполучення «Вміст рамки» вставте текст або код потрібної картинки.
  • Таким чином можна оформляти необмежену кількість елементів на сайті. Щоб змінити вигляд рамки потрібно внести зміни тільки в код CSS.