Материал: Лекція 9 CSS
Лекція 11
Тема: КАСКАДНІ ТАБЛИЦІ СТИЛІВ (CSS)
План
-
ЗАСТОСУВАННЯ КАСКАДНИХ ТАБЛИЦЬ СТИЛІВ
-
ВИЗНАЧЕННЯ СТИЛІВ ЧЕРЕЗ КЛАСИ ТА ІДЕНТИФІКАТОРИ
-
ТЕКСТОВІ ВЛАСТИВОСТІ
-
КОЛІР І ФОН
-
ШРИФТИ
-
Властивості блоків тексту
-
Позиціонування і візуалізація
1 Застосування каскадних таблиць стилів
Таблиця стилів – це шаблон, який керує форматуванням тегів у web-документі. (CSS – CASCADING STYLE SHEETS)
Таблиця стилів складається з правил, а правило – з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого 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>
<style type="text/css">
<!--
body { background:#000000;color:#ffffff; }
h1 { font:14pt verdana; color:yellow; }
-->
</style>
</head>
<body>
<b>Приклад</b>
<br><br>
Впроваджений стиль для розділу 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>
<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>
