Способи застосування css

Під способами застосування CSS ми в даному розділі розуміємо форму декларування стилю на HTML-Сторінці й форму зв'язування опису стилю відображення елемента розмітки із самим елементом. Мова йде про те, де й у якій формі автор сторінки (або дизайнер) описує стиль, і як і в якій формі на нього посилається.

Отже, розрізняють чотири способи застосування стилів:

1. перевизначення стилю в елементі розмітки;

2. розміщення опису стилю в заголовку документа в елементі STYLE;

3. розміщення посилання на зовнішній опис через елемент LINK;

4. імпорт опису стилю в документ.

Перевизначення стилю

<H1 STYLE="font-weight:normal;

font-style:italic;

font-size:10pt;">

Заголовок першого рівня

</H1>

Атрибут style можна застосувати усередині будь-якого елемента розмітки. Наприклад, ми можемо через style визначити ширину й вирівнювання елемента hr (горизонтальне отчеркивание):

<HR STYLE="width:100px;">

Очевидно, що не всі параметри стилю можна встановити для конкретного елемента розмітки. Про типи елементів і відповідних параметрів стилів ми поговоримо в розділі "Поняття блокового й строкового елементів".

Тут же потрібно відзначити наступне: стилі розроблені в першу чергу для керування відображенням тексту. Не слід захоплюватися стилями при керуванні відображенням нетекстових елементів HTML-Розмітки.

Елемент style

Застосування елемента STYLE - це основний спосіб впровадження каскадних таблиць стилів у тканину HTML-Документа. Крім керування відображенням елементів розмітки, елемент STYLE дозволяє описувати стильові властивості елементів, які можна змінювати при програмуванні на JavaScript.

Елемент STYLE дає можливість визначити стиль відображення для:

1. стандартних елементів HTML-Розмітки;

2. довільних класів (селектор   CLASS);

3. НTML-Об'єктів (селектор   ID).

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

Поняття селектора, застосування селекторів і формальний синтаксис CSS ми обговоримо в розділах "Синтаксис" і "Спадкування й перевизначення".

Стандартні елементи розмітки описуються в елементі STYLE у такий спосіб:

<HEAD>

<STYLE>

p { color:darkred;text-align:justify;

   font-size:8pt; }</STYLE>

</HEAD>

<BODY>

...

<P>

Цей параграф ми використовуємо як приклад

застосування опису стилю для стандартного

елемента HTML-Розмітки.

</P>

...

</BODY>

Тепер всі параграфи документа будуть відображатися стилем з елемента STYLE, якщо тільки стиль не буде яким-небудь способом перевизначений. В STYLE можна визначити стиль будь-якого елемента розмітки.

Посилання на зовнішній опис

Посилання на опис стилю, розташованого за межами документа, здійснюється за допомогою елемента LINK, що розміщають в елементі HEAD. Зовнішній опис може являти собою файл, що містить опис стилів. Опис стилів у цьому файлі буде по синтаксисі в точності збігатися зі змістом елемента STYLE.

Нижче наведений приклад посилання на зовнішній опис стилів:

<LINK TYPE="text/css" REL="stylesheet"

     HREF="http://snu.edu.ua/my_css.css">

Тут важливі значення атрибутів REL і TYPE. Атрибут REL повинен мати значення stylesheet. Type може приймати значення text/css або text/javascript. Другий тип опису стилів уведений Netscape. Його ми в даному навчальному курсі не обговорюємо.

Атрибут HREF задає універсальний локатор ресурсу (URL) для зовнішнього файлу опису стилів. Це може бути посилання на файл із будь-яким ім'ям, а не тільки на файл із розширенням *.css.