Понеділок, 25.11.2024, 11:01
Головна Реєстрація RSS
Вітаю Вас, Гість
Меню сайту
Реклама
Категорії розділу
Архітектура ПК [1]
Архітектура та експлуатація персонального комп'ютера
СПЗ [12]
Системне програмне забезпечення та операційні системи
Комп'ютерна графіка [25]
КСМ [28]
Комп'ютерні системи та мережі
ІСІТО [1]
Інформаційні системи і технології обліку
Бухгалтерський облік [0]
АМтП [10]
Алгоритмічні мови та програмування
Копирайт рерайт [1]
СУБД [18]
Системи управління базами даних
ОКТ практикум [2]
Основи комп'ютерних технологій практикум
Інформатика (практ) [1]
інформатика практикум, практичні заняття
ТіОБВ [61]
Технологія і організація будівельного виробництва
ОСАПр [6]
Основи систем автоматизованого проектування, AutoCAD, ArchiCAD
ТіОБВ (заочники) [1]
Пошук
Статистика
Яндекс.Метрика
Онлайн всього: 1
Гостей: 1
Користувачів: 0
Форма входу
Календар
«  Листопад 2013  »
ПнВтСрЧтПтСбНд
    123
45678910
11121314151617
18192021222324
252627282930
Архів записів
Головна » 2013 » Листопад » 20 » Селектори атрибутів
11:38
Селектори атрибутів
Варіанти застосуванняСелектор[атрибут]{Опис правил стилю}
Простий селектор атрибута q [title] {color: maroon;}
Селектор атрибута зі значенням a [target="_blank"] {padding-left: 15px;}
Атрибут починається з певного значення a [href^="http://"] {font-weight: bold;}
Атрибут закінчується певним значенням a [href$=".ua"] {padding-left: 10px;}
Значення зустрічається в будь-якому місці атрибуту a [href*="until-2012"] { background: yellow;}

Для зміни стилю елементів що містять різні параметри, в CSS введені селектори атрибутів. Вони дозволяють встановити стиль тега по присутності певного параметра або його значення.
Зауваження

Селектори атрибутів підтримуються браузером Internet Explorer починаючи з версії 7.0, причому для коректної роботи прикладів необхідно додати правильний <!DOCTYPE>.

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

Простий селектор атрибута

Встановлює стиль для елемента, якщо задано специфічний атрибут. Його значення в даному випадку не важливо. Синтаксис застосування такого селектора наступний.

[Атрибут] {Опис правил стилю} або Селектор[атрибут] {Опис правил стилю}

Пробіл між ім'ям селектора і квадратними дужками не допускається. У прикладі 12.1 показано зміна стилю тега <Q>, в тому випадку, якщо до нього додано параметр title.

Приклад 12.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">
 Q { font-style: italic; /* Курсивний напис */
 quotes: "0AB" "0BB"; /* Змінюємо вид лапок в цитаті */
 }
 Q[title] { color: maroon; /* Коліт тексту */
 }
 </style> 
</head> 
<body> 
<p>Продовжуючи відомий закон Мерфі, який каже: 
<q>Якщо неприємність може статись, то вона станеться</q>
 , можемо ввести свої спостереження:
 <q title="Із законів Фергюсона">Після того, як веб-сторінка буде корректно 
відображатись в одному браузері, виясниться, що вона неправильно
 показується в іншому.</q>.
</p> 
</body>
 </html>
Результат прикладу показано на рис. 12.1.

Зміна стилю елемента в залежності від застосування параметра title

Рис. 12.1. Зміна стилю елемента в залежності від застосування параметра title

У даному прикладі змінюється колір тексту всередині контейнера <Q>, коли до нього додається параметр title. Зверніть увагу, що для селектора Q[title] немає потреби повторювати атрибути, оскільки вони успадковуються від селектора Q.

Селектор атрибута зі значенням

Встановлює стиль для елемента в тому випадку, якщо задано певне значення специфічного параметра. Синтаксис застосування наступний.

[Атрибут="значення"] {Опис правил стилю} Селектор[атрибут="значення"] {Опис правил стилю}

У першому випадку стиль застосовується до всіх елементів, які містять вказане значення атрибута. А в другому - лише до певного селектора. У прикладі 12.2 показано зміна стилю посилання в тому випадку, якщо тег <A> містить параметр target = "_blank". При цьому посилання буде відкриватись у новому вікні і щоб показати це, за допомогою стилів додаємо невеликий малюнок перед текстом посилання.

Приклад 12.2. Стиль для відкриття посилань у новому вікні

<!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"> 
A[target="_blank"] {
 background: url(blank.gif) no-repeat 0 2px; /* Параметри фонового малюнка */ 
padding-left: 15px; /* Зміщуємо текст вправо */
 } 
</style>
 </head> 
<body>
 <p><a href="link1.html">Звичайна ссилка</a> | 
<a href="link2" target="_blank">Ссилка в новому вікні</a>
</p> 
</body>
 </html>
Результат прикладу показаний нижче (рис. 12.2).

Зміна стилю елемента в залежності від значення параметра target

Рис. 12.2. Зміна стилю елемента в залежності від значення параметра target

У даному прикладі малюнок до посиланням додається за допомогою атрибуту background. У його функції входить створення повторюється фонової картинки, але повторення фону можна скасувати через аргумент no-repeat, що в підсумку дасть єдине зображення.

Атрибут починається з певного значення

Встановлює стиль для елемента в тому випадку, якщо атрибут починається з вказаного значення. Синтаксис застосування наступний.

[Атрибут^="значення"] {Опис правил стилю} Селектор[атрибут^="значення"] {Опис правил стилю}

У першому випадку стиль застосовується до всіх елементів, які починаються з заданого значення ознаки. А в другому - лише до певного селектора. Припустимо, що на сайті потрібно розділити стиль звичайних і зовнішніх посилань - посилання, які ведуть на інші сайти. Щоб не додавати до тегу <A> новий клас, скористаємося селектором атрибутів. Зовнішні посилання характеризуються додаванням до адреси протоколу, наприклад, для доступу до гіпертекстових документів використовується протокол HTTP. Тому зовнішні посилання починаються з ключового слова http://, його і додаємо до селектора A, як показано у прикладі 12.3.

Приклад 12.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"> 
 A[href^="http://"] {
 font-weight: bold; /* Жирний напис */
 } 
</style> 
</head>
 <body> 
<p><a href="link1.html">Звичайна ссилка
</a> | 
<a href="http://until-2012.com.ua" target="_blank">
Зовнішня ссилка на сайт until-2012.com.ua
</a>
</p> 
</body>
 </html>
Результат прикладу показаний нижче (рис. 12.3).

Зміна стилю для зовнішніх посилань

Рис. 12.3. Зміна стилю для зовнішніх посилань

У даному прикладі зовнішні посилання виділяються жирним шрифтом. Також можна скористатися показаним в прикладі 12.2 прийомом і додавати до посилання невелике зображення, яке буде повідомляти, що посилання веде на інший сайт.

Атрибут закінчується певним значенням

Встановлює стиль для елемента в тому випадку, якщо атрибут закінчується вказаним значенням. Синтаксис застосування наступний.

[Атрибут$="значення"] {Опис правил стилю} Селектор[атрибут$="значення"] {Опис правил стилю}

У першому випадку стиль застосовується до всіх елементів, які завершуються заданим значенням атрибуту. А в другому - лише до певних селекторів. Таким способом можна автоматично розділяти стиль для сайтів домену ua і для сайтів інших доменів на кшталт com, як показано у прикладі 12.4.

Приклад 12.4. Стиль для різних доменів

<!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[href$=".ua"] { /*Якщо ссилка закінчується на .ua */
 background: url(ua.gif) no-repeat; /* Параметри фонового малюнка*/
 padding-left: 10px; /* Зміщуємо текст вправо */
 }
 A[href$=".com"] { /* Якщо ссилка закінчується на .com */
 background: url(com.gif) no-repeat; padding-left: 10px;
 } 
</style>
 </head>
 <body>
 <p>
<a href="http://google.com">Google.Com</a>
 | <a href="http://i.ua">i.ua</a>
</p> 
</body>
 </html>
У даному прикладі містяться два посилання, що ведуть на різні домени - com і ua. При цьому до кожного такого посилання з допомогою стилів додається свій фоновий малюнок. Стильові атрибути будуть додаватися тільки для тих посилань, параметр href яких закінчується на «.Ua» або «. Com». Зауважте, що додавши до імені домену слеш (http://i.ua/) або адреса сторінки (http: / /i.ua / fun.html), ми змінимо тим самим закінчення і стиль застосовуватися не буде. У цьому випадку краще скористатися селектором, в якому певне значення може знаходитися в будь-якому місці атрибуту.

Значення зустрічається в будь-якому місці атрибуту

Можливі варіанти, коли стиль слід застосувати до селектора з певним атрибутом, частиною якого є деяке значення. При цьому точно не відомо, починається або закінчується цим значенням аргумент. Тоді слід використовувати наступний синтаксис.

[Атрибут*="значення"] {Опис правил стилю} Селектор[атрибут*="значення"] {Опис правил стилю}

Значення може розташовуватися в будь-якому місці аргументу, наприклад, на початку, в кінці або десь посередині. Головне, що воно є його частиною. Так, у прикладі 12.5 показано зміна стилю посилань, в яких зустрічається слово «until-2012».

Приклад 12.5. Стиль для різних сайтів

<!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[href*="until-2012"] {
 background: yellow; /* Жовтий колір фону */
 }
 </style> 
</head> 
<body>
 <p><a href="http://until-2012.com/index.html/">Теги HTML</a>
 | <a href="http://www.until-2012.com">Крок за кроком</a> |
 <a href="http://webimg.ru">Графіка для Веб</a>
</p> 
</body> 
</html>
Результат даного прикладу показано на рис. 12.4.

Зміна стилю для посилань, в адресі яких зустрічається

Рис. 12.4. Зміна стилю для посилань, в адресі яких зустрічається «until-2012»

Існують і деякі інші види селекторів аргументів, але вони застосовуються досить рідко, тому їх опис ми опустимо.
Категорія: КСМ | Переглядів: 541 | Додав: Gryzley | Рейтинг: 0.0/0
Всього коментарів: 0
Ім`я *:
Email *:
Код *: