Визначення каскадних таблиць стилів.
Каскадні таблиці стилів (CSS) - це технологія визначення та з’єднання стилів з HTML-сторінкою.
Для керування форматом однієї HTML-сторінки можливо використати декілька таблиць стилів. При перегляді HTML-сторінки браузер по визначеним правилам будує пріоритетність, "каскад", використання цих таблиць.
Стиль - це все те, що визначає зовнішній вигляд HTML-сторінки при її відображенні в вікні браузера.
За допомогою стилів можливо змінювати більшість властивостей тегів HTML-сторінки. Наприклад для таблиці можна змінити шрифт, колір фону, стиль, товщину та колір меж, видимість рядків та комірок, тощо. Форматування тегу за допомогою стилів дещо нагадує зміну атрибутів тегу, але можливості стилів набагато ширші.
Таблиця стилів - це шаблон, який керує форматуванням тегів HTML-сторінки.
Концепція таблиці стилів для HTML-сторінки схоже на використання стилів в текстовому редакторові Microsoft Word. Змінити зовнішній вигляд документу Word можливо простою зміною з’єднаних з ним стилів. Таким же чином змінити зовнішній вигляд HTML-сторінки можливо за допомогою зміни з’єднаної з нею таблиці стилів. Наприклад, для відображення тексту всіх абзаців червоним кольором на чорному фоні необхідно в таблиці визначити правило, показане на рис. 5.1.
Рис. 5.1 Приклад запису правила таблиці стилів.
Правило каскадних таблиць стилів складається із селектора та однієї або декількох декларацій. Кожна декларація складається із властивості та її величини, розділених знаком :та закінчується ;.В прикладі, показаному на рис. 5.1 селектором є тег P та визначено дві декларації, що записані в фігурних дужках. Перша декларація color:red; друга background-color: black;. Перша декларація задає колір шрифта (властивість color) як червоний (значення red). Друга декларація задає колір фону (властивість background-color:) як чорний (значення black). Запис декларація може бути реалізований тільки буквами англійського алфавіту та арабськими цифрами і не чуттєвий до регістру.
З’єднати HTML-сторінку з таблицею стилів можливо за допомогою:
1. Зв’язування - дозволяє використовувати одну таблицю стилів для форматування декількох HTML-сторінок. При цьому таблиця стилів зберігається в окремому текстовому файлі з розширенням css. Зв’язування реалізується за допомогою тегу link, визначеному в розділі head. Наприклад, визначимо стиль, що задає чорний фон HTML-сторінки.
HTML код на сторінці:
<head><link rel="stylesheet" type="text/css" href="hi.css">
Правило стилю записане в файлі hi.css:
body {background-color: black;}
Особливістю запису правила стилю в файлі з розширенням css є те, що тег <style> не використовується.
2. Впровадження - дозволяє задати всі правила таблиці стилів безпосередньо в самій HTML-сторінці. Для цього також використовується тег link, визначений в розділі head:
<head><style type="text/css"> hr { width: 120px; }</style>
На цій HTML-сторінці всі лінії визначені за допомогою тегу hr будуть мати довжину 120 пунктів.
3. Впровадженняв тег документу - дозволяє змінювати форматування конкретних елементів HTML-сторінки. Такий стиль інколи називають інлайновим. Наприклад:
<td style="background-color: black; color: red;">
Текст, розміщений в цій комірці, відображається червоним кольором на чорному фоні.
</td>.
При впровадженні в тег документу запис стилю має деякі особливості:
- Селектором є сам тег;
- Використовується параметр style, що є в кожному тезі;
- Визначення повинні бути в одинарних, або подвійних лапках.
Дата добавления: 2015-08-21; просмотров: 1365;