Під час обговорення технічних специфікацій часто буває корисно вникнути в зміст назви. У назві прийнято точно визначати суть і призначення стандарту або специфікації. Опис стилів відображення елементів HTML-розмітки називається "Каскадні таблиці стилів". Зі словом "стилів" усе більш-менш зрозуміло. Під словом "таблиці" варто розуміти набір властивостей елемента розмітки, який можна подати у вигляді рядка в таблиці властивостей, тобто елементи розмітки — рядки, а властивості — стовпці. А от слово "каскадні" вимагає пояснення.
По-перше, існує ієрархія елементів розмітки. По-друге, властивості цих об'єктів можуть наслідуватися. У такий спосіб у дереві об'єктів утвориться гілка, що веде до елемента дерева — елемента розмітки, наприклад, елемента списку або параграфа. Його властивості визначаються елементами розмітки, в які вкладений елемент, і описом стилю для даного елемента.
Текст на зображенні нижче закодований у термінах розділів і списків наступним чином:
<DIV STYLE="margin-left:10px; margin-top:10px;"> Це початок першого розділу, що зсунутий на 10 пікселів вправо щодо лівого краю параграфа і на 10 пікселів вниз щодо стандартної границі параграфа.<DIV STYLE="margin-left:10px;margin-top:20px;text-indent:10px;font-style:italic;"> Це початок другого розділу, що зсунутий щодо попереднього розділу на 10 пікселів, а щодо параграфа — на 20 пікселів. Даний розділ має абзацний відступ в 10 пікселів і зміщений щодо попереднього розділу на 20 пікселів.<UL STYLE="margin-left:10px;"><LI>перший елемент списку<LI>другий елемент списку</UL> Список зміщений щодо другого розділу на 10 пікселів, а щодо поточного параграфа — на 30 пікселів. Перший рядок не є рядком початку параграфа, тому на нього відступ не поширюється (тільки в Netscape).</DIV></DIV>
У такий спосіб відступи відраховуються щодо елемента, в який вкладений поточний елемент. Усі параметри, що не були перевизначені в поточному елементі, наслідуються зі старшого по ієрархії елемента. Останнє добре продемонстровано в застосуванні стилів відображення списку, що вкладений у розділ і тому відображається курсивом.
Коли пояснення деякого феномена HTML-розмітки розтягується на кілька параграфів, має сенс скористатися наведеною нижче графічною схемою побудови сторінки.
При використанні стилів діють наступні правила старшинства стилів:
спочатку застосовуються стилі браузера по замовчуванні;
стилі браузера по замовчуванні перевизначаються стилями вказаними в елементі LINK (елемент заголовка документа);
прилінкові стилі перевизначаються описами стилів в елементі STYLE;
стилі елемента STYLE перевизначаються атрибутом STYLE у кожному з елементів розмітки.
Не всі атрибути стилю можуть наслідуватися. Наприклад, "набивка" (відступ змісту елемента від його границь) елемента BODY не наслідується вкладеними в нього елементами і визначається по замовчуванні або прописується для кожного елемента окремо. Алгоритми наслідування в Internet Explorer і в Netscape Navigator різні, тому для однозначності відображення елементів варто прописувати стиль з максимальоможливою кількістю атрибутів.
4.4. Блокові і стрічкові елементи
<вверх>
В описі елементів розмітки мови HTML існує поняття стрічкового (in-line) елемента розмітки і блокового (block) елемента розмітки. Формально вони визначені в DTD SGML-описі мови HTML. Пояснити відмінності між блоковим і стрічковими елементами можна на прикладі:
параграф — це блоковий елемент розмітки;
виділення курсивом — це стрічковий елемент розмітки.
Блокові елементи можна вкладати один в одного, але вони не повинні перетинатися. Стрічкові елементи можна як вкладати, так і перетинати, але останнє робити не рекомендується.
Очевидно, що по наборі атрибутів керування відображенням (атрибути опису стилю) стрічкові і блокові елементи відрізняються. Спрощено можна сказати, що атрибути опису стилю стрічкового елемента є підмножиною атрибутів опису стилю блокового елемента.
Узагальненнями блокового і стрічкового елементів , з точки зору стилів, є елементи DIV і SPAN, відповідно.
