Способи використання таблиць стилів

Дата добавления: 2015-07-09; просмотров: 651; Нарушение авторских прав

Існує чотири способи використання у документі таблиці стилів:

зв'язування — дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок;

впровадження — дозволяє задавати всі правила таблиці стилів у самому документі;

імпортування —.дозволяє вбудовувати у документ таблицю стилів, розміщену на сервері;

вбудовування у дескриптори документа — дозволяє змінити форматування конкретних елементів сторінки.

Зв'язування дозволяє зберігати таблицю стилів у окремому файлі і приєднувати її до документів за допомогою дескриптора <1іnк> у розділі <head>. Наприклад:

Тут rel="stylesheet" визначає, що зв'язується з документом таблиця стилів. Значення параметра type="text/css" вказує, що тип файлу текстовий, і що у файлі міститься опис таблиці стилів. Параметр href тега <link> вказує на місце знаходження файла, що містить таблицю стилів.

Впровадження: використовується дескриптор <STYLE>, параметр якого TYPE повинен дорівнювати "text/ess". Таблиця стилів обмежується коментарем (<! -- -->). Це робиться для того, щоб браузери, які «не вміють» працювати зі стилями, ігнорували їх.

Наприклад:

<HEAD>

<! --

В {text-transform: uppercase;}

P {background-color: grey; text-align: center}

--></STYLE>

</HEAD>

У прикладі визначено таблицю стилів для дескрипторів <В>, <Р>: текст, що міститься у контейнері <В> </В>, буде записано у верхньому регістрі; текст, що міститься у контейнері <Р> </Р>, буде відображуватись сірим кольором та центруватися.

Імпортування: за допомогою дескриптора <STYLE> можна імпортувати зовнішню таблицю стилів, визначивши значення властивості ^import, яке повинно містити URL таблиці стилів: (@import: url (mystyle.css).

Вбудовування у декскриптор: використовується для визначення стилю об'єкта, що форматується певним дескриптором, за допомогою параметра style.

<Н1 STYLE="color: red">Заголовок відображується червоним кольором </Н1>

Для зменшення розміру CSS використовується групування — різні селектори записуються через кому. Наприклад:

Н1,Н2,НЗ: {font-family: Arial};

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

Вкладені елементи наслідують правила форматування батьківського елемента.

<== предыдущая лекция	\|	следующая лекция ==>
Каскадні таблиці стилів (CSS)	\|	Використання селекторів