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

В каскадних таблицях стилів всі доступні властивості форматування елементів поділені на наступні категорії: шрифти, колір та фон, текст, блок, візуальне форматування, друк, фільтри та переходи, псевдокласи та інші властивості. Розглянемо ті категорії, які використовуються найчастіше. Категорія шрифтів - встановлює типографські властивості шрифтів. Відзначимо, що шрифти відрізняються між собою зовнішнім виглядом, розміром, стилем (прямий, курсив), "жирністю" (нормальний, напівжирний). Характеристика основних властивостей шрифтів представлена в табл. 5.1.
Таблиця 5.1Характеристика основних властивостей шрифтів

Властивість	Можливі значення	Призначеня	Приклад
1	2	3	4
font-family	Назви сімейств шрифтів, або назви шрифтів	Задає пріоритетний список сімейств шрифтів	<tr style="font-family: Arial;"> в рядку приоритетним буде використання шрифту Arial
font-style	normal (нормальний), italic (курсив), oblique (похилений)	Визначає стиль шрифту	<tr style=" font-style: italic;">в рядку текст буде виводитись курсивом
font-weight	100,200,…,900	Визначає жирність шрифту. 100 найтонший шрифт, 900 найжирніший	<tr style="font-weight: 900;">
font-size	Абсолютні (pt), або відносні (px,%,em) величини шрифтів	Визначає розмір шрифту	<tr style="font-size: 20pt;"> в рядку буде використано шрифт розміром 20 пунктів
font	Перелік всіх вказаних вище значень	Визначення всіх властивостей	<tr style="font: 20pt Arail;"> в рядку буде використано шрифт Arail, розміром 20pt

Властивості категорії кольору та фону визначають колір та фон елементу. Для визначення кольору використовується властивість color. Наприклад визначити сірий колір змісту (тексту) комірки таблиці можливо так: <td style="color: Gray;"> Фон можливо визначити в вигляді кольору або зображення. Колір фону визначається значенням властивості background-color. Зображення, що використовується в якості фону визначається властивістю background-image. В випадку використання зображення за допомогою властивостей background-repeat та background-attachment можливо вказати, як воно повторюється і фіксується. Наприклад, для визначення в якості фону зображення 1.gif, що буде прокручуватись в прокрутці рядка таблиці в вікні браузера і буде повторюватись по вертикалі необхідно:<tr style="background-color: Green; background-image: 1.gif; background-attachment: scroll; background-repeat: repeat-y;">

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

Властивості категорії блок визначають параметри блокових елементів. Найбільш цікавими серед них є властивості, що визначають ширину полів (margin), товщину (border-width), колір (border-color) та стиль (border-style) границь. Наприклад, визначення таблиці подвійними границями червоного кольору, товщиною 5 пунктів та полями в 50 пунктів можливо записати так:

<table border="1" style="border-color: red; border-style: double; border-width: 5pt; margin: 50 pt;">

5.6. Контрольні запитання

1. Що таке динамічний HTML?

2. З чого складається реалізація DHTML?

3. Навіщо використовується динамічний HTML?

4. Що таке каскадні таблиці стилів?

5. Як визначити каскадні таблиці стилів?

6. Що таке селектор?

7. Як з’єднати HTML-сторінку з таблицею стилів?

8. Що таке групування селекторів?

9. Що таке контекстний селектор?

10. Що таке ієрархія стилів?

11. Селектори class та id?

12. Категорії форматування елементів?

13. Характеристика основних властивостей шрифтів?

14. Як за допомогою стилів визначити колір фону елементу?

15. Як за допомогою стилів визначити ширину полів елементу?

<18 19 202122 23 24 >

Дата добавления: 2015-08-21; просмотров: 1345;