HTML+CSS Стили для ссылок

Уроки HTML+CSS: Стили для ссылок

В прошлых записях мы рассматривали стили для текста. Те свойства которые используются для текста могут быть использованы и для ссылок, поэтому некоторые свойства я пропущу, чтобы не повторяться.
Вот так выглядит обычная ссылка

Подчеркивание ссылок

Удаление подчеркивания

a{text-decoration: none;}

Так же вы можете стили подчеркивания для при наведение

a{text-decoration: none;}
a:hover {text-decoration: underline;}

Выбор курсора для ссылки

a{cursor: (url);}
a{curcor: pointer;}
a{curcor: none;}
a{curcor: help;}
a{curcor: progress;}
a{curcor: wait;}
a{curcor: cell;}
a{curcor: crosshair;}
a{curcor: text;}
a{curcor: vertical-text;}

Кнопка из ссылки

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

a{
  display: inline-block; //определяет, как элемент должен быть показан в документе
  text-decoration: none; //убираем подчеркивание
  text-transform: uppercase; //делаем текст в верхнем регистре
  letter-spacing: 1px; //устанавливаем расстояние между буквами
  margin: 15px 25px; //наружные отступы
  padding: 12px 18px; //внутренние отступы
  font-size: 12px; //размер шрифта
  font-weight: bold; //жирность шрифта
  font-family: 'Montserrat', sans-serif; //шрифт
  border: 1px solid #000; //граница
  border-radius: 7px; //закругление границы
  box-shadow:0px 2px 3px gray; //тень элемента
}

Хочешь научиться программировать?!

Заходи в нашу группу Вконтакте, там много полезной и интересной информации

Оставить комментарий

avatar
  Подписаться  
Уведомление о