Привіт, сьогодні ми поговоримо про таку важливу атрибуті в CSS як створення рамки. Рамка дуже часто використовується для того щоб обрамити текст, відокремити один елемент дизайну від іншого і для кожного веб-майстра корисно знати як задати рамку в CSS.
Задаємо стиль оформлення рамки в CSS.
Я не буду створювати новий файл а буду використовувати старий, крім того тут збереглися заголовки різного рівня для яких ми будемо створювати рамки. Давайте задамо різні види рамки для заголовка першого рівня і який задається тегом h1. Для цього в файл стилів прописуємо такий текст: h1 і коротко розглянемо що ми написали. h1 це ми визначили для якого елемента ми будемо ставити рамку, border-style команда яка означає що для даного елемента потрібно задати рамку певного стилю ну а solid позначає стиль відображення рамки, в даному випадку це суцільна риса.
Ми можемо змінювати стиль відображення рамки і для цього нам просто потрібно задавати нові параметри і зараз я покажу які є команди і як вони відображаються на сайті.
Параметри рамки:
solid або суцільна лінія.
dotted-пунктирна лінія.
dashed-штрихованої лінія.
double-подвійна суцільна лінія.
Це основні стилі які ви можете задати стиль рамки в CSS. більш детально про всі команди ви можете дізнатися з специфікації по CSS.
До цього ми задавали стиль повністю для всієї рамки але ми можемо поставити також параметр конкретно для кожної зі сторін і таблиці стилів дає нам таку можливість. У цьому нам допоможуть чотири команди: border-left-style (ліва лінія) border-top-style (верхня лінія) border-right-style (права лінія) і border-bottom-style (нижня лінія).
Давайте тепер поставимо для нашого заголовка стиль для кожної сторони свій. Напишемо команду для всіх чотирьох сторін:
h1 border-left-style: groove;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;>
І на практиці ми побачимо ось такий результат.
Як задати товщину ліній в рамці CSS.
Для завдання рамки нам потрібно використовувати атрибут стилю border-width для якого ми можемо поставити кілька параметрів: перший це задати розмір рамки в пікселях або задати товщину командами thin (тонка лінія), medium (середня лінія) або thick (товста лінія). Товщину лінії ми також можемо поставити для будь-якого боку рамки незалежно від того який стиль заданий для інших.
Давайте для початку вивчимо як задати товщину лінії рамки безпосередньо для всіх сторін. Для цього нам просто потрібно взяти і поставити команду border-width і визначити для нього розмір лінії. Для того щоб задати товщину текст буде виглядати так:
h1 border-style: solid;
border-width: thin;
>
Команду thin можна замінити на medium або thick або ж задати товщину в пікселях обов'язково вказавши одиницю виміру, наприклад розмір в чотири пікселя-4px.
Тепер ми будемо задавати параметри товщини для кожної сторони нашої рамки. Також як і з завданням стилю нам допоможуть параметри border-left-width (товщина лівої лінії), border-top-width (товщина верхньої лінії), border-right-width (товщина правої лінії) і border-bottom-width (товщина нижньої лінії). Для цього ми в файл стилів додамо чотири рядки такого змісту:
h1 border-style: solid;
border-left-width: medium;
border-top-width: thin;
border-right-width: thick;
border-bottom-width: 7px;
>
І тепер всі чотири сторони нашої рамки будуть мати свою товщину.
Як задати колір рамки в CSS.
Давайте тепер поставимо колір рамки в CSS і в цьому нам допоможе команди border-left-color, border-top-color, border-right-color і border-bottom-color для завдання кольору для лівої, верхній, правій і нижній лінії рамки відповідно . Для цього ми прописуємо команди і до кожної команди додаємо по параметру кольору.
h1 border-style: solid;
border-left-color: # 00CCCC;
border-top-color: # 6633CC;
border-right-color: #CCCCCC;
border-bottom-color: # 66CC99;
>
І тепер подивимося результат застосування даного параметра.
Завдання глобальної змінної для скорочення запису.
Тепер давайте розберемо як нам можна позбутися від таких громіздких конструкцій і записів. Для цього нам потрібно буде задати глобальний атрибут border в який ми поставимо такі параметри як товщина рамки, стиль рамки і колір і все це поміститися не в три рядки як мінімум а всього лише в один рядок.
Для цього ми пишемо рядок:
h1 border: 5px solid # 3399FF;
>
в рядку спочатку ми вказуємо товщину лінії рамки потім пробіл і вказуємо стиль оформлення рамки і знову через пробіл вказуємо колір рамки. Ось і все ми скоротили запис до рядка.
Сподіваюся що завдяки даній статті ви зможете задавати рамки для всіх елементів в CSS. Я постарався зупинити вашу увагу на найбільш необхідних командах і докладно вам розповісти про те як поставити рамку в CSS, задати стиль рамки в CSS і задати колір рамки в CSS.