У процесі роботи з гіперпосиланнями використовують псевдокласи дескриптора <А>:
<STYLE TYPE="text/css">
A: link {color:red} /*невідвіданий зв'язок*»/
A:visited {color:blue} /* відвіданий зв'язок*/
A:active {color:green} /*активний зв'язок*/
A:hover {color:yellow} /*зв'язок, на якому розміщено
вказівник миші*/
</STYLE>
Після приєднання такої таблиці стилів до HTML-документа усі невідвіданні гіперпосиланнл будуть відображенні червоним кольором (використовується псевдоклас link), відвідані — синім (visited), активне гіперпосилання — зеленим (active). За допомогою псевдокласу hover можна змінити колір гіперпосилання, на якому розміщено вказівник миші.
Властивості у таблицях стилів
Як зазначалося, визначення у правилі таблиці стилів складається з двох частин: властивості та її значення, які відокремлюються двокрапкою. Властивості — це певний набір характеристик селектора, які визначають його вигляд при відображенні у вікні броузера. Наведемо деякі властивості, що використовуються у таблицях стилів:
Таблиця 1.8.Властивості таблиць стилів
ВЛАСТИВІСТЬ
ПРИЗНАЧЕННЯ
ПРИКЛАДИ
font-family
Задає пріоритетний список шрифтів
body {font-family: "Times New Roman", serif}
font-style
Стиль шрифту (normal –нормальний, italic –курсив, oblique –нахилений)
h1 {font-style: italic}
font-weight
використовується для визначення товщини шрифту
(normal — нормальний, bold — напівтовстий). Використовуються і числові значення з кроком 100, починаючи від 100 і закінчуючи 900
вирівнюваня тексту по вертикалі (top — згори, middle — по середині, bottom — знизу)
h2 {vertical-align:middle}
text-transform
зображення усіх символів тексту у верхньому регістрі (uppercase) або у нижньому (lowercase)none — відміна використання параметра
h2 {text-transform:
uppercase}
margin
значення полів (верхнє, праве, нижнє, ліве)
body {margin: 10 10 20 20}
padding
відступи від елемента
img { padding: 5 5 5 7}
border-width
ширина межі
img { border-width :10}
border-color
колір межі
img { border-color:blue}
visibility
визначає, чи є елемент видимим у даний момент (visible — видимий, hidden — прихований)
img {visibility: hidden}
list-style-type
тип маркера списку (для нумерованого списку можливі значення: lower-roman — маленькі римські цифри, upper-roman — великі римські цифри, lower-alpha — маленькі латинські літери, upper-alpha — великі латинські літери. Для списку з маркерами можливі значення: disc, circle, square)
ul {list-style-type: disk}
list-style-image
URL зображення, яке буде використовуватись як зображення маркера
ol { list-style-image:
url (list.gif)}
list-style-position
позиція маркера (inside — у абзаці, outside —вліво від абзаца)
OL { list-style-image:
url (list gif); list-style-position: inside }
Приклад.
Створити впроваджену CSS, яка б містила значення таких властивостей:
— колір фону, колір символів;
— пріоритетність використання шрифтів;
— значення полів;
— відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при наведенні на нього вказівника миші.
HTML-документ міг би мати такий вигляд:
Лістинг 1.27
<НТМL>
<HEAD>
<TITLE> Приклад</TITLE>
<STYLE TYPE="text/css">
<!--
BODY { background-color:blue;
color: yellow;
font-family:"Times New Roman", serif;
margin: 10 10 20 20;}
A:link {color: red;}
A:visited {colonblue;}
A:active {color:green;}
A: hover {color:yellow; }
-->
</STYLE>
</HEAD>
<BODY>
<H1> Приклад використання CSS </H1>
<A HREF=http://www.npu.kiev.ua> НПУ ім. Драгоманова</А>
</BОDY>
</HTML>
Контрольні запитання
1.Що називають таблицею стилів?
2. Чому таблиці стилів називають каскадними?
3. Як записуються правила CSS?
4. Назвіть способи використання CSS у документі.
5. За яким пріоритетом використовуються CSS у документі?
6. Яке призначення селектора class?
7. Наведіть приклади використання параметра id.
8. Яке призначення контейнера <span>?
9. Назвіть псевдокласи дескриптора <а> та їхнє призначення?
10. Які властивості у CSS використовуються для визначення вигляду шрифту?
11. Які властивості у CSS використовуються для роботи з кольором?
12. Які властивості у CSS використовуються для встановлення значень полів?
13. Назвіть властивості, що використовуються у CSS для форматування списків.
14. Назвіть властивості, що використовуються у CSS для форматування меж.
