| Vitalya | Дата: Понедельник, 19-Декабря-2016, 01:10:16 | Сообщение # 1 |
 Генерал_палкомник
Группа: Администраторы
Сообщений: 114
Награды: 0
Репутация: 32767
Статус: Offline
| Хотите, чтобы ваши ссылки не выглядели уныло-подчёркнутыми?
Для этого Каскадные таблицы стилей (CSS) имеют ряд дополнений при использовании ссылок: их можно раскрасить в любые цвета, можно убрать подчёркивание, можно выделить ссылку двумя горизонтальными линиями, можно увеличить высоту шрифта при наведении на неё курсором и многое другое.
Всё зависит от Вас и Вашей фантазии!
Разберём кусочек кода из таблице стилей CSS сайта Ucoz.
Открываем: Панель Управления --->Управление дизайном ---> Таблица стилей (CSS), находим код:
Код /* General Style */ a:link {text-decoration:underline; color:#FFFFFF;} a:active {text-decoration:underline; color:#FFFFFF;} a <img src="/.s/sm/2/v.gif" border="0" align="absmiddle" alt="v" /> isited {text-decoration:underline; color:#FFFFFF;} a:hover {text-decoration:none; color:#FFFFFF;}
Этот кусочек кода отвечает за оформление практически всех ссылок на сайте!
Для начала давайте разберём этот код:
a:link- неактивированная ссылка;
a:active- ссылка активированная в данный момент;
a  isited- ссылка активированная ранее (посещённые ссылки);
a:hover- ссылка при наведении указателя мыши;
color:#FFFFFF; - отвечает за цвет соответствующей ссылки. В нашем примере все ссылки имеют белый цвет.
text-decoration: - этот параметр отвечает за стиль соответствующей ссылки, имеет следующие значенияч:
text-decoration:underline; - ссылка подчёркнута;
text-decoration:none; - ссылка не подчёркнута;
text-decoration: underline overline;} - ссылка подчёркнута вверху и внизу;
text-decoration:line-through;} - ссылка зачёркнута;
Значение
border-bottom: 2px dashed; - пунктирное подчёркивание внизу с тощиной 2 пикселя;
где 2px dashed означает,что линия будет пунктирной с тощиной 2 пикселя, а border-bottom
проводит наш пунктирчик снизу.
|
| |
| |
