Подвійна рамка з використанням CSS. Відступи і рамки в CSS за допомогою параметрів margin, padding і border Пунктирна межа елемента

Привіт, шановні читачі блогу сайт! Сьогодні ми продовжимо вивчення каскадних таблиць стилів або 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-сторінки:

Величину відступу можна вказувати в пікселях (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 дозволяють задати величини зовнішніх відступів, відповідно, ліворуч, зверху, праворуч і знизу:

Як уже згадувалося вище зовнішнім відступом є відстань від кордону поточного елемента до кордону сусідньої елемента, або, якщо сусідніх елементів немає, до внутрішньої межі батьківського контейнера.

Величину відступу можна вказувати в пікселях (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-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-style задає тип рамки:

border-style: (1,4) | inherit

Тип рамки можна вказувати відразу для всіх сторін елемента або тільки для зазначених. Як значення можна використовувати кілька ключових слів. Вид буде залежати від використовуваного браузера і товщини рамки. значення none використовується за умовчанням і не відображає рамку і її товщина задається нульовий. Значення hidden має той же ефект. Отримана рамка для інших значень в залежності від товщини приведена в таблиці нижче:

Атрибути стилю border-left-style, border-top-style, border-right-style і border-bottom-style задають стиль ліній, якими буде намальована, відповідно, ліва, верхня, права і нижня сторона рамки:

Як і для параметрів зовнішніх і внутрішніх відступів, для рамки існує універсальне властивість border. Воно дозволяє одночасно встановити товщину, стиль і колір кордону навколо елемента:

border: | inherit

Значення можуть йти в будь-якому порядку, розділяючись пробілами:

td (border: 1px solid yellow)

Для установки кордону тільки на певних сторонах елементу існують властивості border-top, border-bottom, border-left, border-right, які дозволяють задати параметри відповідно для верхньої, нижньої, лівої і правої сторони рамок.

Залишилося тільки підвести підсумки:

для завдання внутрішніх відступів користуємося властивістю padding;
для налаштування зовнішніх відступів існує правило margin;
параметри рамок задаються за допомогою атрибута border.

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

На цьому все, до нових зустрічей!

Влад Мержевіч

За допомогою CSS можна додати рамку до елементу декількома способами. В основному, звичайно ж, застосовується властивість border, як найбільш універсальний, а також outline і, як не дивно, box-shadow, основне завдання якого - створення тіні. Далі розглянемо ці методи і їх відмінності між собою.

властивість outline

Найпростіше властивість для створення рамок. Має ті ж параметри, що і border, але істотно відрізняється від нього деякими деталями:

outline виводиться навколо елемента (border всередині);
outline не впливає на розміри елемента (border додається до ширини і висоті елемента);
outline можна встановити тільки навколо елемента цілком, але ніяк не на окремих сторонах (border можна використовувати для будь-якого боку або всіх відразу);
на outline не діє радіус заокруглення, заданий властивістю border-radius (на border діє).

Виникає питання - в яких випадках потрібен outline, коли його роль, незважаючи на перераховані відмінності, цілком бере на себе border? Ситуацій не так і багато, але вони зустрічаються:

створення складних різнокольорових рамок;
додавання рамки до елементу при наведенні на нього курсора миші;
приховування рамки, що додається браузером автоматично для деяких елементів при отриманні фокусу;
для outline можна задати відстань від краю елемента до рамки за допомогою властивості outline-offset, для створення.

різнобарвні рамки

Треба розуміти, що outline ні в якій мірі не замінює border і цілком може існувати разом з ним, як показано в прикладі 1.

Приклад 1. Створення рамки

border і outline

В даному прикладі навколо елемента додається чорна рамка, яка відокремлена від фону білою облямівкою (рис. 1).

Мал. 1. Рамка навколо елемента

Рамка при використанні: hover

При додаванні рамки через border відбувається збільшення ширини елемента, що досить помітно при поєднанні border і псевдокласу: hover. Є два способи, як це «перемогти». Найпростіше - замінити border на outline, яке, як ми знаємо, не впливає на розміри елемента (приклад 2).

Приклад 2. Рамка при наведенні

outline

outline не завжди годиться, хоча б тому, що на нього скругление куточків не діє. Тут підійде другий метод - додаємо невидиму рамку або рамку, збігається з кольором фону, а потім міняємо її параметри при наведенні (приклад 3). Тоді ніякого зсуву елемента відбуватися не буде, оскільки рамка спочатку вже є. Але завжди пам'ятаємо, що ширина елемента при цьому складається з значень width, border зліва і border справа. Аналогічно йде і з висотою.

Приклад 3. Рамка при наведенні

border

Рамка навколо полів форми

У деяких браузерах (Chrome, Safari, останні версії Opera) навколо полів форми при отриманні ними фокуса відображається невелика кольорова рамка (рис. 2). Щоб її прибрати, досить в стилях додати до властивості outline значення none, як показано в прикладі 4.

Мал. 2. Рамка навколо полів

Приклад 4. Прибираємо рамку

input

Рамки через box-shadow

Хоча властивість box-shadow призначене для додавання тіні навколо елемента, з його допомогою можна і створювати рамки, причому такі, які неможливо зробити через border або outline. Все завдяки тому, що число тіней може бути необмеженим, параметри яких перераховуються через кому.

Щоб отримати рамку, перші три параметра слід задати нульовими, вони відповідають за стан тіні і її розмиття. Четвертий параметр в даному випадку відповідає за товщину кордону, а п'ятий встановлює колір рамки. Для другої рамки четвертий параметр дорівнює сумі товщин двох рамок.

У прикладі 4 показано додавання двох рамок і однієї кордону справа за допомогою одного властивості box-shadow.

Приклад 4. Використання box-shadow

box-shadow

Результат даного прикладу показаний на рис. 3.

Мал. 3. Рамки, створені властивістю box-shadow

Влад Мержевіч

Ефект об'ємності таблиці досягається за рахунок одночасного використання світлих і темних кольорів в рамці або осередках, при цьому виникає ілюзія, що таблиця виступає над фоном веб-сторінки. Наприклад, рамка навколо таблиці за замовчуванням відображається як об'ємна. Хоча такий вид рамки не користується достатньою популярністю у веб-дизайнерів, це не означає, що такі рамки взагалі не слід застосовувати. Використовуючи стилі, таблиці можна надати найрізноманітніший вид, в тому числі і об'ємний, який може вдало виділятися на тлі своїх «плоских» побратимів.

Товщина тривимірної рамки регулюється атрибутом border тега

, При цьому змінюється тільки зовнішня межа навколо таблиці. Товщина ліній всередині таблиці залишається незмінною (рис. 1).

Для створення вказаної таблиці винесемо всі можливі параметри в стилі, а додавання рамки покладемо на атрибут border (приклад 1).

Приклад 1. Використання атрибута border

Таблиця

	2004	2005	2006
рубіни	43	51	79
смарагди	28	34	48
сапфіри	29	57	36

В даному прикладі рамка навколо таблиці має товщину два пікселя, а її вигляд може незначно відрізнятися в різних браузерах.

Стилі також дозволяють створити ефект тривимірності таблиці за рахунок використання універсального стильового властивості border. Як значення вказується стиль лінії і її товщина, які вельми впливають на кінцевий вигляд таблиці. У табл. 1 показані деякі значення і кінцевий результат.

У прикладі 2 для додавання рамки використовується стиль із значенням groove і завтовшки 5 пікселів. Вид отриманої таблиці показаний на рис. 2.

Стильова властивість border застосовується до селектора TABLE для створення рамки навколо таблиці і до селекторів TD і TH для додавання рамки до кожного осередку. При цьому щоб не виникало подвійних ліній в місцях зіткнення різних осередків, використовується властивість border-collapse із значенням collapse (приклад 2).

Приклад 2. Створення рамки за допомогою стилів

Таблиця

	2004	2005	2006
рубіни	43	51	79
смарагди	28	34	48
сапфіри	29	57	36

В даному прикладі створюється поглиблена рамка сірого кольору навколо осередків і таблиці в цілому.

Ми можемо самі створити ефект тривимірності таблиці за рахунок правильного чергування темних і світлих ліній в її рядках (рис. 3).

На цьому малюнку показано, що парні рядки таблиці містять світлий фон, білу горизонтальну лінію знизу і темно-сіру - зверху. Втім, можна трактувати і навпаки і сказати, що це непарні рядки мають білу лінію зверху і темну - знизу.

Для створення наведеної на рис. 3 таблиці введемо додатковий клас з ім'ям even, і будемо додавати його до парних рядках таблиці. При цьому для селектора TR не можна безпосередньо встановити властивість border, лінія в цьому випадку відображатися просто не буде. Тому скористаємося контекстними селекторами і додамо конструкцію .even TD, яка говорить, що для всіх осередків розташованих усередині елемента з класом even задаємо лінію знизу і зверху. Колір фону за допомогою властивості background допускається застосовувати до селектора TR, що і показано в прикладі 3.

Приклад 3. Виділення рядків таблиці

Таблиця

	2004	2005	2006
рубіни	43	51	79
смарагди	28	34	48
сапфіри	29	57	36

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

CSS також дозволяє нам створити суцільну, пунктирну або точкову рамку по уявній кордоні елемента Web-сторінки.

Атрибути стилю 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

Ми можемо вказати або абсолютне або відносне числове значення товщини рамки, або одне із зумовлених значень: thin (тонка), medium (середня) або thick (товста). В останньому випадку реальна товщина рамки залежить від Web-оглядача. Значення товщини за замовчуванням також залежить від Web-оглядача, тому її завжди краще встановлювати явно.

У лістингу 11.2 ми вказали товщину рамки у елементів таблиці, що дорівнює одному пікселю.

А ось стиль, який створює у всіх заголовків першого рівня рамку з однієї тільки нижньої сторони товщиною 5 пікселів:

H1 (border-bottom-width: 5px)

Фактично всі заголовки першого рівня виявляться підкресленими.

Атрибут стилю border-width дозволяє вказати значення товщини відразу для всіх сторін рамки:

border-width:<толщина 1> [<толщина 2> [<толщина 3> [<толщина 4>]]]

Якщо вказано одне значення, воно задасть товщину усіх боків рамки.

Якщо вказані два значення, перше задасть товщину верхньої і нижньої, а друге - лівої і правої сторін рамки.

Якщо вказані три значення, перше задасть товщину верхньої, друге - лівої і правої, а третє - нижній сторін рамки.

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

приклад:

TD, TH (border-width: thin)

Атрибути стилю border-left-color, border-top-color, border-right-color і border-bottom-color задають колір, відповідно, лівої, верхній, правій і нижній сторін рамки:

Значення transparent задає "прозорий" колір, крізь який буде "просвічувати" фон батьківського елемента.

УВАГА!

Колір рамки завжди слід задавати явно - в іншому випадку вона може бути не намальована.

приклад:

H1 (border-bottom-width: 5px
border-bottom-color: red)

Атрибут стилю border-color дозволяє вказати колір відразу для всіх сторін рамки:

border-color:<цвет 1> [<цвет 2> [<цвет 3> [<цвет 4>]]]

Він веде себе так само, як і аналогічний атрибут стилю border-width:

TD, TH (border-width: thin;
border-color: black)

border-left-style | border-top-style | border-right-style |

ridge | inset | outset | inherit

Тут доступні наступні значення:

None і hidden - рамка відсутня (звичайну поведінку);

Dotted - пунктирна лінія;

Dashed - штрихова лінія;

Solid - суцільна лінія;

Double - подвійна лінія;

Groove - "втиснута" тривимірна лінія;

Ridge - "опукла" тривимірна лінія;

Inset - тривимірна "опуклість";

Outset - тривимірне "поглиблення".

приклад:

H1 (border-bottom-width: 5px
border-bottom-color: red
border-bottom-style: double)

Атрибут стилю border-style дозволяє вказати стиль відразу для всіх сторін рамки:

border-style:<стиль 1> [<стиль 2> [<стиль 3> [<стиль 4>]]]

Він веде себе так само, як і аналогічні атрибути стилю border-width і border-color.

приклад:

TD, TH (border-width: thin;
border-color: black;
border-style: dotted)

Атрибути стилю border-left, border-top, border-right і border-bottom дозволяють задати всі параметри для, відповідно, лівої, верхній, правій і нижній боку рамки:

border-left | border-top | border-right | border-bottom:

<толщина> <стиль> <цвет> | inherit

У багатьох випадках ці атрибути стилю виявляються краще:

H1 (border-bottom: 5px double red)

"Глобальний" атрибут стилю border дозволяє задати всі параметри відразу для всіх сторін рамки:

border:<толщина> <стиль> <цвет> | inherit
TD, TH (border: thin dotted black)

УВАГА!

Рамки також збільшують розміри елемента Web-сторінки. Тому, якщо ми створимо рамки у блокових контейнерів, які формують дизайн Web-сторінки, то повинні будемо відповідно змінити розміри цих контейнерів, інакше вони змістяться, і дизайн буде порушений.

Вистава для нашого Web-сайту

Зробимо відступи між контейнерами, що формують дизайн наших Web-сторінок, і між кордонами цих контейнерів і їх вмістом.

Зовнішній відступ між краями вікна Web-оглядача і вмістом Web-сторінки дорівнює нулю. Нехай простір у вікні Web-оглядача використовується максимально повно.

НА ЗАМІТКУ

За замовчуванням кожен Web-оглядач створює свої відступи між краями свого вікна і вмістом Web-сторінки.

Внутрішні відступи в контейнері з заголовком Web-сайту (cheader) зліва і справа - по 20 пікселів. Нам доведеться відсунути текст заголовка від країв вікна Web-оглядача, інакше заголовок буде виглядати негарно.

Зовнішній відступ між контейнерами з смугою навігації (cnavbar) і з основним вмістом (cmain) - 10 пікселів.

Внутрішні відступи у контейнера з основним вмістом (cmain) з усіх боків - по 5 пікселів.

Внутрішній відступ у контейнера з основним вмістом (cmain) зверху - 10 пікселів. Так ми відокремимо його від контейнерів cnavbar і cmain.

Внутрішні відступи в контейнері з відомостями про авторські права (ccopyright) зліва і справа - по 20 пікселів. Текст відомостей про авторські права також слід відсунути від країв вікна Web-оглядача.

Наведені значення відступів отримані автором в результаті експериментів. Ви можете задати інші.

Тепер розділимо всі чотири контейнери рамками.

Контейнер cheader отримає рамку з однієї нижньої стороною.

Контейнер cmain - рамку з однією лівою стороною.

Контейнер ccopyright - рамку з однієї верхньої стороною.

Рамки ми зробимо тонкими і точковими. Як кольору задамо для них # B1BEC6 (світло-синій).

У лістингу 11.3 наведено виправлений фрагмент CSS-коду таблиці стилів main.css, який реалізує обрані нами параметри відступів і рамок.

Давайте розберемо його.

Щоб прибрати відступ між кордонами вікна Web-оглядача і вмістом Web-сторінки, ми використовували атрибут стилю margin. Його ми помістили в стиль перевизначення тега і дали йому значення 0 пікселів:

BODY (color: # 3B4043;
background-color: # F8F8F8;
font-family: Verdana, Arial, sans-serif;
margin: 0px)

У іменованому стилі cheader, прив'язаному до однойменного контейнеру, ми задали внутрішні відступи зліва і справа, рівні 20 пикселам, і рамку з одного тільки нижнім боком. Ця рамка відокремить даний контейнер від нижчих:

#cheader (width: 1010px;
padding: 0 20px;
border-bottom: thin dotted # B1BEC6)

Крім того, ми поставили в якості ширини цього контейнера абсолютне значення. Згадаймо: при виведенні на екран контейнера з відносною шириною Web-оглядач спочатку вирахує абсолютне значення його ширини, а потім додасть до нього величину відступів. В результаті чого контейнер стане ширше, ніж вікно Web-оглядача, і у вікні з'являться смуги прокручування, що нам зовсім не потрібно. Тому для ширини контейнера краще задати абсолютне значення, підібравши його так, щоб контейнер гарантовано помістився в вікно Web-оглядача по ширині.

У іменованому стилі cnavbar ми вказали зовнішній відступ справа 10 пікселів - він візуально відокремить контейнер cnavbar від контейнера cmain:

#cnavbar (width: 250px;
height: 570px;
float: left;
margin-right: 10px)

У іменованому стилі cmain ми задали внутрішні відступи і рамку з однією лівою стороною - вона відділить контейнер cmain від контейнера cnavbar:

#cmain (width: 760px;
height: 570px;
float: left;
overflow: auto;
padding: 5px;
border-left: thin dotted # B1BEC6)

У іменованому стилі ccopyright ми задаємо відступи зліва і справа по 20 пікселів, а зверху - 10 пікселів. Крім того, ми створюємо рамку з однієї верхньої стороною, яка відокремить контейнер ccopyright від вищерозташованих "сусідів":

#ccopyright (width: 1010px;
clear: both;

padding: 10px 20px 0px 20px;
border-top: thin dotted # B1BEC6)

От і все. Збережемо таблицю стилів main.css і відкриємо Web-сторінку index.htm в Web-браузері. Автор не буде приводити тут ілюстрацію, т. К. Створені нами тонкі рамки на ній практично непомітні. Але на екрані комп'ютера вони виглядають досить ефектно.

Подивимося тепер на смугу навігації. Невиразні гіперпосилання скупчилися у верхній частині контейнера cnavbar, просто шкода на них дивитися! .. Давайте їх зрушимо вліво, трохи "розрідити", створивши відступи, і заодно укладемо кожну з них в рамки.

Як ми пам'ятаємо, наша смуга навігації являє собою список, а окремі її гіперпосилання - пункти даного списку.

Ось необхідні зміни:

Список, який формує смугу гіперпосилань, зрушити вліво на 30 пікселів. Так ми ліквідуємо що утворився після видалення маркерів вільний простір зліва, яке виглядає негарно.

Зовнішні відступи у пунктів списку зверху і знизу - 10 пікселів. Так ми відокремимо гіперпосилання друг від друга.

Рамка пунктів списку - тонка, суцільна, колір # B1BEC6.

Внутрішні відступи пунктів списку: зверху і знизу - по 5 пікселів, зліва і справа - по 10 пікселів. Так ми відокремимо текст пунктів від рамок.

Залишилося тільки відповідно виправити CSS-код таблиці стилів main.css (лістинг 11.4).

Розглянемо їх докладніше.

У іменований стиль navbar, прив'язаний до тегу списку, який формує смугу навігації, ми додали відступ зліва, рівний -30 пікселів. Завдяки цьому список зміститься вліво, заповнюючи порожній простір:

#navbar (font-family: Arial, sans-serif;
font-size: 14pt;

text-transform: uppercase;
list-style-type: none;
margin-left: -30px)

Новостворений комбінований стиль створить у пунктів списку, формує смугу навігації, рамку і задасть відповідні відступи:

#navbar LI (padding: 5px 10px;
margin: 10px 0px;
border: thin solid # B1BEC6)

Збережемо виправлену таблицю стилів і оновимо відкриту в Web-браузері Web-сторінку index.htm, натиснувши клавішу . Стало значно краще, чи не так (рис. 11.1)?

властивість CSS – « border», Дозволяє задавати товщину, колір і тип лінії по периметру навколо елемента. Параметри даного властивості можуть записуватися в одному рядку, розділяючись через пробіл і в будь-якому порядку.

- товщина лінії один піксель
- суцільна лінія
- білий колір
- чорний колір
- сірий колір

Хмарно межа елемента

Штрихова межа елемента

Пунктирна межа елемента

Кордон елемента подвійний лінією

Властивість окремих ділянок кордону

Втиснута рифлена рамка в обсязі

Опукла рифлена рамка в обсязі

Об'ємна втиснута рамка

Об'ємна опукла рамка

Уроки / CSS /

Урок 7. Рамка елемента CSS

Практично на кожному на сайті використовується властивість, яке створює навколо елемента рамку. Вона потрібна або для кнопок, або для блоків з текстом. Для створення рамки у елемента в CSS є дві властивості: border і outline. Розглянемо їх.

border

Дана властивість потрібно для установки рамки навколо елемента, вказує на його кордон в web-документі, ширина рамки враховується при розташуванні елемента. Має 3 значення - колір, товщину і тип рамки.

Синтаксис у властивості border наступний:

border: Ширина Тип Колір;
Можна вибрати і інший порядок вказівки значень властивості, але головне через пробіл.

Товщину (ширину) рамки потрібно вказувати в пікселях (px) або відсотках (%).
Колір можна задати або в форматі RGB (Red Green Blue), або в HTML HEX коду.

нижче представлені ТИПИ ліній з їх назвами:

Як встановити рамки у елемента? Робимо так:

#block (
border: 3px solid # 0085сс; / * Встановили лінію товщиною 3 пікселя синього кольору * /
}

Якщо Ви хочете встановити одну-дві-три рамки з певного боку, То вказуємо так:

border-top - рамка зверху;
border-bottom - рамка знизу;
border-left - рамка зліва;
border-right - рамка справа;

Block (
border-right: 3px solid # 0085cc;
border-bottom: 2px dashed # 0085cc;
}

Якщо ви хочете прибрати рамки елемента в CSS, то пропишіть в властивості border - none

Empty (
border: none; / * У елемента з класом empty НЕ буде рамки * /
}

outline

Outline - це властивість, яке потрібно для установки зовнішньої рамки елемента.

є дві відмінності від border:
По-перше, лінія, що задається в outline НЕ буде впливати на стан самого блоку, його ширину і висоту.
По-друге, можливість установки рамки з певного боку відсутня.
Синтаксис той же, що і border.

outline: 2px dotted # 0085cc; / * Рамка 2 пікселя пунктиром синя * /
Для outline, як і для border, прибрати рамки можна прописавши none:

Дякую за увагу!

Попередня стаття
Урок 6.

Межі елемента.

Відступи і поля в CSS. Що таке margin і padding? Наступна стаття
Урок 8. Як встановити колір тексту і фон елемента в CSS?

Коментарі до статті (vk.com)

border

підтримка браузерами

12.0+

4.0+

1.0+

3.5+

1.0+

опис

CSS властивість дозволяє одночасно встановити ширину, стиль і колір для рамки блоку. Кордон блоку - звичайна лінія / рамка, яка оточує блок з усіх боків. Варто враховувати, що при додаванні рамки вона буде впливати на загальний розмір блоку.

Значення розділяються пропуском і можуть слідувати в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібному параметру. Всі три значення вказувати не обов'язково, ширину і / або колір можна опустити, в цьому випадку замість пропущеного значення буде використано значення, яке встановлено для властивості за замовчуванням, тобто якщо до прикладу не вказана ширина, то буде використано значення за замовчуванням властивості. У таблиці, розташованої під синтаксисом, зазначено значення яких саме властивостей можна використовувати.

Примітка: для того щоб встановити межі лише на певних сторонах елементу, використовуйте наступні властивості: border-top, border-bottom, border-left, border-right.

Порада: як правило, при використанні рамки потрібно додавати внутрішні відступи.

CSS-властивість: border

Вони додають порожній простір між рамкою блоку і його вмістом: текстом, картинками або дочірніми тегами. Зазвичай межа відображається впритул до вмісту елемента, це корисно тільки в тому випадку, якщо потрібно задати рамку навколо картинки.

синтаксис

border: border-width border-style border-color | inherit;

значення властивості

приклад

Тут міститься якийсь текст.

Результат даного прикладу у вікні браузера:

Як задати колір, стиль і розмір бордюру в боксах.

У мовах розмітки бордюр ( border), Мають тільки таблиці, картинки і фрейми, в деяких випадках вдається задати колір бордюру і на цьому все.

Атрибут border

Каскадні таблиці стилів дають нам більше можливостей, але про все по порядку.

В CSS ми можемо управляти шириною рамки (бордюру) за допомогою border-width, А якщо бути точніше то ми можемо управляти товщиною кожного боку окремо:
border-top-width - товщина верхнього бордюру
border-right-width - товщина правого бордюру
border-bottom-width - товщина нижнього бордюру
border-left-width - товщина лівого бордюру
Але може бути і скорочена форма:
P (border-width: top right bottom left;) (Верх право низ ліво).
Ширина бордюру може здаватися:
цифрами DIV (border-width: 5px), від нуля до нескінченності, тобто позитивні.
thin - тонкий бордюр, DIV (border-width: thin)
medium - середній бордюр, DIV (border-width: medium)
thick - товстий бордюр, DIV (border-width: thick)
З цифрами зрозуміло, а ось з цими значеннями все залежить від браузера, але все ж thin<= medium <= thick .

Так-же ми можемо управляти кольором бордюру за допомогою border-color або якщо бути точніше кольором кожного боку:
border-top-color колір верхнього бордюру;
border-right-color колір правого бордюру;
border-bottom-color колір нижнього бордюру;
border-left-color колір бордюру з лівого боку.
Значення кольору задається як для color, Тобто одним з 16 кольорів: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white або yellow, Також кольору можна задавати: color: # 000000, color: # AF0 , color: rgb (255,0,0) або color: rgb (100%, 0%, 0%).
Не залежно яку колірну схему ви оберете, браузери все одно його переведуть в color: rgb (255,0,0). наприклад color: lime = color: # 00ff00 = color: # 0F0 = color: rgb (0%, 100%, 0%), А для браузера все одно color: rgb (0,255,0), Тобто він вирахує це значення.

Якщо товщиною і кольором бордюру може управляти і HTML то стилем ( border-style) Тільки CSS !!!
Стилем можна управляти кожною стороною окремо:
border-top-style стиль верхнього бордюру;
border-right-style стиль правого бордюру;
border-bottom-style стиль нижнього бордюру;
border-left-style стиль бордюру з лівого боку.
Тепер розглянемо значення стітілей:
1)border-style: none - Це значення за замовчуванням, аналогічно border-width: 0.
2)border-style: hidden - Теж саме, за винятком таблиць (table), які ми розглянемо пізніше.
3)border-style: dotted - Бордюр з точок.
4)border-style: dashed - Бордюр з пунктирною лінії.
5)border-style: solid - Бордюр з суцільної лінії, тобто як в HTML.
6)border-style: double - Бордюр з подвійної суцільної лінії, тут потрібна товщина (border-width) мінімум 3пікселя.
7)border-style: groove - Бордюр виглядає як вирізаний в канві.
8)border-style: ridge - Бордюр виглядає як виступаючий над канвою.
9)border-style: inset - Весь бокс виглядає як втиснутий в канву.
10)border-style: outset - Протилежний попередньому.
Деякі браузери можуть ігнорувати значення: dotted, dashed, double, groove, ridge, inset і outset і виводить їх як solid, тобто звичайним бордюром.

Всі звичайно це так, але все приклади вище це тільки принцип роботи, а не механізм.
властивість правила border має на увазі (border: розмір стиль колір;), це правило виконується при наявності всіх трьох значень і тільки в такій послідовності, наприклад H1 (border: 5px double red;), Але можуть бути і винятки, якщо ці значення передбачені мовами розмітки, наприклад для таблиці TABLE (border: 2px), Тобто задається тільки одне значення.

Для того щоб управляти не всім бордюром, а кожною частиною окремо існують правила:
(Border-top: розмір стиль колір;) Управління верхнім бордюром;
(Border-right: розмір стиль колір;) Управління бордюром справа;
(Border-bottom: розмір стиль колір;) Управління нижнім бордюром;
(Border-left: розмір стиль колір;) Управління бордюром зліва.
Ці правила можна використовувати як по окремість так і всі разом.

Винятком є \u200b\u200bось таке правило:
H1 (
border: 4px solid green;
}
Справа все в тому що в CSS останнє правило має найвищий пріоритет, даному випадку властивість border містить в собі border-left і тому правило border-left буде проігноровано, правильно ось так:
H1 (
border: 4px solid green;
border-left: 2px double red;
}
З початку ми встановлюємо правила для всього бордюру, а потім вже для від ділових ділянок.

По бордюрах для елементів у мене все, хіба що деякі властивості розглянемо коли доберемося до таблиць і інших винятків.

CSS: border. Межі елемента.

CSS3 Межі

За допомогою CSS3, ви можете створювати закруглені кордону, додавати тінь до контейнерів і використовувати зображення в якості кордону - без застосування дизайнерської програми, на зразок Photoshop.

У цьому уроці ви дізнаєтеся про наступні властивості кордону:

border-radius
box-shadow
border-image

підтримка браузера

властивість	підтримка браузера
border-radius
box-shadow
border-image

Internet Explorer 9 підтримує деякі з нових властивостей кордону.

Firefox вимагає приставки -moz- для border-image.

Chrome і Safari вимагає приставки -webkit- для border-image.

Opera вимагає приставки -o- для border-image.

Safari також вимагає приставки -webkit- для box-shadow.

Opera підтримує нові властивості кордону.

CSS3 Закруглені Кути

Додавання закруглені кути в CSS2 було хитрим. Ми повинні були використовувати різні зображення для кожного кута.

В CSS3, створення закруглені кути є простим.

В CSS3, властивість border-radius використовується для створення закруглених кутів:

Цей блок має закруглені кути!

CSS3 Тінь Контейнери

В CSS3, властивість box-shadow використовується для додавання тіні до контейнерів:

CSS3 Кордон-Зображення

За допомогою CSS3 властивості border-image ви можете використовувати зображення для створення кордону:

Властивість border-image дозволяє вам вказати кордон-зображення!

Оригінал, що використовується для створення кордону ваше:

Нові Властивості Межі

Атрибут border

Атрибут border, тега

, Застосовується для вказівки товщини рамки навколо таблиці.

HTML Borders

Допустимо використовувати border без значень, тоді товщина рамки буде дорівнює одному пікселю. За замовчуванням рамка відображається з тривимірними ефектами, але якщо додатково застосувати атрибут background, то рамка стане «плоскою».

Крім цього, якщо атрибут border має нульове значення, то браузери показують і тонкі кордону навколо самих осередків. Відображенням цих кордонів можна управляти, використовуючи атрибут rules.

значення

Значенням атрибута може бути будь-який невід'ємне число задає розмір в пікселях.

Значення за замовчуванням: 0.

синтаксис

Обов'язковий атрибут: немає.

Приклад HTML: застосування атрибута border

результат прикладу

Результат. Застосування атрибуту border.