Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах - текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
За допомогою стилів можна змінити відстань між рядками, словами чи навіть символами, задати всі допустимі? відступи для елементів, змінити розміри, вигляд та інші атрибути шрифтів, створити рамки, задати тло, створити ефекти ти накладання текстів, управляти порожнім простором тощо.
Усі ці можливості відкриті перед вами. Тепер варто задуматися над тим, як саме реалізовувати таблиці стилів. Існують два шляхи. Перший: можна включати інформацію про стилі усередину веб-сторінки (визначаючи їхній або в секції <head>, або усередині кожного конкретного елемента). Другий: можна просто зв'язати сторінку з окремим файлом, у якому містяться винятково визначення стилів. При цьому та сама таблиця стилів може використовуватися необмежене число раз. Обидві можливості ми обговоримо далі.
Атрибут style
Почнемо з найпростішого: обговоримо, яким образом можна включати стилі у веб-документ. Для цього знадобиться атрибут style. З його допомогою можна повідомити практично будь-якому елементу HTML: «Гей, приятелю! Я збираюся застосувати до тебе такий-то стиль. Слухай мою команду!» І елементи будуть слухатися. У наступному прикладі зроблений маленький фокус: у гіперпосилання вкрадене підкреслення.
<а href="index.html" style="text-decoration:none">Клацніть тут! Онлайновий магазин на відстані одного щиглика мишкою!</а>
Чи от приклад того, як можна змінити колір тла обраного осередку таблиці:
<table>
<tr><td style="background: yellow">100</td><td>200</td>
<td style="background: red">300</td></tr>
</table>
Вийшла різнобарвна таблиця.
Якщо хочете задати відразу кілька властивостей, розділяйте їх крапкою з комою:
Отже, якщо вам захотілося змінити стиль парочки елементів сторінки, простіше всього це зробити, включивши атрибут style у їхніх визначеннях. Однак це не є визначення стилю елемента взагалі. Для зазначеної дії служить елемент <style>.
Елемент <style>
Атрибут style застосовується лише тоді, коли потрібно змінити властивості одного-двох конкретних елементів, розташованих у конкретному місці сторінки. Це, узагалі ж, не дуже серйозна зміна стилю. Якщо вам дійсно хочеться створити щось однакове, зверніть увагу на елемент <style>. Саме з його допомогою в сторінку включається таблиця стилів. А сам він при цьому повинний бути розташований у секції <head>. Формат наступний:
<head><style type="text/css"> р {font-style: italic} </style></head>
<style type="text/css"> ЕЛЕМЕНТ {властивість: значення} </style> </head>
Ну от бачите, як усе просто? Наприклад, ви хочете оформити всі абзаци на своїй сторінці капітелями. Для цього вам буде потрібно написати наступний код у розділі <head>
<sty1e type="text/css"> р {font-style: small-caps} </style>
Обраний елемент (у даному випадку <р>) у термінах CSS називається селектором, а усе, що розташовується між фігурними дужками, — визначенням. Усе разом називається правилом.
Селектори вам уже повинні бути знайомі: це ті букви, з яких складаються визначення елементів XHTML: p, h1, ul і т.д. При створенні правила ви зіставляєте обраному елементу визначення стилю. Наприклад: ul {list-style: disc}
Елемент <style> може містити і кілька правил. Кожне з них закінчується закриваючою дужкою, тому навіть на одному рядку ви можете розмістити більш одного правила. Але це не кращий стиль програмування.
<style type="text/css">
p {font-style: small-caps}
h1 {color: blue}
ul {list-type: disc}
</style>
Далі, кожне визначення може містити в собі кілька властивостей. Вони відокремлюються друг від друга крапкою з комою.
