Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
PI_lektsii_2016.doc
Скачиваний:
1
Добавлен:
01.07.2025
Размер:
6.12 Mб
Скачать

3.2 Додавання стилю на веб-сторінку

Для додавання стилів на веб-сторінку існує кілька способів, які розрізняються своїми можливостями і призначенням.

3.2.1. Таблиця пов'язаних стилів

При використанні таблиці пов'язаних стилів опис селекторів та їх властивостей розташовується в окремому файлі, як правило, з розширенням css, а для зв'язування документа з цим файлом застосовується тег <LINK>. Даний тег поміщається в контейнер <HEAD>.

Приклад підключення таблиці пов'язаних стилів:

...

<head>

<link rel="stylesheet" type="text/css" href="mysite.css">

<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">

</head>

Значення параметрів тега <LINK> - rel і type залишаються незмінними, як наведено в даному прикладі. Параметр href задає шлях до CSS-файлу, він може бути заданий як відносно, так і абсолютно. Таким чином можна підключати таблицю стилів, яка знаходиться на іншому сайті.

3.2.2 Таблиця глобальних стилів

При використанні таблиці глобальних стилів властивості CSS описуються в самому документі і зазвичай розташовуються в заголовку веб-сторінки. За своєю гнучкості і можливостям цей спосіб додавання стилю поступається попередньому, але також дозволяє розміщувати всі стилі в одному місці. В даному випадку, прямо в тілі документа, за допомогою контейнера <STYLE>.

Приклад використання таблиці глобальних стилів:

<head>

<style type="text/css">

p {

font-size: 110%;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

</style>

</head>

Зауваження. Таблиця глобальних стилів може розміщуватися не тільки всередині контейнера <HEAD>, але також в будь-якому місці коду HTML-документа.

3.2.3 Внутрішні стилі

Внутрішній стиль є по суті розширенням для одиночного тега використовуємого на веб-сторінці. Для визначення стилю використовується атрибут тега style, а його значення вказується за допомогою мови таблиці стилів.

Приклад використання внутрішніх стилів:

<body>

<p style="font-size: 110%; font-family: Verdana, Arial, Helvetica, sans-serif;">Текст</h1>

</body>

Зауваження. Внутрішні стилі рекомендується застосовувати на сайті обмежено або взагалі відмовитися від їх використання. Справа в тому, що додавання таких стилів збільшує загальний обсяг файлів, що веде до підвищення часу їх завантаження в браузері, і ускладнює редагування документів для розробників.

Всі описані методи використання CSS можуть застосовуватися як самостійно, так і в поєднанні один з одним. В цьому випадку необхідно пам'ятати про їх ієрархії. Першим завжди застосовується внутрішній стиль, потім таблиця глобальних стилів і в останню чергу таблиця пов'язаних стилів.

3.3 Синтаксис css

Спосіб запису CSS відрізняється від форми використання тегів HTML і в загальному вигляді має наступний синтаксис :

Селектор { властивість1: значення; властивість2: значення; ... }

Селектором називається ім'я стилю, в якому вказані параметри форматування. Селектори діляться на кілька типів: селектори тегів, ідентифікатори, класи та ін. Після вказівки селектора йдуть фігурні дужки, в яких записується необхідне стильова властивість, а його значення вказується після двокрапки. Параметри розділяються між собою крапкою з комою. CSS не чутливий до регістру, перенесення рядків, відступ і символів табуляції, тому форма запису залежить від бажання розробника. Імена селекторів обов'язково повинні починатися з символу (a-z, A-Z) і можуть містити в собі цифри.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]