Урок 7. Рамки

Відео: Уроки по CSS / CSS3. Частина 7. Рамки

Здрастуй, шановний читачу.

Це сьомий урок вивчення CSS. У цьому уроці ми розглянемо як задати рамку на CSS, які бувають рамки і можна зробити з рамкою.

Перед вивченням CSS пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту

Теорія та практика

Рамки є дуже важливим атрибутом для Щоб розфарбувати html сторінку. Щоб з`явилася рамка навколо якогось елемента, в CSS необхідно задати властивість яке починається зі слова border. Наведу приклад використання даного властивості.

Приклад html коду:

12345678910

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;pgt; Praesent ipsum tellus, pellentesque vel enim vel, pharetra pulvinar magna. Suspendisse potenti. Morbi vestibulum rhoncus massa et interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut imperdiet luctus sodales. Nullam mollis, leo ut eleifend commodo, diam felis porta urna, eu fringilla justo nibh ac ante. Sed ac ligula tellus. Phasellus vehicula aliquam leo nec malesuada.lt;/pgt;lt;/bodygt;lt;/htmlgt;

Приклад CSS коду:

Відео: CSS CSS3 Урок 7 Рамки

12345

p{border-width:2- / * Відповідає за товщину кордону * /border-style:solid- / * Відповідає за вид кордону * /border-color:# 00ff00- / * Відповідає за колір кордону * /}

Щоб створити таблицю необхідно написати трьох властивості. Пізніше я розповім як можна скоротити запис.

border-width - відповідає за товщину кордону. Подібно до того як ми вказували товщину таблиці (border = "2") в html;

border-style - відповідає за вигляд кордону. Вона може бути суцільна (solid), подвійна (double), точкова (dotted), штрихова (dashed) і т.д .;

border-color - відповідає за колір кордону. Він позначається як звичайний текст в html, через ґрати;

Приклад в браузері нашого кордону:

Буває така необхідність зробити кордон тільки зліва, або тільки праворуч, або зверху і знизу. На цей випадок до CSS також є рішення. Для цього при написанні властивості необхідно вказувати де має бути присутня дана межа. Подивимося приклад на нашій html сторінці. Виділимо абзац зверху і знизу:

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

123456789

p{border-top-width:2- / * Відповідає за верхню товщину кордону * /border-top-style:solid- / * Відповідає за верхній вид кордону * /border-top-color:# 00ff00- / * Відповідає за верхній колір кордону * /border-bottom-width:2- / * Відповідає за нижню товщину кордону * /border-bottom-style:solid- / * Відповідає за нижній вид кордону * /border-bottom-color:# 00ff00- / * Відповідає за нижній колір кордону * /}

Як це виглядає в браузері:

Також можна виділити три сторони:

12345678910111213

p{border-top-width:2- / * Відповідає за товщину кордону вгорі * /border-top-style:solid- / * Відповідає за вид кордону вгорі * /border-top-color:# 00ff00- / * Відповідає за колір кордону вгорі * /border-bottom-width:2- / * Відповідає за товщину кордону внизу * /border-bottom-style:solid- / * Відповідає за вид кордону внизу * /border-bottom-color:# 00ff00- / * Відповідає за колір кордону внизу * /border-left, width:2- / * Відповідає за товщину кордону зліва * /border-left; style:solid- / * Відповідає за вид кордону зліва * /border-left; color:# 00ff00- / * Відповідає за колір кордону зліва * /}

Відео: Введення в CSS. Урок 7 Оформлення HTML таблиць за допомогою CSS

Як це виглядає в браузері:

Але даний код займає дуже багато місця і в файл CSS буде мати розмір більше Кб. Але його можна скоротити:

Також можна скоротити запис, де ми вказуємо яку кордон виділяємо:

Зазвичай все хто верстають сайти використовують саме скорочений запис, вона економить час і місце. Я вирішив перевірити який обсяг файлу буде при різних формах запису:

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

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

Більше практикуйтеся!