CSS сам по себе не предоставляет функции изменения подчеркивания HTML-ссылок напрямую, но, используя некоторые методы, мы все равно можем сделать монотонное подчеркивание веб-ссылок красочным.
1. Основные принципы
Прежде всего, первым шагом для настройки подчеркивания HTML-ссылок является создание изображения. Повторите это изображение в горизонтальном направлении, чтобы создать эффект подчеркивания. Если вы хотите, чтобы фон веб-страницы был скрыт подчеркиванием, вы можете использовать прозрачное изображение в формате .gif.
Во-вторых, если высота подчеркнутого изображения велика, высоту текста необходимо увеличить соответствующим образом, чтобы между нижней частью одной строки текста и верхней частью следующей строки текста было больше места, например p { высота строки: 1,5;
Пример подчеркивания пользовательской ссылкиВ-третьих, чтобы отобразить пользовательское подчеркивание, подчеркивание по умолчанию должно быть скрыто, то есть { text-decoration: none };
В-четвертых, установите подчеркивание для элемента ссылки и создайте собственное подчеркивание. Предполагая, что изображение подчеркивания — это underline.gif, код CSS для установки изображения подчеркивания — это {background-image: url(underline.gif });
В-пятых, нам нужно сделать так, чтобы подчеркивание повторялось в горизонтальном направлении, а не в вертикальном, иначе оно будет скрыто за текстом. Код, который требует повторения подчеркивания только в горизонтальном направлении: a {background-repeat: повтор-x };
В-шестых, чтобы гарантировать, что изображение отображается под текстом ссылки (независимо от размера шрифта), используйте атрибут background-position, чтобы поместить изображение внизу элемента ссылки. Для подчеркнутых изображений, таких как стрелки, вы также можете рассмотреть возможность горизонтального выравнивания графики. Предположим, вы хотите разместить подчеркнутое изображение в правом нижнем углу. Код CSS: a {background-position: 100% 100% };
В-седьмых, необходимо добавить соответствующие пробелы, чтобы освободить место для пользовательской графики под текстом ссылки. Конкретное положение подчеркивания относительно текста ссылки связано с размером текста, но, вообще говоря, вы можете сначала сделать нижнее поле равным высоте подчеркивания, а затем отрегулировать его при необходимости. Например: {padding-bottom: 4px};
В-восьмых, поскольку изображение подчеркивания размещается внизу элемента ссылки, необходимо убедиться, что ссылка не разрывается (если ссылке разрешено занимать несколько строк, только текст ссылки в следующей строке будет иметь пользовательское подчеркивание). ). Используйте атрибут CSS white-space, чтобы предотвратить перенос текста ссылки, то есть {white-space: nowrap };
Подводя итог, полный пример определения свойств стиля CSS для элемента ссылки будет выглядеть следующим образом:
а {
текстовое оформление: нет;
фон: URL(underline.gif) повтор-х 100% 100%;
отступ снизу: 4 пикселя;
пробел: nowrap;
}
Если вы хотите, чтобы пользовательское подчеркивание появлялось только при наведении указателя мыши , просто измените свойство фона CSS, изначально установленное непосредственно в элементе ссылки, на:hover, например:
а {
текстовое оформление: нет;
отступ снизу: 4 пикселя;
пробел: nowrap;
}
а: наведите {
фон: URL(underline.gif) повтор-х 100% 100%;
}
2. Оценка примеров
Предположим, есть два подчеркнутых рисунка «диагональ.gif» (гофрированная линия) и «цветок.gif» (цветок). Высота и ширина первого — 3 и 9, а высота и ширина второго — 11 и 15. Вот полный пример установки двух типов подчеркивания:
Пример подчеркивания пользовательской ссылкиИсходный код веб-страницы выглядит следующим образом:
Примечание. Диагональ.gif иflower.gif скопированы в тот же каталог, где находится веб-страница.
<html>
<голова>
<title>бывший</title>
<тип стиля=текст/css>
а#example1a {
текстовое оформление: нет;
фон: URL(диагональ.gif) повтор-х 100% 100%;
пробел: nowrap;
отступ снизу: 2 пикселя;
}
а#пример1б {
текстовое оформление: нет;
пробел: nowrap;
отступ снизу: 2 пикселя;
}
а#example1b:наведите {
фон: URL(диагональ.gif) повтор-х 100% 100%;
}
а#example2a {
текстовое оформление: нет;
фон: URL(flower.gif) повтор-x 100% 100%;
пробел: nowrap;
отступ снизу: 10 пикселей;
}
а#example2b {
текстовое оформление: нет;
пробел: nowrap;
отступ снизу: 10 пикселей;
}
а#example2b:наведите {
фон: URL(flower.gif) повтор-x 100% 100%;
}
-->
</стиль>
</голова>
<тело>
<p>Пример:</p>
<p> <a href=# id=example1a>статическое подчеркивание рябью</a>,
<a href=# id=example1b>Рябь, которая появляется при наведении указателя мыши</a>. </p>
<p> <a href=# id=example2a>Статическое подчеркивание цветка</a>,
<a href=# id=example2b>Подчеркивание цветка, которое появляется при наведении курсора мыши</a>. </p>
</тело>
</html>