Файл: Лекція 9 CSS.doc

Таблиця стилів складається з правил, а правило – з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого html-файлу.

Опис стилю – це послідовність пар <властивість> : <значення>, які записують через крапку з комою та охоплюють фігурними дужками.

Отже, загальний вигляд правила такий:

Список тегів {

властивість 1 : значення 1;

властивість 2 : значення 2;

…;

властивість N : значення N;

}

Приклад правила для одного тега:

Р {color:red}.

Браузер відтворить на екрані тексти всіх абзаців червоним кольором.

Ось приклад складнішого правила для списку тегів:

Н3, LI {

color:green;

font-family:pragmatica;

font-size:16pt;

text-align:left;

border-style:ridge;

border-width:2mm;

}

Браузер виведе всі заголовки третього рівня Н3 і елементи списків LI зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить рамкою товщиною 2 мм з видавленим контуром (ridge).

Існує три способи застосування таблиць стилів в Web-документі:

зв’язування – дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок;
впровадження – дозволяє задавати всі правила таблиці стилів у самому документі;
вбудовування – дозволяє змінити форматування конкретних елементів сторінки.

Зв’язування дозволяє зберігати таблицю стилів у окремому файлі і приєднувати її до документів за допомогою тега <link> у розділі <head>.

Приклад:

Файл з ім’ям my_style.css містить опис стилів:

body { background:#000000; color:#ffffff; }

a { color:#ff0000; text-decoration:none; }

Документ HTML, який посилається на цей файл, повинен містити в розділі head наступне посилання:

<head>

<link rel="stylesheet" type="text/css" href="my_style.css">

</head>

Тут rel="stylesheet" визначає, що зв’язується з документом таблиця стилів.

Значення type="text/css" вказує, що тип файлу текстовий, і що у файлі міститься опис таблиці стилів.

Параметр href тега <link> вказує на місце знаходження файла, що містить таблицю стилів.

Для впровадження використовується тег <style>, параметр якого type повинен дорівнювати "text/css". Таблиця стилів обмежується коментарем (). Це робиться для того, щоб браузери, які «не вміють» працювати зі стилями, ігнорували їх.

Приклад:

<html>

<head><title>Web-документ</title>

<!--

body { background:#000000;color:#ffffff; }

h1 { font:14pt verdana; color:yellow; }

-->

</style>

</head>

<body>

<b>Приклад</b>

Впроваджений стиль для розділу body забезпечує виведення білих символів на чорному тлі<br>

<h1>Для виведення заголовка використовується впроваджений стиль:шрифт verdana розміром 14 пунктів і жовтим кольором</h1>

</body>

</html>

Вбудовування у тег використовується для визначення стилю об’єкта, що форматується певним тегом, за допомогою атрибута

style="властивість1:значення1; …; властивістьN:значенняN;".

Два елементи <div> (розділ) <span> (інтервал) є універсальними елементами контейнерами і дозволяють застосовувати стиль до фрагментів тексту чи абзацу.

Приклад:

<html>

<head><title>Web-документ</title>

Приклад 1

<p style="font-family:verdana;font-size:14pt">Для виведення тексту абзацу застосований шрифт verdana розміром 14 пунктів</p>

Приклад 2

<div style="font:14pt garamond">Для виведення тексту розділу застосований шрифт garamond розміром 16 pt</div>

Приклад 3

<span style="color:#336666; font-size:22">Для виведення фрагмента тексту використовується колір,</span> цей текст виводиться без оформлення

</body>

</html>

Можна використовувати всі три способи стилів, і браузер інтерпретує їх в наступному порядку: зв’язаний – впроваджений – вбудований.

2 Визначення стилів через класи та ідентифікатори

Існує ще два варіанти визначення стилів: через класи та ідентифікатори.

Класи. В тому випадку, коли необхідно для одного і того ж тега визначити різні правила форматування, треба використовувати класи тегів.

Приклад:

<html>

<head><title>Web-документ</title>

<!--

p.big

{

text-align:center;

font-style:italic;

font-size:50;

}

p.middle

{

text-align:left;

color:green;

font-size:40;

}

p.small

{

text-align:right;

text-decoration:underline;

font-size:30;

}

-->

</style>

</head>

<body>

<b>Приклад<b/>

<p class="big">Великий абзац</p>

<p class="middle">Середній абзац</p>

<p class="small">Малий абзац</p>

</body>

</html>

Якщо треба створити клас, який не належить ні одному із тегів, то необхідно в описі класу опустити визначення тега, а потім в самому документі використовувати будь-які теги з атрибутом class.

Приклад:

.green { color:green; }

.red { color:red; }

<div class="green">Блок тексту, який написаний зеленим кольором.</div>

<p class="red">Абзац, який написаний червоним кольором.</p>

Ідентифікатори. Окрім класів стилі можна описувати з використанням ідентифікаторів (#id). Параметр id задає унікальне ім’я елемента, яке використовується для посилань на нього у сценаріях та таблицях стилів. Для цього перед ім’ям записується символ #.

Слід зауважити, що при використанні ідентифікаторів необхідно також застосовувати закриваючі теги, оскільки якщо залишити їх відкритими, можна абсолютно несподівано оформити текст, який знаходиться нижче, до якого слід було застосувати інший стиль.

Приклад:

<html>

<head><title>Web-документ</title>

<!--

#iddate

{

font-size:30;

font-weight:bold;

font-style:italic;

color:black;

}

#idivent

{

font-size:20;

color:black;

margin-left:30;

}

-->

</style>

</head>

<body>

<b>Приклад<b/>

<p id="iddate">Дата написана одним шрифтом.</p>

<p id="idivent">А подія - іншим.</p>

<p id="idivent">Святкування Нового року.</p>

<p id="idivent">ВІДПОЧИВАТИ!!!</p>

</body>

</html>

Ідентифікатори призначені для сумісного використання з класами в якості доповнення останніх. Використовуючи таку комбінацію, користувач може створювати web-сторінки, які легко форматувати. Однак таке сумісне використання класів і ідентифікаторів може призвести до деякої плутанини в початковому коді документа.

В тому випадку, якщо і в класі, і в ідентифікаторі визначений один і той же параметр деякого тега, то браузер віддасть перевагу дії того параметра, який визначений в ідентифікаторі.

3 Текстові властивості

text-align – вирівнювання тексту. Можливі значення: left – по лівому краю, right – по правому краю, сеnter – по центру, justify – з обох боків.

text-indent – відступ в першому рядку блоку (абзацу, розділу) із стандартними значеннями довжини (pt, px, cm, mm).

text-decoration – оформлення тексту підкресленням. Можливі значення: none – відсутній (за умовчанням); underline – підкреслення; overline – лінія над текстом; line-through – перекреслювання; blink – мерехтіння.

text-transform – переведення букв у верхній або нижній регістр. Можливі значення: none – відсутній (за замовчанням); capitalize – перша буква кожного слова стає прописною; uppercase – переводить всі букви у верхній регістр; lowercase – переводить всі букви в нижній регістр.

text-shadow – встановлення ефекту затінювання тексту. Можливі значення: none – відсутній (за замовчанням); color left top radius – колір затінювання з відстанями зліва (справа), вниз (вгору) від тексту і радіусом нерізкості.

letter-spacing – відстань між символами тексту із стандартними значеннями довжини (pt, px, cm, mm, em,ex).