Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
PI_lektsii_2016.doc
Скачиваний:
0
Добавлен:
01.07.2025
Размер:
6.12 Mб
Скачать

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

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

Наприклад:

<style type="text/css">

A[target="_blank"] {

color: green;

padding-left: 15px; /* Зміщення тексту вправо */

}

</style>

</head>

<body>

<p><a href="link1.html"> Звичайне посилання </a> |

<a href="link2" target="_blank"> Посилання в новому вікні </a></p>

</body>

</html>

У цьому прикладі друге гіперпосилання буде виведена зеленим кольором зі зміщенням вправо на 15 пікселів так як в тезі цього гіперпосилання є атрибут target зі значенням "_blank".

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

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

Наприклад:

<style type="text/css">

A[href^="http://"] {

font-weight: bold; /* Жирний шрифт */

}

</style>

</head>

<body>

<p><a href="link1.html"> Звичайна посилання </a> |

<a href="http://htmlbook.ru" target="_blank"> Зовнішнє посилання на сайт htmlbook.ru </a></p>

</body>

</html>

У цьому прикладі гіперпосилання, все що починається з вказівки протоколу http://, буде виділене жирним шрифтом.

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

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

<style type="text/css">

A[href$=".ua"] { /* Якщо посилання закінчується .ua */

background-color: lightblue;

padding-left: 10px;

}

A[href$=".com"] { /* Якщо посилання закінчується .com */

background-color: yellow;

padding-left: 20px;

}

</style>

</head>

<body>

<p><a href="http://www.yandex.com">Yandex.com</a> |

<a href="http://www.yandex.ua">Yandex.ua</a></p>

</body>

</html>

У даному прикладі є два посилання, що ведуть на різні домени — com і ua. При цьому для кожного посилання за допомогою стилів встановлюється колір фону. Якщо посилання закінчується на ".ua", то вона виводиться на світло-синьому тлі (lightblue), а якщо посилання закінчується на ".com", то вона виводиться на жовтому тлі.

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

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

Наприклад:

<style type="text/css">

[href*="htmlbook"] {

background: yellow; /* Жовтий колір фону */

}

</style>

</head>

<body>

<p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> |

<a href="http://stepbystep.htmlbook.ru"> Крок за кроком </a> |

<a href="http://webimg.ru">Графіка для Веб</a></p>

</body>

</html>

У даному прикладі є два посилання, що містять значення "htmlbook". Для кожної з цих посилань буде встановлено жовтий колір фону.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]