Технологія сайтобудування в інформаційній сфері (стр. 9 )

Використання псевдокласів

У процесі роботи з гіперпосиланнями використовують псевдокласи дескриптора <А>:

<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	2	3
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	h1 {font-weight: bold}
font-size	розмір шрифту	р {fnt-size :10pt}
font	одночасне встановлення властивостей шрифту	р {font: italic 12pt serif}
color	колір тексту	p {color: blue}
background-color	колір фону	body {background-color: blue}
background-image	фонове зображення	body{background-image: url(/image/image1.gif)}

1	2	3
text-decoration	тип підкреслювання (overline – верхнє підкреслення, under-line – нижнє підкреслення, line-through – закреслений текст)	h1 {text-decoration: underline}
text-align	вирівнювання тексту (left, right, center)	h2 {text-align: center}
vertical-align	вирівнювання тексту по вертикалі (top – згори, middle – посередині, bottom – знизу)	h2 {vertical-align:middle}
-transform	зображення усіх символів тексту у верхньому регістрі (uppercase) або у нижньому (lowercase)none – відміна ви-користання параметра	h2 {text-transform: uppercase}
margin	значення полів (верхнє, праве, нижнє, ліве)	body {margin: 10}
padding	відступи від елемента	img { padding: }
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 }

Хід заняття

1. Ознайомитись з темою та метою заняття, вивчити основні теоретичні положення.

2. Отримати у викладача індивідуальне завдання за своїм варіантом.

Приклад.

Створити впроваджену CSS, яка б містила значення таких властивостей:

– колір фону, колір символів;

– пріоритетність використання шрифтів;

– значення полів;

– відображення певним кольором гіперпосилань та зміну кольору гіперпосилання при наведенні на нього вказівника миші.

HTML-документ міг би мати такий вигляд:

<НТМL>