Переключать пункты меню

Css ссылки

Оформление ссылок на css производится при помощи файла стилей или на скорую руку, прописываем внешний вид ссылок вверху страницы между тегами <head>…</head>

Сами стили заносим внутри тегов <style>…</style>
Но поскольку элементов на странице может быть сотни, а то и тысячи, то гораздо разумнее будет вынести все стили в отдельный файл

Для того, чтобы точно указать к какому именно элементу присвоить заявленные стили, обязательно нужно указать класс, либо уникальное имя для каждого селектора.
 

Например: 

Тогда для каждого элемента в файле стилей пропишем специальный код, для изменения внешнего вида для каждого элемента: 

Поясняю, что здесь написано: для элемента с классом dropdown заданы следующие свойства – шрифт Arial или, при его отсутствии на компе клиента, будет использован Helvetica, размер шрифта 12 пикселей нежирный (100), текст будет обычный без подчеркивания внизу и цвет шрифта синий.

 

Теперь напишем стили для элемента a ... с селектором id="dropdown"
 

Что мы увидим на экране - шрифт будет Arial или Helvetica, размер шрифта 14 пикселей, сам шрифт будет жирный (font-weight: 800) и кроме того, текст будет с нижним подчеркиванием.

Css ссылки

Но это слишком деловой стиль. Можно придать и другую форму для элемента . Сделаем его в виде небольшой кнопки с круглой рамкой синего цвета. Тогда код css будет следующий:
 

На экране это выглядит вот так: 

Css ссылки

Кроме того, внутри элемента Отправить адреса url (href=””;) может и не быть. Поскольку элемент может использовать javascript. А чтобы элемент выглядел, как ссылка нужно прописать специальный код: 

Изменение ссылки при наведении мышки css 

Теперь напишем код css, который позволяет изменять внешний вид ссылки при наведении мышки. Для этого нужно, всего лишь, прописать стили для параметра a: hover.

Например, при наведении курсора мыши, изменим внешний вид элемента с синего на фиолетовый и добавим изменение окружающего цвета в желтый цвет.

Тогда, к примеру указанному выше, нужно задать свойства hover  

А при помощи данного свойства hover для элемента a.btreg можно изменить внешний вид кнопки с синего на оранжевый, а цвет текста изменится на с желтого на белый. 

Все примеры, которые мы рассмотрели на этой странице вы можете посмотреть здесь:  

 

 

Добавить комментарий


Коллекция скриптов и модулей   © 2017