1   2   3   4   5   6   7   8
Ім'я файлу: Заняття 5.docx
Розширення: docx
Розмір: 721кб.
Дата: 22.02.2021
скачати

Глава 1

...

Глава 1.1

...

Глава 1.2

...

Глава 2

...

Глава 2.1

...

Глава 2.1.2

Це можуть бути заголовки документа, розділеного на розділи або параграфи. Природним буде призначити id кожному розділу.

Глава 1

...

Глава 1.1

...

Глава 1.2

...

Глава 2

...

Глава 2.1

Глава 2.1.2

Наприклад, заголовок chapter1.2, повинен бути червоним. Це робиться відповідно до CSS:

# c-1-2 {

color: red;

}

Як показано в попередньому прикладі, властивості конкретного елемента можна визначати за допомогою #id в таблиці стилів документа.

2.6. Поля і заповнення

Розглянемо, як можна змінювати уявлення елементів властивостями margin і padding. У елемента є чотири сторони: right, left, top і bottom. Поля margin - це відстань від кожної сторони до сусідніх елементів (або країв документа). Як перший приклад розберемо, як визначити поля самого документа, за допомогою елемента . На ілюстрації показано, які поля нам потрібні:

CSS-код для цього прикладу виглядає так:

body

{

margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px;

}

або більш елегантно:

body

{

margin: 100px 40px 10px 70px;

}

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


body {

margin: 100px 40px 10px 70px;

}

p {

margin: 5px 50px 5px 50px;

}



Рис. Розташування полів на сторінці

Заповнення не впливає на відстань між елементами, а лише визначає внутрішню відстань між рамкою і вмістом елемента. Використання заповнення/padding можна показати на простому прикладі, де всі заголовки мають кольоровий фон (жовтий або помаранчевий):

h1 {

background: yellow;

}

h2 {

background: orange;

}

Визначаючи заповнення для заголовків, ви встановлюєте величину поля навколо тексту кожного заголовка.

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange; padding-left: 120px;

}

2.7. Рамки

Рамки мають різноманітне застосування, наприклад, як декоративний елемент або для відділення двох об'єктів. CSS надає безліч варіантів використання рамок.

• border-width

• border-color

• border-style

• Приклади визначення рамок

• border

Товщина рамки [border-width]

Товщина рамки визначається властивістю border-width, яке може мати значення thin, medium і thick, або числов е значення в пікселах. На рисунку показана ця система:



Рис. Позначення товщини рамки

Властивість border-color визначає колір рамки. Значення - нормальні значення кольору, наприклад: "# 123456", "rgb (123,123,123)" або "yellow":



Рис. Позначення кольору рамки
Типи рамок [border-style]

Існують різні типи рамок. Всі приклади показані кольором "gold" і товщиною "thick", але можуть виводитися з іншими параметрами. Значення none або hidden можуть використовуватися, якщо ви не хочете відображати рамку рисунку.



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


1   2   3   4   5   6   7   8

скачати

© Усі права захищені
написати до нас