Практична частина. Приклад №1 (використання внутрішнього стилю )

Приклад №1 (використання внутрішнього стилю )

<HTML>

<HEAD>

<ТIТLЕ>Моя сторінка із стилями</ТIТLЕ>

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>

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>

</head>

У даному прикладі з НТМL-документом пов'язаний файл mystyles.css, у якому зберігаються усі властивості стилю форматування.

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

Властивості внутрішніх стилів знаходяться в межах того НТМL-дескриптора, формат якого необхідно змінити. Іншими словами, для того, щоб за допомогою внутрішнього стилю змінити формат, наприклад, всіх заголовків першого рівня, необхідно до кожного дескриптора <h1> додати однакові властивості стилю. У прикладі, який приведений нижче, використані ті ж властивості стилю, що і в попередніх прикладах цього уроку. Єдина відмінність полягає в тому, що в даному випадку формат двох таблиць змінений за допомогою внутрішньої таблиці стилів.

Зауваження: для внутрішніх стилів використаний не дескриптор <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.