СТИЛІ
Мета: опанувати різні способи створення стилів для HTML-документів.
Стиль HTML - це набір характеристик шрифту, символів і абзацу, застосовуваних до певної частини документа. Застосування стилів дозволяє уникнути необхідності додавання до HTML нових тегів форматування, оскільки нові команди форматування можуть включатись у стиль, а не у HTML-файл. Застосування стилів дозволяє з меншими витратами праці оновлювати сторінки, оскільки форматування буде відділене від змісту.
Таблиці каскадних стилів (Cascading Style Sheets)
CSS - це мова, яка містить набір властивостей для визначення зовнішнього виду документів. За допомогою таблиці каскадних стилів дизайнер може повністю контролювати стиль і розташування кожного елемента HTML-документа.
Internet Explorer підтримує стилі, які задаються одним із способів:
вбудовані стилі {Global Style Sheets) визначають стиль елементів
у всьому документі. Інформація про стиль задається в заголовку документа з використанням тегів <STYLE> і </STYLE>;
залучені стилі {Linked Style Sheets) - інформація про стиль зберігається в окремому файлі, вказаному у тегу <LINK>, і може бути застосована для декількох документів;
внутрішні стилі {Inline Style Sheets) - інформація про стиль розміщується всередині тега HTML і поширюєтьсся на весь текст між цим тегом і відповідним йому кніцевим тегом.
CSS дозволяє маніпулювати такими властивостями елементів: властивості шрифту, властивості тексту, властивості фону і кольору, властивості блоку, властивості елементу та ін.
Всі елементи Web-сторінки можна поділити на блокові і рядкові. Типовим прикладом блокового елементу є малюнок (тег <IMG>). Рядковим елементом є окреме слово або рядок тексту, але цілий абзац вважається блоковим елементом. Стилі, які можна застосувати до
блокових і рядкових елементів, відрізняються. До блокових елементів можна застосувати всі рядкові стилі, але до рядкових елементів не можна застосувати блокові стилі.
До блокових елементів відносяться:
абзац тексту (<Р>);
малюнок, графічне зображення (<IMG>);
таблиця (<TABLE>);
список (<OL>,<UL>).
Крім того, блоковим елементом розмітки можна примусово зробити будь-який рядок і навіть будь-яке слово в документі, застосувавши до нього теги <DIV>...</DIV>.
Вміщення будь-якого елементу між цими тегами дозволяє застосувати до нього атрибути стилю, пов'язані з межами, відступами, «набивками» та ін.
Розглянемо абзац як блоковий елемент (див. рисі).

Рис. 1.
Абзац як блоковий елемент має такі характеристики:
висоту і ширину (height, width);
межі;
оотікання, тобто положення блоку відносно тексту, який знаходиться поряд;
поле і «набивка» (margin, padding).
«Набивкою» називається відстань від межі блокового елементу до межі його вмісту. Відстань від межі блоку до зовнішнього блокового елементу називається відступом або зовнішнім відступом.
Правила запису CSS задаються у формі простих і групових селекторів.
Найпростіше правило CSS задається таким чином:
Селектор {властивість CSS: значення}
Селектор - це будь-який із розглянутих тегів HTML (наприклад, BODY, P, HI, LI). Далі у фігурних дужках декларується значення властивостей CSS, які визначають стиль даного елементу в документі.
НАПРИКЛАД:
НІ {colonred} - задає стиль заголовкам першого рівня. Для зручності використання можна декларувати в одному правилі декілька властивостей CSS для декількох селекторів.
НАПРИКЛАД:
BODY {background-colonwhite; colonblack; font-family:Times New Roman; font-style:normal; font-size: 1 Opt} (задає стиль всьому тілу документа замість атрибутів тегу BODY).
Параметри шрифтів і абзаців, доступні в стилях HTML
Параметр
Можливі значення

Font-family
Будь-який шрифт, припустимий у Windows

Font-size
Будь-який розмір шрифту в пунктах (pt), дюймах (in), сантиметрах (cm) або пікселях (рх)

Font-weight
Виділення ("жирність") шрифта: Normal, bold (звичайний, напівжирний)

.Font-style
Стиль елементу - звичайний або курсив (Italics)

t" ont-decoration
"Оформлення" тексту: none, underline, italic, line-through (відсутній, підкреслений, нахилений, перекреслений)

_Color
Будь-яке значення RGB або англійська назва кольору

J'ext-align
Left, center, right, justify (ліворуч, по центру, праворуч, по ширині)

i'ext-indent
Відступ - будь-яка величина в пунктах (pt), дюймах (in), сантиметрах (cm) або пікселях (рх)


Параметри обтікання, тобто позиціонування елементів на сторінці, дозволяють створити ефект, при якому блоковий елемент не розриває текст, а вбудовується в нього. Цього ефекту дозволяє досяіти атрибут float.
Значення атрибуту float
Left Блок притиснутий ліворуч, текст обтікає його праворуч
Right Блок притиснутий праворуч, текст обтікає його ліворуч
Both Текст обтікає блок з обох боків
Відступ і набивка разом становлять те поле, яке знаходиться між межею основного елемента (сторінки) і вмістом внутрішнього (вкладеного) елемента. Поле і набивку можна задати як одразу для всього блоку, так і для кожної сторони окремо. Padding-right Набивка праворуч
Padding-left Набивка ліворуч
Padding-top Набивка зверху
Padding-bottom Набивка знизу
Margin-right Праве поле (відступ)
Margin-left Ліве поле
Margin-top Верхнє поле
Margin-bottom Нижнє поле
Границі блоку можуть характеризуватись кольором, шириною, стилем.
Колір для всієї границі задається «border-соіопколір». Для кожної лінії границі можна задати колір окремо:
Border-right-color - колір правої лінії;
Border-left-color - колір лівої лінії;
Border-top-color - колір верхньої лінії;
Border-bottom-color - колір нижньої лінії.
Ширина границі блоку визначається атрибутом border-width, вона може задаватись у пікселях (рх), друкарських пунктах (pt) або у процентах (%). Можна окремо вказати ширину правої, лівої, верхньої і нижньої лінії: border-right-width, border-left-width, border-top-width, border-bottom-width.
Для границі можна задати стиль за допомогою атрибута border-style:
None - границі не відображуються; Solid - безперервна лінія;
Dotted - пунктирна лінія: Dashed - штрихова лінія; Double - подвійна лінія; Groove - об'ємна канавка; Ridge - об'ємний гребінець; Incet - складка всередину; Outset - складка назовні.
НАПРИКЛАД:
<р style=border-color:red;border-style:dashed;border-top:lOpx purple double>
{абзац буде окреслений зверху подвійною лінією бузкового кольору шириною 10 пікселів, решта ліній - червоні штрихові).
Списки
CSS дозволяють управляти формою маркера, який розташований поряд з елементом списка за допомогою атрибута list-style-type: disk - маркер у вигляді диску; circle - маркер у вигляді кола; square - маркер у вигляді квадрата.
У нумерованих списках встановлюються такі значення атрибута: Lower-roman - малі римські цифри (і, іі, iv,...); Lower-alpha - малі латинські букви (a,b,c,d,..); Upper-roman - великі римські цифри (I,H,IV,...); Upper-alpha - великі латинські букви (A,B,C,D,F,..); Decimal - цифри (1,2,3,...).
За допомогою атрибута list-style-position можна визначити, яким чином буде розташований маркер відносно списку. Атрибут може приймати значення:
inside - вміст спискового елементу виходить за рівень маркера; outside - вміст спискового елементу не виходить за рівень маркера.
Колір і фон сторінки
Фон сторінки задається атрибутом backgivund-соіогхолір. Фоновий малюнок задається за допомогою атрибута background-image: ім'я файла".
Вбудовані стилі
Інформація про стилі міститься в заголовку документа. Інформація про стилі, задається у такому виді: назва тега, за яким у дужках перелічені характеристики стилю.
Наприклад, в документі текст має бути шрифтом Arial розміром 14 пунктів, колір тексту чорний, вирівнювання по ширині, заголовки шрифтом Arial розміром 16 пунктів, курсив, вирівнювання по центру:
<HTML>
<HEAD>
<STYLE TYPE=«TEXT/CSS»>
P {color: black; font-family: Arial; font-size: 14 pt; font-style:italic; text-indent:45 px; text-align:justify;}
HI {colonblack; font-size: 16 pt; font-family: arial; text-align:center; font-style:italic}
</STYLE>
</HEAD>
<BODY>
<Н1>Свята й обряди календарного циклу</Н1>
<Р> Календарні свята й обряди - складний фольклорний комплекс, в якому поєднуються раціональний досвід і релігійно-магічні вірування, високоестетичні традиції та пережиткові звичаї.</Р> </BODY> </HTML>
Відображення програмою-броузером:

Залучені стилі
У випадку, якщо планується використовувати одні й ті ж стилі на декількох HTML-сторінках, найбільш ефективним буде збереження інформації про стилі у файлі, до якого будуть звертатись всі HTML-документи.
Для створення залученого стилю необхідно спочатку створити файл стилів. Це звичайний текстовий файл, який містить інформацію про стиль. Файл стилів зберігається з розширенням .ess.
Файл STYLE. CSS:
Р {colonblack; font-family: arial; font-size: 14 pt;font-style:italic; text-align:justify;}
HI {colonblack; font-size: 16 pt; font-family: arial; text-alignxenter; font-style:italic}
Використовуючи тег <LINK> в заголовку кожного HTML-документа, можна посилатись на цей файл таким чином:
<HEAD>
<TITLE> Мій документ </TITLE>
<LINK REL=STYLESHEET HREF="C:/SITE/STYLE.CSS"> </HEAD>
Атрибут REL описує відношення файла, який залучається, до основного, тобто те, що залучуваний файл є файлом стилів.
Внутрішні стилі
Внутрішні стилі можуть бути задані всередині HTML-тега. Відповідний стиль відноситься до частини документа, вміщеній між даним тегом і відповідним йому кінцевим тегом.
ПРИКЛАД:
<Р STYLE=«text-alignxenter; color:blue»>
Національне вбрання
</Р>
<Р>
Народні заняття
(Текст «Національне вбрання» буде розташований по центру і одержить синій колір. Цей стиль діє до тега </р>, і в цьому місці броузер повернеться до того стилю, який використовувався до задан-ня цього внутрішнього стилю).