Понеділок, 25.11.2024, 11:05
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 3
Гостей: 3
Користувачів: 0
Форма входу
Календар
«  Грудень 2013  »
ПнВтСрЧтПтСбНд
      1
2345678
9101112131415
16171819202122
23242526272829
3031
Архів записів
Головна » 2013 » Грудень » 4 » Ідентифікатори в CSS
15:15
Ідентифікатори в CSS
Ідентифікатор (званий також «ID селектор») визначає унікальне ім'я елемента, який використовується для зміни його стилю і звернення до нього через скрипти, що дозволяє керувати стилем елемента динамічно. Синтаксис використання ідентифікатора наступний.
#Ім'я_ідентифікатора {властивість1: значення;властивість2: значення; ... }
На відміну від класів ідентифікатори повинні бути унікальні, іншими словами, зустрічатися в коді документа лише один раз. Звернення до ідентифікатора відбувається аналогічно класам, але в якості ключового слова у тега використовується параметр id, значенням якого виступає ім'я ідентифікатора (приклад 7.1). Символ решітки при цьому вже не вказується.

Приклад 7.1. Використання ідентифікатора

<!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=windows-1251">
 <title>Ідентифікатори</title>
 <style type="text/css">
 #help {
 position: absolute; /* Абсолютне позиціонування*/ 
left: 160px; /* Положення елемента від лівого краю */
 top: 50px; /* Положення від верхнього краю */
 width: 225px; /* Ширина блока */
 height: 180px; /* Висота блока */ 
background: #f0f0f0; /*Колір фона */ }
 </style> 
</head> 
<body> 
<div id="help">Цей елемент допомагає у разі, коли ви знаходитесь в усвідомленні
 того факту, що абсолютно не розумієте, хто і як вам може допомогти. 
Саме в цей момент ми і підказуємо, що допомогти вам ніхто не зможе
</div>
 </body>
 </html>
У даному прикладі визначається стиль тега <DIV>, для якого вказаний селектор help через параметр id (рис. 7.1).

Рис. 7.1. Результат застосування ідентифікатора

Як і при використанні класів, ідентифікатори можна застосовувати до конкретного тегу. Синтаксис при цьому буде наступний.
Тег#Ім'я_ідентифікатора {властивість1: значення;властивість2: значення; ... }
Спочатку вказується ім'я тега, потім без пробілів символ решітки та назва ідентифікатора. У прикладі 7.2 показано використання ідентифікатора стосовно тегу <P>.

Приклад 7.2. Застосування ідентифікатора спільно з тегом

<!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=windows-1251">
 <title>Ідентифікатори</title>
 <style type="text/css">
 P {
 color: green; /* Зелений колір текста */ 
font-style: italic; /* Курсивний напис тексту */
 } 
P#opa {
 color: red; /* Червоний колір тексту */
 border: 1px solid #666; /* Параметри рамки */
 background: #eee; /* Колір фона */
 padding: 5px; /* Поля навколо текста */ 
}
 </style>
 </head>
 <body>
 <p>Звичайний параграф</p>
 <p id="opa">Параграф незвичайний</p>
 </body>
 </html>
Результат даного прикладу показано на рис. 7.2.

Вид параграфів після застосування стилю

Рис. 7.2. Вид параграфів після застосування стилю

У даному прикладі вводиться стиль для тега <P> і для такого ж тега, але із зазначенням ідентифікатора opa. Використання ідентифікатора дає можливість змінювати деякі параметри елемента, наприклад, робити його невидимим або видимим за бажанням за допомогою скриптів (приклад 7.3).

Приклад 7.3. Зміна видимості шару

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> 
<title>Ідентифікатори</title>
 <style type="text/css">
 #descr {
 position: relative; /* Відносне позиціонування */
 visibility: hidden; /* Ховаємо вміст шару */ 
} 
</style>
 <script type="text/javascript">
 function hiddenLayer() {
 document.getElementById("descr").style.visibility = "hidden";
 }
 function showLayer() {
 document.getElementById("descr").style.visibility = "visible"; 
} 
</script>
 </head>
 <body> 
<table width="90%" 
border="0" 
cellspacing="0" 
cellpadding="4" 
align="center"> 
<tr>
 <td width="20%" align="center">
<a 
href="#"
  onMouseOver="showLayer()"
  onMouseOut="hiddenLayer()">
 <img
  src="button.gif"
  width="98"
 height="33"
 border="0"
 alt="Кнопка">
</a>
</td>
 <td> 
<div id="descr">При наведенні курсора миші з*являється даний 
скритий спочатку текст.</div>
 </td>
 </tr>
 </table>
 </body> 
</html>
Результат даного прикладу показаний нижче. При наведенні курсору миші на зображення демонструється прихований до цього часу текст, який знову ховається при прибиранні курсору з малюнка. Зміна параметрів стилю елемента відбувається через звернення до нього по імені ідентифікатора.
Категорія: КСМ | Переглядів: 690 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: