2015-10-22
989
Таблиця зв'язаних стилів. При використанні таблиці зв'язаних стилів опис селекторів та їхніх властивостей міститься в окремому файлі, як правило, з розширенням css, а для зв'язування документа із цим файлом застосовується тег <lіnk/>. Даний тег поміщується в контейнер <head></head>.
<link rel="stylesheet" type="text/css" href = "mysite.css"/>
Значення параметрів тегу <lіnk/> - rel й type залишаються незмінними, як наведено в даному прикладі. Аргумент href задає шлях до CSS-файлу, він може бути заданий як відносно, так і абсолютно. Зверніть увагу, що таким чином можна підключати таблицю стилів, що знаходиться на іншому сайті.
Використання таблиці зв'язаних стилів є найбільш універсальним і зручним методом додавання стилю на сайт. Адже стилі зберігаються в одному файлі, а в HTML-документах вказується тільки посилання на нього.
Таблиця глобальних стилів. При використанні таблиці глобальних стилів властивості CSS описуються в самому документі й звичайно розташовуються в заголовку веб-сторінки. За своєю гнучкістю й можливостями цей спосіб додавання стилю поступається попередньому, але також дозволяє розміщувати всі стилі в одному місці. У цьому випадку, прямо в тілі документа, за допомогою контейнера <style></style>.
|
|
|
<style type="text/css">
...
</style>
В даному прикладі визначено стиль, що потім можна повсюдно використати на даній веб-сторінці. Таблиця глобальних стилів може розміщуватися не тільки всередині контейнера <head></head>, але також у будь-якому місці коду HTML-документа.
Внутрішні стилі. Внутрішній стиль є по суті розширенням для одиночного тегу, що використовується на веб-сторінці. Для визначення стилю використовується атрибут тегу style, а його значення вказуються за допомогою мови таблиці стилів.
<h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336"> Заголовок </h1>
В даному прикладі стиль тегу <h1> задається за допомогою параметра style, у якому через крапку з комою перераховуються стильові атрибути. Внутрішні стилі рекомендується застосовувати на сайті обмежено або взагалі відмовитися від їхнього використання. Справа в тому, що додавання таких стилів збільшує загальний обсяг файлів, що веде до підвищення часу їхнього завантаження в браузері, і ускладнює редагування документів для розроблювачів.
Всі описані методи використання CSS можуть застосовуватися як самостійно, так і у поєднанні один з одним.
