Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Зробити блоковий елемент, який є посиланням на сторінку.
Рішення
При розміщенні посилання всередині шару заданих розмірів, іноді виникає задача, щоб посиланням був не тільки текст, але і сам шар. Особливо це буває актуально при створенні різних меню. Для зміни вигляду посилання до селектору A в стилях слід додати властивість display зі значенням block, щоб перетворити посилання в блоковий елемент. Такий елемент за замовчуванням займає всю вільну ширину всередині батьків. Також необхідно вказати height: 100%, посилання після цього буде займати всю доступну висоту всередині шару (приклад 1).
Приклад 1. Посилання всередині шару
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Шар-посилання</title> <style> .link { width: 300px; /* Ширина шару */ height: 200px; /* Висота шару */ background: #fc0; /* Колір фону */ } .link a { display: block; /* Посилання блоковий елемент */ text-align: center; /* Вирівнювання по центру */ height: 100%; /* Висота на весь шар */ color: #666; /* Колір посилання */ } </style> </head> <body> <div class="link"> <a href="1.html">Посилання</a> </div> </body> </html>
Результат приклад показаний на рис. 1. Зверніть увагу, що вказівник мишки перетворюється на курсор всередині шару цілком, а не тільки на тексті, як це відбувається із звичайними посиланнями.
Рис. 1. Посилання в шарі