Додавання CSS

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

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

Найпотужніший і зручний спосіб визначення стилів і правил для сайту. Стилі зберігаються в окремому файлі, який може бути використаний для будь-яких веб-сторінок. Для підключення таблиці пов'язаних стилів використовується тег <LINK> в заголовку сторінки (приклад 1).

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

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
<Link rel = "stylesheet" type = "text / css" href = "mysite.css">
<Link rel = "stylesheet" type = "text / css" href = "http://www.mysite.ru/main.css">
</ Head>
<Body>
<H1> Hello, world! </ H1>
</ Body>
</ Html>

Шлях до файлу зі стилями може бути як відносним, так і абсолютним, як показано в даному прикладі.

Переваги даного способу

  1. Використовується один файл зі стилем для будь-якої кількості веб-сторінок, також можливо його застосовувати на інших сайтах.
  2. Можна змінювати таблицю стилів без модифікації веб-сторінок.
  3. При зміні стилю в одному єдиному файлі, стиль автоматично застосовується до всіх сторінок, де є на нього посилання. Безсумнівно, зручно. Вказуємо розмір шрифту в одному тільки місці, і він змінюється на всіх сто або більше веб-сторінках нашого сайту.
  4. Файл із стилем при першому завантаженні поміщається в кеш на локальному комп'ютері, окремо від веб-сторінок, тому завантаження сайту відбувається швидше.

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

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

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

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
<Style type = "text / css">
H1 {
font-size: 120%; /* Розмір шрифту */
font-family: Verdana, Arial, Helvetica, sans-serif; / * Сімейство шрифту * /
color: # 336; / * Колір тексту * /
}
</ Style>
</ Head>

<Body>
<H1> Hello, world! </ H1>
</ Body>
</ Html>

В даному прикладі показано зміна стилю заголовка <H1>. На веб-сторінці тепер достатньо вказати тільки цей тег і стилі будуть додані до нього автоматично.

внутрішні стилі

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

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

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
</ Head>
<Body>
<H1 style = "font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 336"> Hello, world! </ H1>
</ Body>
</ Html>

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

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

Приклад 4. Поєднання різних методів підключення стилів

Дійсний HTML
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Стилі </ title>
<Style type = "text / css">
H1 {font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
</ Style>
</ Head>

<Body>
<H1 style = "font-size: 36px; font-family: Times, serif; color: red;"> Hello, world! </ H1>
<H1> Hello, world! </ H1>
</ Body>
</ Html>

У наведеному прикладі перший заголовок задається червоним кольором розміром 36 пікселів, а наступний - зеленим кольором і іншим шрифтом.

Copyright що кредитують © www.htmlbook.ru