CSS-рамкаелемента є ще однією або кілька ліній, що оточують вміст елемента і його поля padding. Рамка задається за допомогою короткого властивості border. Стиль рамки задається за допомогою трьох властивостей: стиль, колірі ширина.
Оформлення рамок HTML-елементів за допомогою CSS-властивостей
1. Стиль рамки border-style
За замовчуванням рамки завжди отрісовиваємих поверх фону елемента, фон поширюється до зовнішнього краю елемента. Стиль рамки визначає її відображення, без цієї властивості рамки не буде видно взагалі. Для елемента можна задавати рамку для всіх сторін одночасно за допомогою властивості border-style або для кожної сторони окремо за допомогою уточнюючих властивостей border-top-style і т.д. Чи не успадковується.
| border-style (Border-top-style, border-right-style, border-bottom-style, border-left-style) |
|
|---|---|
| значення: | |
| none | Значення за замовчуванням, означає відсутність рамки. Також прибирає рамку елемента з групи елементів з встановленим значенням даного властивості. |
| hidden | Еквівалентно none. |
| dotted |
dotted |
| dashed |
dashed |
| solid |
solid |
| double |
double |
| groove |
groove |
| ridge |
ridge |
| inset |
inset |
| outset |
outset |
| {1,4} |
Одночасне перерахування чотирьох різних стилів для рамок елемента, тільки для властивості border-style:
|
| initial | |
| inherit | |
синтаксис
P (border-style: solid;) p (border-top-style: solid;)
2. Колір рамки border-color
Властивість задає колір рамок всіх сторін одночасно. За допомогою уточнюючих властивостей можна встановити свій колір для рамки кожного боку елемента. Якщо для рамки колір не заданий, то він буде таким же, як і колір тексту елемента. Якщо в елементі немає тексту, то колір рамки буде таким же, як і колір тексту батьківського елемента. Чи не успадковується.
| border-color (Border-top-color, border-right-color, border-bottom-color, border-left-color) |
|
|---|---|
| значення: | |
| transparent | Встановлює прозорий колір для рамки. При цьому ширина рамки залишається. Можна використовувати для зміни кольору рамки при наведенні курсору миші на елемент, щоб уникнути зміщення елемента. |
| колір | Колір рамок задається за допомогою значень властивості. (Border-color: # cacd58;) |
| {1,4} |
Одночасне перерахування чотирьох різних кольорів для рамок елемента, тільки для властивості border-color:
|
| initial | Встановлює значення властивості в значення за замовчуванням. |
| inherit | Успадковує значення властивості від батьківського елемента. |
синтаксис
P (border-color: # cacd58;)
3. Ширина рамки border-width
Ширина рамки задається за допомогою одиниць вимірювання довжини або ключових слів. Якщо для властивості border-style задано значення none, і для рамки елемента встановлена якась ширина, то в даному випадку ширина рамки прирівнюється до нуля. Чи не успадковується.
синтаксис
P (border-width: 2px;)
4. Завдання рамки одним властивістю
Властивість border дозволяє об'єднати в собі такі властивості: border-width, border-style, border-color, наприклад:
Div (width: 100px; height: 100px; border: 2px solid grey;)
При цьому задані властивості будуть застосовуватися до всіх кордонів елемента одночасно. Якщо якесь із значень не вказано, його місце займе значення за замовчуванням.
5. Завдання рамки для однієї межі елементу
У разі, коли необхідно задати різний стиль кордонів елемента, можна скористатися коротким записом для відповідної межі.
Перераховані нижче властивості об'єднують в одне оголошення наступні властивості: border-width, border-style і border-color. Перелік властивостей вказується в заданому порядку, при цьому одне або два значення можуть бути пропущені, в цьому випадку їх значення приймуть значення за замовчуванням.
Стиль верхньої межі задається за допомогою властивості border-top, нижньої - border-bottom, лівої - border-left, правою - border-right.
синтаксис
P (border-top: 2px solid grey;)
Властивість CSS border злагоджено для створення межі об'єкта, а саме за товщину рамки, за її колір і стиль. Це властивість широко використовується в HTML. Можна створювати різні ефекти для кращого сприйняття контенту на сторінці. Наприклад, оформити сайдбар, шапку сайту, меню і т.п.
1. Синтаксис CSS border
border: border-width border-style border-color | inherit;
- border-width - товщина рамки. Можна ставити в пікселях (px) або скористатися стандартними значеннями thin, medium, thick (вони відрізняються тільки шириною в пікселях)
- border-style - стиль виведеної рамки. Може приймати наступні значення
- none або hidden - скасовує кордон
- dotted - рамка з точок
- dashed - рамка з тире
- solid - проста лінія (застосовується найчастіше)
- double - подвійна рамка
- groove - рифлена 3D межа
- ridge, inset, outset - різні 3D ефекти рамки
- inherit - застосовується значення батьківського елемента
- border-color - колір рамки. Можна задавати за допомогою конкретної назвикольору або в форматі RGB (див. назви html квітів для сайту)
Значення у властивості CSS border можна задавати в будь-якій послідовності. Найчастіше використовують послідовність "товщина стиль колір".
2. Приклади з різними межами рамок CSS border
2.1. Приклад. Різні стилі оформлення кордону рамки border-style
border-style: dashedborder-style: dashedborder-style: solidborder-style: doubleborder-style: grooveborder-style: ridgeborder-style: insetborder-style: outsetЧетыре разных рамки
border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки
2.2. Пример. Изменения цвета рамки при наведении курсора мыши
Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).
При наведении курсора мыши на блок цвет рамки изменится
Вот как это выглядит на странице:
2.3. Пример. Как сделать прозрачную рамку border
Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)
Вот как это выглядит на странице:
3. Толщина границы: свойство border-width
Задает толщину линии. Ранее мы задавали ее в едином описании border.
Синтаксис CSS border-width
border-width : thin | medium | thick | значение ;
- thin - тонкая толщина линии
- medium - средняя толщина линии
- thick - толстая толщина линии
Ниже приведены несколько примеров. Самым необычным будет - это разная толщина границы у каждой стороны.
border-width: thinborder-width: mediumborder-width: thickРазная толщина у границ
Вот как это выглядит на странице:
border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ
4. Как сделать рамку border только с одного края (границы)
У свойства CSS border есть производные свойства для задания односторонних границ у элемента:
- border-top - для задания рамки сверху (верхняя граница)
- border-bottom - для задания рамки снизу (нижняя граница)
- border-right - для задания рамки справа (правая граница)
- border-left - для задания рамки слева (левая граница)
Эти границы можно совмещать, т.е. прописать для каждого направления свою рамку. Синтаксис точно такой же как и у border.
Также есть свойства
- border-top-color - задание цвета верхний границы
- border-top-style - задание стиля верхней границы
- border-top-width - задание толщины верхней границы
- и т.д. для каждого направления
На мой взгляд проще писать все в строчку, чем плодить лишний текст в стилях. Например, следующие свойства будут одинаковыми
/* Описание двух одинаковых стилей: */
4.1. Пример. Красивая рамка для выделения цитат
Пример рамки для цитаты
Вот как это выглядит на странице:
Пример рамки для цитаты
Примечание
Можно задать отдельную границу для каждой из сторон.
5. Как сделать несколько границ border у элемента html
Иногда требуется сделать несколько границ. Приведем пример
5.1. Первый вариант с несколькими границами
Вот как это выглядит на странице:
Есть второй способ через наложение теней.
5.2. Наложение теней для создания нескольких границ
Вот как это выглядит на странице:
6. Скругление углов у границ (border-radius)
Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например
7. Вдавленная линия CSS
Вдавленные линии эффектно могут смотреться на темном фоне, что подходит далеко не каждому сайту.
Вот как это выглядит на странице:
Для обращения к border из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.border ="VALUE "
Описание
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Синтаксис
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
В даному прикладі навколо шару додається подвійна межа. Результат показаний на рис. 2.
Мал. 2. Застосування властивості border
об'єктна модель
document.getElementById ( "elementID") .style.border
браузери
браузер Internet Explorerдо шостої версії включно при товщині кордону 1px відображає dotted як dashed. При товщині 2px і вище значення dotted працює коректно. Ця помилка виправлена в IE7, але тільки для всіх кордонів товщиною 1px. Якщо одна з меж блоку має товщину 2px і вище, то в IE7 значення dotted перетворюється в dashed.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Стиль кордону в різних браузерахможе дещо відрізнятися при використанні значень groove, ridge, inset або outset.
Рамки (блокові параметри)
Значення цих властивостей використовуються для установки характеристик області навколо елемента.
Це може бути застосоване до символів, зображень і т.д.
| параметри | значення | опис |
| border-top-color border-right-color border-left-color border-bottom-color border-color |
колір (Немає кольору за замовчуванням) |
Визначають колір чотирьох сторін рамок. Якщо замість кольору підставити URL-адресу зображення, воно буде повторюватися, утворюючи рамку. |
| border-top-style border-right-style border-left-style border-bottom-style border-style |
none (за замовчуванням) solid double groove ridge inset outset |
Визначають стиль чотирьох сторін рамок. |
| border-top border-right border-left border-bottom border |
шіріна_рамкі, стіль_рамкі, колір (за замовчуванням: |
Визначають властивості чотирьох сторін рамок. Працюють так само, як властивості відступів (див.нижче), за винятком того, що рамка видно. шіріна_рамкіможе бути значенням medium, thin або thick або задана в одиницях виміру. аргумент colorвикористовується для визначення кольору заповнення фону елемента, поки він завантажується, а також позаду прозорих частин елементу. Якщо передати замість нього адресу зображення, то малюнок буде повторюватися, заповнюючи контур рамки. |
| border-top-width border-right-width border-left-width border-bottom-width border-width |
thin medium (за замовчуванням) thick довжина |
Визначають ширину рамки навколо елемента. Кожна сторона може бути задана відповідним параметром. Можна замінити установку чотирьох індивідуальних властивостей установкою одного властивості border-widthтак само, як і для властивостей відступу margin. |
| ciip | rect (/ top / right / bottom / left /) auto (за замовчуванням) |
Визначає, яка частина елемента видно. Все, що знаходиться за межами області, зазначеної цим параметром, побачити не можна. |
| display | "", None "" (за замовчуванням) |
Цей параметр вказує, чи буде відображений елемент. |
| float | none (за замовчуванням) left right |
Визначає обтікання елемента іншими елементами зліва чи справа замість розміщення їх під ними. підтримується тегами ,
...
|
| height | auto (за замовчуванням) довжина |
Встановлюють висоту елемента і вимірюють її, якщо це необхідно. Значення повертаються у вигляді рядка, що включає одиниці виміру (px,% і т.д.). Для отримання числового значення використовується властивість posHeight. |
| left | auto (за замовчуванням) довжина відсотки |
Задають горизонтальну координату елементу, дозволяючи коректно встановлювати і пересувати елементи. Значення повертається як рядок, що включає одиниці виміру (px,% і т.д.). Для отримання значення в вигляді числа використовується властивість posLeft. |
Приклад 1:
Цей рядок підкреслена пунктиром.Приклад 2: Різні типи рамок.
| 1. none -Немає межі (border: none;) |
| 2. solid -Є межа (border: 1px solid;) |
Приклад 4: Рамка з круглими кутами.
. в податкових деклараціях;
. довідках 2-ПДФО;
У всіх перерахованих документа вказується 11-ти значний код ОКТМО на заміну раніше використовуваних кодів Окатий.
|
#org Position: relative; Background-color: # e8e3d4; |
Починаючи з 1 січня 2014 року нові коди ОКТМО, вказуються в: . в податкових деклараціях; . довідках 2-ПДФО; . платіжних дорученнях (поле 105); . квитанція на оплату податків, зборів, мит форми ПД-4 податок. У всіх перерахованих документа вказується 11тізначний код ОКТМО на заміну раніше використовуваних кодів Окатий. |
|
вкладені таблиці
Вузька чорна рамка (5px) Параметри таблиці:
|
Ширина і висота блокових елементів
властивості CSS widthі height- встановлюють ширину і висоту блокових елементів.
Ширина і висота елемента може бути задана наступними способами:
- auto- Розміри елемента визначається його змістом. (за замовчуванням)
- % - Розміри елемента задається у відсотках від висоти / ширини елемента батька.
- px- Розміри елемента задається в пікселях або будь-яких інших одиницях виміру прийнятих в CSS.
Управління вмістом елемента
Що робити з вмістом елемента, якщо воно перевищує його розмір?
Якщо елементу присвоєно точні значення висоти і ширини ( height, width) А його зміст, наприклад довгий текст, не вміщається в зазначених межах, то за замовчуванням такий елемент розтягується до потрібних розмірів, що не завжди на руку веб-майстру. На допомогу приходить атрибут overflow, Який вказує браузеру, що робити з елементом в таких випадках.
властивість overflowможе мати такі значення:
- visible- Елемент розтягується до необхідних розмірів. (за замовчуванням)
- hidden- Зміст елемента "обрізається" видна лише та його частина що міститься в елементі.
- scroll- Додаються смуги прокрутки (завжди! Навіть якщо зміст поміщається в межах елемента).
- auto- Смуги прокрутки додаються при необхідності.
CSS
CSS(Англ. Cascading Style Sheets - каскадні таблиці стилів) - формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки і т.д. ..............
результат
CSS
CSS(Англ. Cascading Style Sheets - каскадні таблиці стилів) - формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки. Способи підключення CSS до документаПравила CSS пишуться на формальній мові CSS і розташовуються в таблицях стилів, тобто таблиці стилів містять в собі правила CSS. Ці таблиці стилів можуть розташовуватися як в самому веб-документі, зовнішній виглядякого вони описують, так і в окремих файлах, що мають формат CSS. (По суті, формат CSS - це звичайний текстовий файл. У файле.css не міститься нічого, крім переліку правил CSS і коментарів до них.) Тобто, ці таблиці стилів можуть бути підключені, впроваджені в описуваний ними веб-документ чотирма різними способами :
- Коли таблиця стилів знаходиться в окремому файлі, Вона може бути підключена до веб-документу за допомогою тега , Розташованого в цьому документі між тегами і.
(Тег матиме атрибут href, що має значенням адресу цієї таблиці стилів). Всі правила цієї таблиці діють протягом усього документа;
.....
- Коли таблиця стилів знаходиться в окремому файлі, вона може бути підключена до веб-документу за допомогою директиви @import, що розташовується в цьому документі між тегами і) Відразу після тега
- Коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому між тегами(Які, в свою чергу, розташовуються в цьому документі між тегами і). Всі правила цієї таблиці діють протягом усього документа;
.....
- Коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому в тілі якогось окремого тега (за допомогою його атрибута style) цього документа. Всі правила цієї таблиці діють тільки на вміст цього тега.
купи слона
Привіт, шановні читачі блогу сайт! Сьогодні ми продовжимо вивчення каскадних таблиць стилів або CSS. У попередніх статтях ми вже розглянули в загальних рисах блочну верстку сайту. В результаті у нас стали виходити цілком професійні web-сторінки, але чогось їм не вистачає. А не вистачає їм скоріше за все відступів і рамок. Сьогодні ми і займемося розглядом стильових правил margin, padding і border, які дозволяють задавати відступи і рамки для html-елементів.
Параметри відступів в CSS
За допомогою каскадних таблиць стилів існує можливість задавати відступи двох видів.
1.внутрішній відступ- це відстань від уявної межі елементу до його вмісту. Величина відстані задається за допомогою параметра padding. Такий відступ належить самому елементу і знаходиться всередині нього.
2. зовнішній відступ- відстань між кордоном поточного елемента веб-сторінки і кордонами сусідніх елементів, або батьківського елемента. Розмір відстані регулюється властивістю margin. Такий відступ знаходиться поза елементом.
Для наочності картинка:
Наприклад, розглянемо осередок заповнену текстом. Тоді внутрішній відступ це відстань між уявної кордоном осередки і містяться в ній текстом. А зовнішній відступ це відстань між кордонами сусідніх комірок. Почнемо з внутрішніх відступів.
Внутрішні відступи в CSS за допомогою padding (top, bottom, left, right)
Властивості стилю padding-left, padding-top, padding-right і padding-bottom дозволяють задати величини внутрішніх відступів, відповідно, ліворуч, зверху, праворуч і знизу елемента web-сторінки:
padding-top | padding-right | padding-bottom | padding-left: значення | відсотки | inherit
Величину відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. При вказівці відсотків, значення вважається від ширини елемента. Значення inherit вказує, що воно успадковується від батька.
Наприклад, для поточного абзацу я застосував правило стилю, що задає відступ зліва 20 пікселів, верхній відступ 5 пікселів, праворуч відступ 35 пікселів і знизу 10 пікселів. Запис правила в виглядатиме таким чином:
p.test (
padding-left: 20px;
padding-top: 5px;
padding-right: 35px;
padding-bottom: 10px
}
Збірне правило paddingдозволяє вказати відступи відразу з усіх боків елемента веб-сторінки:
padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
У збірному правилі дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. В цьому випадку ефект залежить від кількості значень:
- якщо вказати одне значення, то воно встановить величину відступу з усіх боків елемента сторінки;
- якщо вказати два значення, то перше задасть величину відступу зверху і знизу, а друге - ліворуч і праворуч;
- якщо вказати три значення, то перше визначить величину відступу зверху, друге - ліворуч і праворуч, а третє - знизу;
- якщо вказані чотири значення, то перше встановить величину відступу зверху, друге - справа, третє - знизу, а четверте - зліва.
Таким чином правило CSSнаведене вище можна максимально скоротити і записати наступним чином:
p.test (padding: 5px 35px 10px 20px)
Властивість margin або зовнішні відступи в CSS
Атрибути стилю margin-left, margin-top, margin-right і margin-bottom дозволяють задати величини зовнішніх відступів, відповідно, ліворуч, зверху, праворуч і знизу:
margin-top | margin-right | margin-bottom | margin-left:<значение>| Auto | inherit
Як уже згадувалося вище зовнішнім відступом є відстань від кордону поточного елемента до кордону сусідньої елемента, або, якщо сусідніх елементів немає, до внутрішньої межі батьківського контейнера.
Величину відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях:
p (
margin-left: 20px;
}
h1 (
margin-right: 15%;
}
Значення auto означає, що розмір відступів буде автоматично розрахований браузером. У разі використання процентної записи, то відступи розраховуються в залежності від ширини батьківського контейнера. Причому це відноситься не тільки до margin-left і margin-right, а й для margin-top і margin-bottom відступи в процентах будуть розраховуватися в залежності від ширини, а не висоти контейнера.
Як значення зовнішніх відступів допустимо застосовувати від'ємні величини:
p (
margin-left: -20px;
}
Якщо при позитивних значеннях відступів сусідні елементи відсуваються, то при від'ємному значенні сусідній блок наїде на елемент для якого ми поставили таке негативних відступ.
Зовнішні відступи ми також можемо вказати за допомогою атрибута стилю margin. Він задає величини відступу одночасно з усіх боків елемента web-сторінки:
margin:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Дана властивість в разі завдання одного, двох, трьох або чотирьох значень відступів підпорядковується тим же законам, що і правило padding.
Параметри рамки за допомогою властивості border
При налаштуванні рамок існує три типи параметрів:
- border-width - товщина рамки;
- border-color - колір рамки;
- border-style - тип лінії за допомогою якої буде намальована рамка.
Почнемо з параметра товщини рамки:
border-width: [значення | thin | medium | thick] (1,4) | inherit
товщину рамкиможна задавати в пікселях, або в інших доступних в css одиницях. Змінні thin, medium і thick задають товщину рамки в 2, 4 і 6 пікселів відповідно:
border-width: medium;
Як і для властивостей padding і margin, для параметра border-width дозволяється використовувати одне, два, три або чотири значення, задаючи таким чином товщину рамки для всіх сторін відразу або для кожної окремо:
border-width: 5px 3px 5px 3px
Для поточного абзацу зробимо товщину верхньої рамки 1px, правою 2px, нижньої 3px, а лівої 4px за допомогою правила (border-width: 1px 2px 3px 4px;)
За допомогою атрибутів стилю border-left-width, border-top-width, border-right-width і border-bottom-width можна задавати товщину, відповідно, лівої, верхній, правій і нижній сторін рамки:
border-left-width | border-top-width | border-right-width | border-bottom-width: thin | medium | thick |<толщина>| inherit
Наступний параметр border-color за допомогою якого можна управляти кольором рамки:
border-color: [колір | transparent] (1,4) | inherit
Властивість дозволяє задати колір рамки відразу для всіх сторін елемента або тільки для зазначених. Як значення можна використовувати прийняті в html для квітів способи їх завдання: шістнадцятковий код, ключові слова і т.д .:
p (border-width: 2px; border-color: red)
Значення transparent встановлює прозорий колір рамки, а inherit успадковує значення батька. За замовчуванням, якщо колір рамки не заданий, то буде використовуватися той, який використовується для шрифту всередині даного елемента.
За допомогою атрибутів стилю border-left-color, border-top-color, border-right-color і border-bottom-color можна задати колір, відповідно, лівої, верхній, правій і нижній сторін рамки:
border-left-color | border-top-color | border-right-color | border-bottom-color: transparent |<цвет>| inherit
І останній параметр border-style задає тип рамки:
border-style: (1,4) | inherit
Тип рамки можна вказувати відразу для всіх сторін елемента або тільки для зазначених. Як значення можна використовувати кілька ключових слів. Вид буде залежати від використовуваного браузера і товщини рамки. значення noneвикористовується за умовчанням і не відображає рамку і її товщина задається нульовий. Значення hidden має той же ефект. Отримана рамка для інших значень в залежності від товщини приведена в таблиці нижче:
Атрибути стилю border-left-style, border-top-style, border-right-style і border-bottom-style задають стиль ліній, якими буде намальована, відповідно, ліва, верхня, права і нижня сторона рамки:
border-left-style | border-top-style | border-right-style | border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Як і для параметрів зовнішніх і внутрішніх відступів, для рамки існує універсальне властивість border. Воно дозволяє одночасно встановити товщину, стиль і колір кордону навколо елемента:
border: | inherit
Значення можуть йти в будь-якому порядку, розділяючись пробілами:
td (border: 1px solid yellow)
Для установки кордону тільки на певних сторонах елементу існують властивості border-top, border-bottom, border-left, border-right, які дозволяють задати параметри відповідно для верхньої, нижньої, лівої і правої сторони рамок.
Залишилося тільки підвести підсумки:
- для завдання внутрішніх відступівкористуємося властивістю padding;
- для налаштування зовнішніх відступівіснує правило margin;
- параметри рамокзадаються за допомогою атрибута border.
Зазначу, що всі ці css властивості збільшують розміри елемента web-сторінки. Тому, якщо ми змінюємо товщину рамки або розмір відступів у блокових контейнерів, які формують дизайн web-сторінки, то повинні будемо відповідно змінити розміри цих контейнерів, інакше вони можуть зміститися, і дизайн буде порушений.
На цьому все, до нових зустрічей!
