Понеділок, 25.11.2024, 10:46
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 3
Гостей: 3
Користувачів: 0
Форма входу
Календар
«  Листопад 2013  »
ПнВтСрЧтПтСбНд
    123
45678910
11121314151617
18192021222324
252627282930
Архів записів
Головна » 2013 » Листопад » 6 » Дочірні селектори CSS
11:31
Дочірні селектори CSS
Дочірнім називається елемент, який безпосередньо розташовується всередині батьківського елементу. Щоб краще зрозуміти відносини між елементами документа, розберемо невеликий код (приклад 11.1).

Приклад 11.1. Вкладеність елементів у документі

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <body>
 <div class="main">
 <p>
 <em>Lorem ipsum dolor sit amet</em>,
 consectetuer adipiscing elit, sed diem nonummy nibh euismod 
tincidunt ut lacreet dolore magna aliguam erat volutpat.
 </p>
 <p>
<strong><em>Ut wisis enim ad minim veniam</em></strong>,
 quis nostrud exerci tution ullamcorper suscipit lobortis
 nisl ut aliquip ex ea commodo consequat.
</p> 
</div>
 </body>
 </html>
У даному прикладі застосовується кілька контейнерів, які в коді розташовуються один в іншому. Наочніше це видно на дереві елементів, так називається структура відносин всіх тегів документа між собою (рис. 11.1).

Дерево елементів для прикладу 11.1

Рис. 11.1. Дерево елементів для прикладу 11.1

На рис. 11.1 в зручному вигляді представлена вкладеність елементів і їх ієрархія. Тут дочірнім елементом по відношенню до тегу<DIV> виступає параграф <P>. Разом з тим тег <STRONG> не є дочірнім для тега <DIV>, оскільки він розташований в контейнері<P>. Повернімося тепер до селектора. Дочірнім селектором вважається той елемент, що в дереві елементів знаходиться прямо усередині батьківського елементу. Синтаксис застосування таких селекторів наступний.

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

Стиль застосовується до селектора 2, але тільки в тому випадку, якщо він є дочірнім для селектора 1.
Зауваження

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

Якщо знову звернутися до прикладу 11.1, то стиль виду P> EM (color: red) буде встановлено для першого абзацу документа, оскільки тег <EM> знаходиться всередині контейнера <P>, і не дасть ніякого результату для другого абзацу. А все через те, що тег<EM> у другому абзаці розташований в контейнері <STRONG>, тому порушується умова вкладеності. За своєю логікою дочірні селектори схожі на селектори контекстні. Різниця між ними така. Стиль до дочірнього селектору застосовується тільки в тому випадку, коли він є прямим нащадком, іншими словами, безпосередньо розташовується всередині батьківського елементу. Для контекстного селектора допустимо будь-який рівень вкладеності. Щоб стало зрозуміло, про що йде мова, розберемо наступний код (приклад 11.2).

Приклад 11.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">
 DIV I { /* Контекстний селектор */
 color: green; /* Зелений колір тексту */
 } 
DIV > I { /* Дочірній селектор */
 color: red; /* Червоний колір тексту */
 } 
</style>
 </head>
 <body> 
<div> 
<p>
<i>Lorem ipsum dolor sit amet</i>,
 consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 
ut lacreet dolore magna aliguam erat volutpat.</p> 
</div>
 <div>
 <p>
<i>Lorem ipsum dolor sit amet</i>, consectetuer adipiscing elit, sed
 diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam 
erat volutpat.</p>
 </div> 
</body>
 </html>
У даному прикладі курсивний текст буде відображатися зеленим кольором через те, що дочірній селектор вказаний некоректно. У стилі прописано змінити колір тексту на червоний всередені тега <I>, але тільки в тому випадку, якщо він безпосередньо знаходиться всередині <DIV>. А в нашому випадку тег <I> розташовується усередині <P>, тому стиль застосовуватися не буде. Зате буде діяти контекстний селектор, який і задає зелений колір. Зауважимо, що в більшості випадків від додавання дочірніх селекторів можна відмовитися, замінивши їх контекстними селекторами. Проте використання дочірніх селекторів розширює можливості з управління стилями елементів, що в підсумку дозволяє отримати потрібний результат, а також простий і наочний код. Найзручніше застосовувати зазначені селектори для елементів, які володіють ієрархічною структурою - сюди відносяться, наприклад, таблиці та різні списки. У прикладі 11.3 показано зміна виду списку за допомогою стилів. За рахунок вкладення одного списку в інший отримуємо різновид меню. Заголовки при цьому розташовуються горизонтально, а набір посилань - вертикально під заголовками (рис. 11.2).

застосування дочірніх селекторів

Рис. 11.2 Список у вигляді меню

Для розміщення тексту по горизонталі до селектора LI додається стильової атрибут float. Щоб при цьому розділити між собою стиль горизонтального і вертикального списку і застосовуються дочірні селектори.

Приклад 11.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"> 
UL#menu > LI {
 list-style: none; /* Прибираємо маркери списку */
 width: 120px; /* Ширина елемента в пікселях */
 background: #ddd; /* Колір фону */
 color: maroon; /* Колір тексту */
 padding: 5px; /* Поля навколо тексту */
 font-family: Arial, sans-serif; /* Рублений шрифт */
 font-size: 90%; /* Розмір шрифту */
 font-weight: bold; /* Жирний напис */
 float: left; /* Розташовуємо елементи по горизонталі */
 } 
LI > UL {
 list-style: none; /* Прибираємо маркери списку */
 padding: 0px; /* Прибираємо відступи навколо елементів списку */
 padding-top: 5px; /* Додаємо відступ зверху */
 } 
LI > A {
 display: block; /* Ссилки відображаються у вигляді блока */
 font-weight: normal; /* Нормальний напис тексту */
 font-size: 90%; /* Размір шрифту */
 background: #fff; /* Колір фону */
 border: 1px solid #666; /* Параметри рамки */
 padding: 5px; /* Поля навколо тексту */
 } 
</style> 
</head>
 <body> 
<ul id="menu">
 <li>Редактор</li>
 <li>Правка
 <ul> 
 <li><a href="undo.html">скасувати</a>
 </li>
 <li><a href="cut.html">Вирізати</a></li>
 <li><a href="copy.html">Копіювати</a></li>
 <li><a href="paste.html">Вставити</a></li>
 </ul>
 </li>
 <li>Начертание <ul>
 <li><a href="bold.html">Жирний</a></li>
 <li><a href="italic.html">Курсивний</a></li>
 <li><a href="emphasis.html">Приємний</a></li>
 </ul> 
</li> 
<li>Размер <ul> <li><a href="small.html">Так собі</a>
</li> 
<li><a href="normal.html">Нормальний</a></li>
 <li><a href="middle.html">Средній</a></li>
 <li><a href="big.html">Недитячий</a></li>
 </ul>
 </li>
 </ul> 
</body>
 </html>

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