2 Визначення стилів через класи та ідентифікатори
Існує ще два варіанти визначення стилів: через класи та ідентифікатори.
Класи. В тому випадку, коли необхідно для одного і того ж тега визначити різні правила форматування, треба використовувати класи тегів.
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css">
<!--
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>
<style type="text/css">
<!--
#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="iddate">Зима.</p>
<p id="idivent">Святкування Нового року.</p>
<p id="iddate">Літо.</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).
word-spacing – відстань між словами із стандартними значеннями довжини (pt, px, cm, mm).
О
крім
стандартних одиниць вимірювання довжини
px,
pt
(рівний 0,36 мм), mm,
cm,
може використовуватися em
(1em
рівний ширині букви m
в
шрифті, що використовується), ex
(1ex
рівний висоті шрифту), px
(1px
рівний ширині
пікселя).
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css">
<!--
p.class1
{
text-align:justify;
text-indent:20pt;
color:#c0c0c0;
background-color:#000000;
}
.class2 { text-decoration:underline; }
.class3 { letter-spacing:5; }
.class4 { text-transform:uppercase; }
-->
</style>
</head>
<body>
<b>Приклад</b>
<p class="class1">Текст абзацу вирівнюється з обох боків, має відступ першого рядка 20 пунктів і використовує білий колір символів на чорному фоні.</p>
<p>В тексті абзацу <span class="class2">використовується підкреслення, </span>
<span class="class3"> збільшення відстані між символами</span>
<span class="class4">, а також переведення символів у верхній регістр.</span></p>
</body>
</html>
4 КОЛІР І ФОН
color – колір тексту – будь-яке значення, відповідне стандарту.
background-color – колір фону – будь-яке значення, відповідне стандарту.
background-image:URL("URL") – фонове зображення – будь-яке значення URL, відповідне стандарту.
background-repeat – напрям повторення фонового зображення. Можливі значення: repeat – повторення по горизонталі і вертикалі (за замовчанням); repeat-x – повторення тільки по горизонталі; repeat-у – повторення тільки по вертикалі; no-repeat – відсутність повторення.
background-position – положення фонового зображення щодо верхнього лівого кута елемента, що містить його. Можливі значення: відстань по горизонталі, відстань по вертикалі в стандартних одиницях довжини або в процентному співвідношенні. Значення 50% по горизонталі і 50% по вертикалі дає той, що розташовує фонового зображення по центру. Розміщення фонового зображення може бути також top – по верхньому краю; center – по центру; bottom – по нижньому краю; left – по лівому краю; right – по правому краю.
background-attachment – прокрутка фонового зображення разом з документом. Можливі значення: scroll – прокрутка (за замовчанням); fixed – фіксація зображення у вікні браузера.
Для опису відразу всіх параметрів фону можна використовувати властивість background: background-color background-image background-repeat background-attachment background-position
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css">
<!--
body {background-color: pink;}
p
{
color: #ffffcc;
background-image: url("64.jpg");
}
-->
</style>
</head>
<body>
<b>Приклад</b>
<p>Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій. Текст абзацу на фоні зображення, що повторюється по вертикалі і горизонталі. Фон для body - синій.
</p>
</body>
</html>
