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

<p> Lorem ipsum <b> dolor </ b> sit amet. </ p>

Тег <B> є дочірнім по відношенню до тега <P>, оскільки він знаходиться всередині цього контейнера. Відповідно <P> виступає як батьківський елемент <B>.

<p> Lorem ipsum <b> dolor </ b> <var> sit </ var> amet. </ p>

Теги <VAR> і <B> ніяк не перекриваються і являють собою сусідні елементи. Те, що вони розташовані всередині контейнера <P>, ніяк не впливає на їхнє ставлення один до одного.

<p> Lorem <b> ipsum </ b> dolor sit amet, <i> consectetuer </i> adipiscing <tt> elit </ tt>. </ p>

Сусідніми тут є теги <B> і <I>, а також <I> і <TT>. При цьому <B> і <TT> до сусідніх елементів не відносяться через те, що між ними розташований контейнер <I>. Для управління стилем сусідніх елементів використовується символ плюса (+), який встановлюється між двома селекторами. Загальний синтаксис наступний.

Селектор1 + Селектор2 {Опис правил стилю}

Пробіли навколо плюса не обов'язкові, стиль при такому записі застосовується до селектора 2, але тільки в тому випадку, якщо він є сусіднім для селектора 1 і слідує відразу після нього.
Зауваження

Сусідні селектори не підтримуються браузером Internet Explorer.

У прикладі 10.1 показана структура взаємодії тегів між собою.

Приклад 10.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">
 B + I {
 color: red; /* Червоний колір тексту */ 
} </style> 
</head>
 <body>
 <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> 
adipiscing elit.</p>
 <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> 
</body> 
</html>
Результат даного прикладу показано на рис. 10.1.

Рис. 10.1. Виділення тексту кольором за допомогою сусідніх селектор

У даному прикладі відбувається зміна кольору тексту для вмісту контейнера <I>, коли він розташовується відразу після контейнера <B>. У першому абзаці така ситуація реалізована, тому слово «consectetuer» у браузері відображається червоним кольором. У другому абзаці, хоч і присутній тег <I>, але по сусідству ніякого тега <B> немає, так що стиль до цього контейнера не застосовується. Розберемо більш практичний приклад. Часто виникає необхідність в текст статті включати різні виноски та примітки. Зазвичай для цієї мети створюють новий стильовий клас і застосовують його до абзацу, у такий спосіб можна легко змінити вигляд тексту. Але ми підемо іншим шляхом і скористаємося сусідніми селекторами. Для виділення зауважень створимо новий клас, назвемо його sic, і станемо застосовувати його до тега <H2>. Перший абзац після такого заголовка виділяється кольором фону і відступом (приклад 10.2). Вид інших абзаців залишиться незмінним.

Приклад 10.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">
 H2.sic {
 font-size: 140%; /* Розмір шрифту */
 color: maroon; /* Колір тексту */
 font-weight: normal; /* Нормальний напис тексту */
 margin-left: 30px; /* Відступ зліва */
 margin-bottom: 0px; /* Відступ знизу */
 } 
H2.sic + P { 
background: #ddd; /* Колір фону */
 margin-left: 30px; /* Відступ зліва */
 margin-top: 0.5em; /* Відступ зверху */ 
padding: 7px; /* Поля навколо текста */ 
} </style>
 </head>
 <body> 
<h1>Методи ловлі лева в пустелі</h1>
 <h2>Метод послідовного перебора</h2> 
<p>Нехай лев має габаритні розміри L x W x H, де L - довжина лева
від кінчика носа до хвоста, W - ширина лева, а H - його висота.
Після чого пустелю розбиваємо на ряд елементарних прямокутників,
розмір яких збігається з шириною і довжиною лева. Враховуючи, що лев може
 знаходитися не строго на заданому місці, а одночасно на двох з них,
 клітку для лову слід робити підвищеної площі, а саме 2L x 2W.
Завдяки цьому ми уникнемо помилки, коли в клітці опиниться спійманим
 лише половина лева або, що гірше, тільки його хвіст.</p>
<h2 class="sic">Важливе зауваження</h2> <p>Для спрощення розрахунків
хвіст в якості похибки вимірювання можна відкинути і не брати
 до уваги.</p> <p>Далі послідовно накриваємо кожен з
 розмічених прямокутників пустелі клітиною і перевіряємо, спійманий лев
 чи ні. Як тільки лев опиниться в клітці, процедура затримання вважається
завершеною.</p>
 </body>
 </html>
Результат даного прикладу показано на рис. 10.2.

Рис. 10.2. Зміна виду абзацу за рахунок використання сусідніх селектор

У даному прикладі текст відформатований із застосуванням абзаців (тег <P>), але запис H2.sic + P встановлює стиль тільки для першого абзацу що йде після тега <H2>, у якого долучено клас з ім'ям sic. Сусідні селектори зручно використовувати для тих тегів, до яких автоматично додаються відступи, щоб самостійно регулювати величину відбиття. Наприклад, якщо поспіль йдуть теги <H1> і <H2>, то відстань між ними легко регулювати якраз за допомогою сусідніх селекторів. Аналогічно буде і у випадку, коли підряд йдуть теги <H2> і <P>, а також в інших подібних випадках. У прикладі 10.3 таким чином змінюється величина відступів між зазначеними тегами.

Приклад 10.3. Відступи між заголовками та текстом

<!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">
 H1 + H2 { 
margin-top: -10px; /* Зміщуємо заголовок 2 вгору */
 }
 H2 + P {
 margin-top: -1em; /* Зміщуємо перший абзац вгору до заголовку */
 }
 </style> 
</head>
 <body> 
<h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <p>Абзац!</p>
 </body>
 </html>
Оскільки при використанні сусідніх селектор стиль застосовується тільки до другого елементу, то розмір відступів зменшується за рахунок включення від'ємного значення параметра margin-top. При цьому текст піднімається вгору, ближче до попереднього елемента.
Категорія: КСМ | Переглядів: 767 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: