Приклад №1 (використання внутрішнього стилю)
<HTML>
<HEAD>
<ТIТLЕ>Моя сторінка із стилями</ТIТLЕ>
<style type="text/css">
P.orange{font-family:Verbana;color:”orange”}
</STYLE>
</HEAD>
<BODY>
<P CLASS="orange">Текст, буде виділений стилем orange</P>
</BODY>
</HTML>
в даному прикладі Р - тег абзаца, orange - назва класу-стилю, яким
буде виділений даний або інший абзац.
Завдання
Створіть приклад1 за допомогою програми Notepad (Блокнот) і збережіть його у вигляді звичайного текстового файлу з розширенням html; прогляньте дію стилю в програмі-броузері, текст абзацу довільний.
Приклад №2
<html>
<hеаd>
<style type="text/css">
tаble.nav{background:aqua; text-align:justify}
tаble.rеst{background:yellow; text-align:center;соlоr:”blаск”}
</style>
</hеаd>
<body>
<table class=”nav” width=”100%”> опис елементів таблиці1
</table >
<table class=”rest” width=”50%”> опис елементів таблиці2
</table >
</body></html>
Завдання для СРС
Створити дві невеличкі таблиці з довільним описом елементів із вказаними класами прикладу №2 і дати пояснення, у зошиті, по кожному з стилів оформлення таблиць.
Зовнішні стилі
Всі властивості зовнішньої таблиці стилів зберігаються в окремому текстовому файлі з розширенням css. Пріоритетність зовнішніх таблиць стилів полягає в тому, що броузер один раз її завантажує, кешує інформацію і при необхідності звернення до неї ще раз, вже бере її не з Web-сервера, а з локального диска. При цьому скорочується час доступу до зовнішньої таблиці та з`являється зручність редагування таких таблиць.
Для того, щоб скористатися властивостями зовнішньої таблиці стилів, такий файл необхідно пов'язати з певним НТМL-документом за допомогою дескриптора <link>:
<hеаd>
<link rel = "stylesheet" href = "mystyles.css" type="text/css">
</head>
У даному прикладі з НТМL-документом пов'язаний файл mystyles.css, у якому зберігаються усі властивості стилю форматування.
Внутрішні стилі
Властивості внутрішніх стилів знаходяться в межах того НТМL-дескриптора, формат якого необхідно змінити. Іншими словами, для того, щоб за допомогою внутрішнього стилю змінити формат, наприклад, всіх заголовків першого рівня, необхідно до кожного дескриптора <h1> додати однакові властивості стилю. У прикладі, який приведений нижче, використані ті ж властивості стилю, що і в попередніх прикладах цього уроку. Єдина відмінність полягає в тому, що в даному випадку формат двох таблиць змінений за допомогою внутрішньої таблиці стилів.
<table style=" background: aqua" width="100">
<table style=" background:yellow; text-align:center; соlоr:”blасk” width="100">
Зауваження: для внутрішніх стилів використаний не дескриптор <stylе>,
а атрибут — style.
Пріоритети каскадних таблиць.
Для того, щоб не виникали конфлікти між таблицями різних рівнів, визначені пріоритети області дії.
Для Web -броузеров, найвищий пріоритет мають стилі, код яких розташований ближчим до коду дескриптора Web-сторінки. Таким чином, внутрішні стилі, які по суті являються атрибутами дескриптора, очолюють цю послідовність. Наступними в цій ієрархії є вбудовані таблиці стилів, код яких знаходиться у верхній частині НТМL документа. Найменший пріоритет мають зовнішні таблиці стилів, код яких знаходиться в окремому файлі).
Контрольні запитання
1. Яке призначення таблиці стилів?
2. Що таке каскадні таблиці стилів?
3. У чому полягає спосіб зв’язування?
4. Що таке вбудована таблиця стилів?
5. Які є способи взаємодії таблиці стилів і html-файлу?
6. У чому полягає синтаксис CSS?
7. Який атрибут використовується для вказання мови написання CSS?
8. У яких випадках застосовується тег, а в яких атрибут style?
9. З яким розширенням зберігаються файли зовнішніх стилів?
Завдання для СРС
Створити три приклади з використанням каскадних таблиць стилів:
1. З використанням вбудованого стилю.
У тілі коду вашої HTML - сторінки повинно бути не менше 3-х абзаців,
2-а заголовка 1-го рівня, один 2-го або 3-го рівня, маркований список. Визначте для сторінки і заголовків 1-го рівня фон і колір тексту одним стилем. Абзаци опишіть із використанням атрибута class, при цьому вкажіть правило вирівнювання тексту, шрифт, розмір і зображення шрифту, для заголовків 2-го і 3-го рівнів визначите свій стиль оформлення.
2. Змініть свій перший приклад за допомогою внутрішнього стилю оформлення одного з абзаців відмінним від вже наявного стилю.
Зверніть увагу на пріоритетність стилів. Додайте у приклад таблицю з використанням стилів. Відокремте таблицю від тексту горизонтальним рядком.
3. Змініть приклад №1 так, щоб ваша сторінка була оформлена з використанням зовнішнього стилю.
Свої файли відповідно назвіть Приклад1,.., Приклад3.
