Тема 2.4 Додаткові можливості css
Особливості CSS2 і СSS3.
Розпочнемо з невеликого HTML- документу:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Домашня сторінка про И.С. Бахе</TITLE>
</HEAD>
<BODY>
<H1>Домашня сторінка про И.С. Бахе </H1>
<P> Иоган Себастьян Бах написав багато музичних творів.
</BODY>
</HTML>
Для того, щоб текст стилю H1 відображався синім кольором, Ви можете написати наступне CSS- правило:
H1 { color: blue }
Правило в CSS складається з двох частин: селектори('H1') і описи('color: blue'). У свою чергу, опис також має дві частини: властивість('color') і значення('blue'). І хоча в наведеному вище прикладі здійснюється спроба вплинути тільки на одно з властивостей, необхідних для виконання HTML- документу, проте, безпосередньо сам він і може бути названий таблицею стилю. Будучи об'єднаним з іншими таблицями стилів(така можливість є однією з основних характеристик CSS), він визначатиме повне і остаточне відображення документу.
Специфікація мови HTML 4.0 визначає правила опису таблиць стилів для HTML- документів : або безпосередньо усередині HTML документу, або за допомогою зовнішньої таблиці стилів. Для вставки таблиці стилю в документ використовують елемент STYLE :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашня сторінка про И.С. Бахе </TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1> Домашня сторінка про И.С. Бахе </H1>
<P> Иоган Себастьян Бах написав багато музичних творів
</BODY>
</HTML>
Для максимальної гнучкості ми рекомендуємо авторам створювати зовнішні таблиці стилів, які можуть бути модифіковані без зміни початкового HTML - документу і можуть спільно використовуватися декількома документами. Для з'єднання із зовнішньою таблицею стилю можна використати елемент LINK :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашня сторінка про И.С. Бахе </TITLE>
<LINK rel="stylesheet" href="bach.css" type="text/css">
</HEAD>
<BODY>
<H1> Домашня сторінка про И.С. Бахе </H1>
<P> Иоган Себастьян Бах написав багато музичних творів.
</BODY>
</HTML>
Елемент LINK визначає:
тип з'єднання : "stylesheet".
місцезнаходження таблиці стилів через атрибут "ref".
тип приєднуваної таблиці стилів : "text/css".
Щоб показати тісний зв'язок між таблицею стилів і структурною розміткою документу, продовжимо використання елементу STYLE в цьому керівництві. Додамо більше кольорів:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашня сторінка про И.С. Бахе </TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1> Домашня сторінка про И.С. Бахе </H1>
<P> Иоган Себастьян Бах написав багато музичних творів.
</BODY>
</HTML>
Таблиця стилів тепер містить два правила: перше зумовлює відображення елементів основного тексту червоним кольором 'red', тоді як друге - відображення елементів стилю H1 синім кольором 'blue'. Оскільки для елементу P значення кольору не було встановлене, то він успадкує колір від батьківського елементу, а саме від основного тексту. Елемент стилю H1 також є дочірнім елементом основного тексту, але друге правило перевизначає успадковане ним значення. Подібні конфлікти часто виникають в CSS між різними приписами значень. Представлений опис визначає шляхи їх дозволу.
У CSS2 існує більше 100 різних властивостей, одним з яких є властивість 'color'. Далі пропонується розглянути деякі інші властивості:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE> Домашня сторінка про И.С. Бахе </TITLE>
<STYLE type="text/css">
BODY {
font - family: "Gill Sans", sans - serif;
font - size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1> Домашня сторінка про И.С. Бахе </H1>
<P> Иоган Себастьян Бах написав багато музичних творів.
</BODY>
</HTML>
Першою впадає у вічі група рядків, розділених крапкою з комою і ув'язненими у фігурні дужки "{}". Після останнього рядка в цій групі також може ставитися крапка з комою.
Перший рядок в елементі BODY встановлює сімейство шрифтів "Gill Sans". Якщо цей тип шрифтів недоступний, то призначений для користувача агент(часто іменований програмою перегляду або браузером) використовуватиме шрифт 'sans - serif', який є одним з п'яти шрифтів, розпізнаваних усіма призначеними для користувача агентами. Дочірні елементи BODY наслідують значення 'font - family'.
Другий рядок встановлює розмір шрифту елементу BODY рівним 12 пунктам. Одиниця виміру "пункт" зазвичай використовується при друці на принтері для відображення розміру шрифтів і інших розмірів довжини. Це приклад абсолютної одиниці виміру, яка не міняється залежно від оточення.
Третій рядок використовує відносну одиницю виміру, масштаб якої змінюється залежно від оточення. Одиниця виміру "em" відноситься до розміру шрифту елементу. В даному випадку, розмір полів навколо елементу BODY в три рази більше розміру шрифту.