До того як
появилось CSS всі документи HTML були
відформатовані за допомогою спеціальних тегів. Всередині такого документу
були визначені всі можливі команди і
атрибути, включаючи шрифти, розмір, колір.
Якщо у нас
сайт створений за допомогою HTML без CSS то кожну сторінку потрібно форматувати
окремо.
Роль CSS така що веб-дизайнери можуть створювати
єдину таблицю стилів (stylesheet) для обслуговування всього веб-сайту. Всі
сторінки HTML будуть виконувати єдиний набір інструкцій CSS, а код HTML при
цьому не буде перевантажений тегами для форматування об'єктів, які
відображаються в контенті.
Крім того
допускається одночасно використання декількох способів включення таблиць стилів
в HTML–документ.
Існує чотири
способи включення таблиць стилів в
HTML–документ.
1.
Зв’язування – таблиця стилів міститься в
окремому файлі. Зовнішній файл таблиць стилів – застосовується для форматування
декількох веб-сторінок одного проекту за допомогою одної таблиці стилів. Для
цього використовують тег <Link>. Для того щоб реалізувати цей спосіб
необхідно помістити вказаний тег з посиланням на таблицю стилів в описовій
частині <head> нашого документу. Таблиця стилів представляє собою окремий файл.
Приклад: <link href= “style.css” rel=
“stylesheet” type= “text/css” >
2.
Впровадження (використання внутрішніх таблиць
стилів) – використовується для того щоб задати правило форматування в самому
документі, при чому ці правила застосовуються тільки для тієї сторінки, в якій
вони прописані. Для цього використовують тег <STYLE>. Для реалізації цього
способу потрібно прописати всі правила форматування, і заключити їх в теги
<style type=”text/css”> і </style>, які вставляються в описовій
частині веб=документу <head>.
Приклад: <style type=”text/css”>
h1 {
font–family:Tunga;
font–size:10 Px;
color: Blue
text–align: center;
}
h2{
font–family:Arial;
font–size:20 Px;
color: Red
}
body{
font–family:Times New Roman;
font–size:12 Px;
color: Black
font–style: italic;
}
</style>
В даному
випадку необхідно вставляти таблицю стилів в кожен документ веб-проекту, що
приводить до збільшення об’єму, та збільшення часу завантаження веб-сторінки. В
даному способі таблиця стилів, не є єдиним файлом форматування всих сторінок
веб-сайту, а застосовується тільки до сторінки в якій описано ці стилі в
розділі <head>.
3. Імпортування – використовується для того щоб
вбудувати в документ таблицю стилів, яка розташована на веб-сервері. Для того
щоб реалізувати цей спосіб використовують спеціальне правило CSS, яке прописують в тезі <STYLE> – @import.
Приклад:
<style type= “text/css” >
@import
URL(“style.css”);
</style>
Цей запис вказує
браузеру що таблицю стилів style.css (таблиця стилів при цьому являє собою окремий
файл) в наявному каталозі сайту. В даному випадку крім імпортованої таблиці
стилів в блоці можна прописати любі інші правила CSS які на вашу думку будуть
доповнювати і коректувати правила.
4. Вбудовування в теги документа (використання
локальних стилів) – застосовується для форматування конкретних елементів
документу, форматування всередині HTML–документа без використання файлу сss та
стилів прописаних в описовій частині документу. Для того щоб реалізувати цей
спосіб потрібно застосувати атрибут STYLE до певного тегу.
Приклад: <p style = “font–size: 14pt; color:
yellou; font–weight: bold” >Текст</p>
Даний спосіб достатньо універсальний і
простий в використанні, але його не рекомендують застосовувати, так як в такому
разі необхідно прописувати правила форматування для кожного тегу що значно
збільшує об’єм файлу.
Потрібно також зауважити що можна
використовувати всі перелічені способи в одному веб–документі, а щоб не виник
конфлікт стилів, існують правила пріоритетності. Всі таблиці стилів що використовуються
в документі мають наступну ієрархію: найвищій пріоритет мають локальні стилі,
потім стилі що прописані в описовій частині веб-документу, а потім зовнішні.
Існує також поняття користувацького
стилю, коли за допомогою налаштувань браузера можна визначити для себе
персональний стиль форматування веб-документів.
Якщо користувачу краще читати наприклад
текст шрифтом Arial, розмір 12, напівжирний, без проблем: він може визначити
для себе таблицю стилів з цим атрибутом, який буде використовуватись для всіх
сторінок, які він відвідує.
Немає коментарів:
Дописати коментар