| 1 2 3 4 5 6 7 8
Ім'я файлу: Заняття 5.docx Розширення: docxРозмір: 721кб.Дата: 22.02.2021скачати Глава 1 h1>
...
Глава 1.1 h2>
...
Глава 1.2 h2>
...
Глава 2 h1>
...
Глава 2.1 h2>
...
Глава 2.1.2 h3>
Це можуть бути заголовки документа, розділеного на розділи або параграфи. Природним буде призначити id кожному розділу.
Глава 1 h1>
...
Глава 1.1 h2>
...
Глава 1.2 h2>
...
Глава 2 h1>
...
Глава 2.1 h2>
Глава 2.1.2 h3>
Наприклад, заголовок 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
скачати
|