Синтаксис CSS

Формально стиль відображення елементів розмітки задається посиланням в елементі розмітки на селектор стилю. Синтаксис описання стилів у загальному вигляді представляється так:

selector[, selector[,...]] {attribute:value; [attribute:value;...] }

або

selector selector [selector...] {attribute:value; [attribute:value;...] }

У першому варіанті перераховуються селектори, для яких діє дане описання стилю. Другий варіант задає ієрархію вкладеності селекторів, для сукупності яких визначено стиль. Нагадаємо, що в даному випадку мова йде про описання стилів в нотації text/css. Описання стилів розміщуються або всередині елементу STYLE, або в зовнішньому файлі.

У якості селектора можна використовувати ім’я елементу розмітки, ім’я класу та ідентифікатор об’єкту на html-сторінці. Атрибут (attribute) визначає властивість елементу розмітки, наприклад лівий відступ параграфу (margin-left), а значення (value) – значення цього атрибуту, наприклад, 10 пт (10 pt).

3.1. Селектор – ім’я елементу розмітки

Якщо розробник web-сайту хоче задати загальний стиль усіх сторінок, він просто прописує стилі для усіх елементів html-розмітки, що будуть використовуватися на сторінках. Це дає можливість скомпонувати сторінки з логічних елементів, а стиль відображення елементів описати в зовнішньому файлі. Цей метод дозволяє автору змінювати зовнішній вигляд усіх сторінок шляхом внесення змін в файл описання стилів, а не в файли html-сторінок. Зовнішній файл при цьому може мати такий вигляд:

I, EM {color:#003366;font-style:normal}A I {font-style:normal;font-weight:bold; text-decoration:line-through}

У першому рядку цього описання перераховуються селектори-елементи, які будуть відображатися однаково (елемент <I> та елемент <EM> будуть відображатися однаково). Другий рядок визначає стиль відображення вкладеного в гіпертекстове посилання курсиву:

<A NAME=empty><I>інститут</I></A>

У цьому випадку, перевизначення полягає в тому, що текст відображається всередині гіпертекстового посилання напівжирним перекресленим шрифтом.

3.2. Селектор – ім’я класу

Ім’я класу не є якимось стандартним іменем елементу html-розмітки. Воно визначає описання класу елементів розмітки, які будуть відображатися однаково. Для того, щоб віднести елемент розмітки до того чи іншого класу, потрібно скористатися його атрибутом CLASS:

<STYLE>.test {color:white;background-color:black;}</STYLE>...<P CLASS="test">Цей параграф виводиться білим кольором на чорному фоні</P>...<P>Це <A CLASS="test">гіперпосилання </A> виводиться білим кольором на чорному фоні.</P>

Передуючу точку в імені класу можна опускати. Вона задається з міркувань збереження одноманітності описання. Наприклад, можна описати класи відображення однотипних елементів розмітки:

a.menu { color:red;background-color:white; text-decoration:none; }a.paragraph { color:navy; text-decoration:underline; }

У наведеному прикладі клас гіперпосилань menu має одне описання стилю, а клас гіперпосилань paragraph – зовсім інше. При цьому кожен з цих класів не можна застосовувати до інших елементів розмітки, наприклад, параграфу чи списку. Якщо ім’я елементу розмітки не задано, це значить, що клас можна віднести до довільного елементу розмітки – кореневий клас описання стилів. Ця ситуація нагадує описання імені кореневого домену в системі доменних імен. Власне, нічого дивного тут немає, адже система класів об’єктів на html-сторінці представляє собою дерево. Елементи розмітки – це вузли дерева.

3.3. Селектор – ідентифікатор об’єкту

Об’єктна модель документу (Document Object Model) описує документ як дерево об’єктів. Об’єктами є: сам документ, його розділи (елементи DIV), картинки, параграфи, застосування тощо. Кожен з об’єктів може мати ім’я і до нього можна звертатися за іменем. Така можливість використовується при програмуванні сторінок на стороні клієнта.

Використання ідентифікатора об’єкту виправдано ще й у випадку модифікації атрибуту описання стилю для даного об’єкту в його CSS-описанні. Замість двох описань класів, що відрізняються тільки одним із параметрів, можна створити одне описання класу та описання ідентифікатора об’єкту. Описання стилю для об’єкту задається рядком, в якому селектор представляє собою ім’я цього об’єкту з передуючим символом «#»:

a.mainlink { color:darkred; text-decoration:underline; font-style:italic; }#blue { color:#003366 }...<A CLASS=mainlink>основне гіперпосилання </A><A CLASS=mainlink ID=blue>модифіковане гіперпосилання </A>

Слід зазначити, що інтерпретація ідентифікаторів об’єктів в Internet Explorer та Netscape Navigator є різною. В елементах розмітки можна іще використовувати атрибут NAME. Атрибут NAME використовує Netscape Navigator для ідентифікації об’єкта, тоді як Internet Explorer з цією метою використовує атрибут ID.

Відмінності в інтерпретації ID в браузерах при декларативному використанні CSS не надто страшні. Інша страва – якщо автор буде програмувати стилі – змінювати значення атрибутів описання стилів. У цьому випадку, різниця об’єктних моделей документів у різних браузерах проявиться в повній мірі. Фактично прийдеться для кожного з браузерів розробляти зовсім інші документи (сторінки).

4. Наслідування та перевизначення об’єктів

При обговоренні технічних специфікацій часто буває корисним вникнути в зміст назви. У назві прийнято точно визначати суть та призначення стандарту чи специфікації. Описання стилів відображення елементів html-розмітки носить назву «Каскадні таблиці стилів». З терміном «стилів» все більш-менш зрозуміло. Під терміном «таблиці» слід розуміти набір властивостей елементу розмітки, який можна уявити в вигляді рядка в таблиці властивостей (елементи розмітки – рядки, а властивості – стовпці). А ось термін «каскадні» вимагає детальнішого пояснення.

По-перше, існує ієрархія елементів розмітки (дерево об’єктів на сторінці). По-друге, властивості цих об’єктів можуть наслідуватися. Таким чином, у дереві об’єктів утворюється гілка, яка веде до листка дерева – елементу розмітки, наприклад, елементу списку чи параграфу. Його властивості визначаються елементами розмітки, в які вкладено елемент, та описаннями стилів для даного елементу. Розглянемо приклад наведений на рис. 8.1:

<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><LI>другий елемент списку</LI></UL> Список зміщено відносно другого розділу на 10 пікселів, а відносно поточного параграфу – на 30 пікселів. Перший рядок не є рядком початку параграфу, тому на нього відступ не розповсюджується (тільки в Netscape).</DIV></DIV>

Рис. 8.1. Приклад наслідування

Отже, відступи відраховуються відносно елементу, в який вкладено поточний елемент. Усі параметри, які не були перевизначені в поточному елементі, наслідуються із старшого за ієрархією елементу. Останнє добре ілюструється в використанні стилів відображення списку, який вкладено в розділ і тому відображається курсивом.

Коли пояснення деякого феномену html-розмітки є складним, є зміст скористатися наведеною нижче графічною схемою побудови сторінки (рис. 8.2).

Рис. 8.2. Графічна схема побудови сторінки

При використанні стилів діють такі правила старшинства стилів:

· спочатку застосовуються стилі браузера за промовчанням;

· стилі браузера за промовчанням перевизначаються прилінкованими стилями (елемент LINK заголовку документу);

· прилінковані стилі перевизначаються описаннями стилів в елементі STYLE;

· стилі елемента STYLE перевизначаються атрибутом STYLE в будь-якому з елементів розмітки.

Не всі атрибути стилю можуть наслідуватися. Наприклад, «набивка» (відступ елементу від його меж) елемента BODY не унаслідується вкладеними в нього елементами і визначається за промовчанням чи прописується для кожного елементу окремо. Алгоритми наслідування у різних браузерах різні, тому для одноманітності відображення елементів слід прописувати стиль за максимумом атрибутів.

Питання для самоперевірки

1. Дайте визначення каскадних таблиць стилів.

2. Назвіть параметри форматування, які можна задавати за допомогою стилів.

3. Які способи використання CSS Ви знаєте?

4. У якому місці web-сторінки записуються вбудовані CSS?

5. Де розташовується опис зовнішніх CSS?

6. У якому місці сторінки описуються вбудовані CSS?

7. Яка основна перевага каскадних таблиць стилів?

8. Яке розширення повинен мати файл з описом зовнішніх CSS?

9. Для чого використовуються класи?

10. Яка зона дії вбудованих CSS?

11. Яка зона дії впроваджених CSS?

12. Яка зона дії зовнішніх CSS?

13. Що таке стиль?

14. Чому таблиці стилів називають каскадними?

15. Який тип CSS слід використовувати, якщо передбачається зміна формату відразу декількох сторінок?

16. Який з трьох типів CSS слід вважати найменш перспективним?

17. Як виконати групування селекторів?

18. Які правила старшинства стилів діють при використанні стилів?

19. Як у загальному вигляді записати синтаксис описання стилів?

Лекція 9
Тема: Оформлення тексту та списків за допомогою CSS. Кольори та фонові зображення CSS

План:

1. Блочні та рядкові елементи.

1.1. Елемент DIV.

1.2. Елемент SPAN.

2. Оформлення блоку тексту.

3. Управління кольором в CSS.

4. Оформлення тексту та списків.

Дата добавления: 2014-01-04