Ідентифікатори
Ідентифікатор («ID селектор») визначає унікальне ім’я елемента, яке використовується для зміни його стилю і звернення до нього через скрипти.
Синтаксис використання ідентифікатора наступний.
#Імя ідентифікатора { властивість1: значення; властивість2: значення; ... }
На відміну від класів, ідентифікатори повинні зустрічатись в коді лише один раз.
Звернення до ідентифікатора виконується аналогічно класам, але в якості ключового слова в тегу використовується параметр id, значенням якого є ім’я ідентифікатора. Символ решітки при цьому вже не вказується.
Приклад 12. Використання ідентифікатора
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ідентифікатори</title>
<style type="text/css">
#help {
position: absolute; /* Абсолютне позиціювання */
left: 160px; /* Положення елементу від лівого краю */
top: 50px; /* Положення від верхнього краю */
width: 225px; /* Ширина блоку */
padding: 5px; /* Поля навколо тексту */
background: #f0f0f0; /* Колір фону */
}
</style>
</head>
<body>
<div id="help">
Для відвідувачів у місті відкриті двері понад 40 музеїв. Серед них: Львівський історичний музей, другий за розмірами історичний музей України; Національний музей, одна з найвизначніших в Україні скарбниць українського мистецтва, заснована митрополитом Шептицьким; Львівська галерея мистецтв, один з найбагатших музеїв України, очолюваний відомим мистецтвознавцем Борисом Возницьким; Етнографічний музей, єдиний такого типу в Україні; Національний меморіал «Тюрма на Лонцького», перша в Україні в'язниця-музей.
</div>
</body>
</html>
Хід роботи.
Створіть папку «Лабораторна робота №3».
Скопіюйте в неї папки з робочими файлами (папки «pictures», «img» та «screenshots»), які отримаєте від викладача. А також:
index.html та culture.html – дві html-сторінки, до яких необхідно буде створити css;
style-example.css – шаблон для створення стилю, який ви повинні змінювати і доповнювати в залежності від потрібного результату.
body{
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#333;
background:#000;
}
#content {
width:960px;
margin:0 auto;
background:#ffffff;
padding:20px 30px;
}
h1 {}
h2 {}
a {}
a:hover {}
p {}
img {
display:block;
}
img.img-left {
float:left;
}
img.img-right{
float:right;
}
ul {}
ul li {
list-style:none;
background:url(img/list-item-dot-blue.png) no-repeat 0 7px;
padding-left:15px;
}
ul ul {}
ul li li {}
table {
border-collapse:collapse;
}
table th {}
table td {}
table caption {}
div.brief {}
Створений вами стиль зберегти із назвою style-прізвище_студента.css та підключити до html-сторінок:
<link rel="stylesheet" type="text/css" href="style-прізвище_студента.css" media="screen, projection" />.
В результаті виконання роботи, запропоновані вам сторінки мають відображатися в браузері максимально схоже на взірці вашого варіанту, які знаходяться в каталозі «screenshots».
Дякую за роботу.