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

Відео: Параметри рамки - як задати товщину і стиль рамки контейнера (Основи HTML і CSS)

Содержание

Відео: Параметри рамки - як задати товщину і стиль рамки контейнера (Основи html і css)
Вам знадобиться
Інструкція

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

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

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

Інструкція

щоб створити рамку, спочатку напишіть в CSS такий код:
ramka {}

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

ramka {border-width: 3px;}

Тепер визначте стиль рамки за допомогою параметра 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, що включає всі параметри, виглядає так:
ramka {border-width: 3px; border-style: solid- border-color: blue-}

Тепер в HTML зробіть такий запис:

вміст рамки

Замість словосполучення «Вміст рамки» вставте текст або код потрібної картинки.

Таким чином можна оформляти необмежену кількість елементів на сайті. Щоб змінити вигляд рамки потрібно внести зміни тільки в код CSS.

Зверніть увагу

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

Корисна порада

За допомогою CSS в рамку можна зробити висновок абсолютно все! Так само ми отримуємо величезні можливості по формуванню рамок. До справи! В принципі, космос Ви тут не відкриєте. Для рамки можна задати товщину ліній (border-width), їх стиль (border-style) і колір (border-color). Товщина ліній рамки задається в пікселях.

Поділися в соціальних мережах:

Увага, тільки СЬОГОДНІ!

Схожі