Понеділок, 25.11.2024, 10:45
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 3
Гостей: 3
Користувачів: 0
Форма входу
Календар
«  Жовтень 2013  »
ПнВтСрЧтПтСбНд
 123456
78910111213
14151617181920
21222324252627
28293031
Архів записів
Головна » 2013 » Жовтень » 23 » Контекстні селектори
14:41
Контекстні селектори
При створенні веб-сторінки часто доводиться вкладати одні теги всередину інших. Щоб стилі для цих тегів використовувалися коректно, допоможуть селектори, які працюють тільки в певному контексті. Наприклад, задати стиль для тега <B> тільки коли він розташовується всередині контейнера <P>. Таким чином можна одночасно встановити стиль для окремого тега, а також для тега, який знаходиться всередині іншого. Контекстний селектор складається з простих селектор розділених пробілом. Так, для селектора тега синтаксис буде наступний.

Тег1 Тег2 {... }

У цьому випадку стиль буде застосовуватися до Тегу2 коли він розміщується всередині Тега1, як показано нижче.

<Тег1> <Тег2> ... </ Тег2> </Тег1>

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

Приклад 9.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">
 P B{
 font-family: Times, serif; /* Родина шрифту */
 font-weight: bold; /* Жирний напис*/
 color: navy; /* Синій колір тексту */ 
} 
</style>
 </head>
 <body>
 <div>
<b>Жирний напис тексту</b>
</div>
 <p>
<b>Одночасно жирний напис тексту і виділення кольором</b>
</p>
 </body>
 </html>
У даному прикладі показано звичайне застосування тега <B> і цього ж тега, коли він вкладений всередину параграфа <P>. При цьому змінюється колір і шрифт тексту, як показано на рис. 9.1.

Оформлення тексту в залежності від вкладеності тегів

Рис. 9.1. Оформлення тексту в залежності від вкладеності тегів

Зауваження

Не обов'язково контекстні селектори містять тільки один вкладений тег. Залежно від ситуації припустимо застосовувати два і більш послідовно вкладених один в одного тегів.

Більш широкі можливості контекстні селектори дають при використанні ідентифікаторів і класів. Це дозволяє встановлювати стиль тільки для того елемента, який розташовується всередині певного класу, як показано в прикладі 9.2.

Приклад 9.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">
 A {
 color: green; /* Зелений колір тексту для усіх ссилок */
 }
 .menu {
 padding: 7px; /* Поля навколо тексту */
 border: 1px solid #333; /* Параметри рамки */
 background: #fc0; /* Колір фону */
 }
 .menu A {
 color: navy; /* Темно-синій колір ссилок */
 }
 .menu A:hover {
 color: red; /* Червоний колір ссилок при наведенні на них */
 }
 </style>
 </head>
 <body>
 <div class="menu">
 <a href="link1.html">Грузинська кухня</a>
 | <a href="link2.html">Українська кухня</a>
 | <a href="link3.html">Кавказська кухня</a> 
</div>
 <p>
<a href="link4.html">Інші матеріали по темі</a>
</p> 
</body>
 </html>
Результат даного прикладу показано на рис. 9.2.

Посилання різних кольорів

Рис. 9.2. Посилання різних кольорів

У даному прикладі використовується два типи посилань. Перше посилання, стиль якої задається за допомогою селектора A, буде діяти на всій сторінці, а стиль другого заслання (. Menu A) застосовується тільки до посилань всередині елемента з класом menu. При такому підході легко керувати стилем однакових елементів, на зразок зображень і посилань, оформлення яких має відрізнятися в різних областях веб-сторінки.

Інформація взята з сайту http://site-konstruktor.com.ua/css/kontekstni_selektory
Категорія: КСМ | Переглядів: 726 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: