CSS. Урок 7 Налаштування рамок border

В деяких web елементах (тегах) використовують рамки. Це можуть бути таблці, абзаци, блоки, заголовки, тощо. Варто розглянути які можливості надають налаштування властивостей css для рамок.

  1. Стиль рамки border-style
  2. Товщина рамки border-width
  3. Колір рамки border-color
  4. Скорочений запис властивостей рамки border
  5. Круглі кути
  6. Окремі налаштування сторін рамки

1) Стиль рамки

border-style:значення; - Визначає стиль рамки. Без цієї властивості рамки відображатися не буде.

Популярні стилі рамки:

solid


dashed


dotted


double


Наприклад:

css код
p {
border-style:double;
}

html код
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> Тепер абзац в рамці </p>
</body>
</html>

2) Товщина рамки

border-width:значення; - встановлює товщину рамки.

Наприклад:

css код
p {
border-style:double;
border-width:5px;
}

html код
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> Тепер абзац в рамці товщиною 5px </p>
</body>
</html>

3) Колір рамки border-color

border-color:значення; - встановлює колір рамки.

Наприклад:

css код
p {
border-style:double;
border-width:5px;
border-color:lightblue;
}

html код
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> Тепер абзац в рамці товщиною 5px блакитного кольору</p>
</body>
</html>

4) Скорочений запис властивостей рамки border

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

border: товщина стиль колір;

Наприклад:

В наступному прикладі три налащтування в одному стилі:

css код
p {
border: 5px solid lightblue;
}

html код
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> Текст в рамці з різними налаштуваннями </p>
</body>
</html>

5) Круглі кути

Для створення круглих кутів застосовують властивість border-radius:радіус

css код
h1 {
border: 1px solid blue;
border-radius:10px; }

html код
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<h1> Текст в рамці з круглими кутами </h1>
</body>
</html>

6) Окремі налаштування сторін рамки

Для цього застосовується налаштування border-left, border-right, border-top, border-bottom

Наприклад:

css код
p {
border-top:5px solid lightgreen;
border-right:1px dashed green;
border-bottom:2px dashed gray;
border-left:2px dashed red;
}

html код
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> Текст в рамці з різними налаштуваннями </p>
</body>
</html>

Виконайте вправу в редакторі html

  1. Завантажте файл з цитатами.
  2. Створіть html та css файли.
  3. Розмістить у файлах відпоідні css та html тексти та коди для відображення цитат з такими ж рамками як у завантаженому документі docx.