Додавання CSS

Влад Мержевич

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

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

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

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

<!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=utf-8">
  <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>Привіт, світ!</h1>
 </body>
</html>

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

Переваги цього методу

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

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

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

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

<!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=utf-8">
  <title>Стилі</title>
  <style type="text/css">
   H1 { 
    font-size: 120%; /* Розмір шрифта */
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Сімейство шрифта */
    color: #336; /* Колір тексту */
   }
  </style>
 </head>
 <body>
  <H1>Привіт, світ!</H1>
 </body>
</html>

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

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

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

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

<!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=utf-8">
  <title>Стилі</title>
 </head>
 <body>
  <H1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">
  Привіт, світ!</H1>
 </body>
</html>

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

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

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

<!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=utf-8">
  <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;">Привіт, світ!</H1>
  <H1>Привіт, світ!</H1>
 </body>
</html>

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

CSS
SEO текст: Оптимізація веб-сторінок за допомогою таблиць стилів CSS. Дізнайтеся про різні методи використання стилів: пов'язані, глобальні та внутрішні. Підключайте стилі до ваших сторінок ефективно та швидко!

Часті запитання