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; //тень элемента
}
0 0 голос
Рейтинг статьи
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Подписаться
Уведомить о
guest
4 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
JanleF
8 месяцев назад

Buy Cipro Xr Online [url=http://apcialisle.com/#]Buy Cialis[/url] Cialis Pas Cher A Nice Cialis Canadian Rx Network

JanleF
7 месяцев назад

Cheapest Us Pharmacy For Viagra [url=https://buyciallisonline.com/#]Cialis[/url] Find Isotretinoin Online Discount With Overnight Delivery Cheap buy cialis online forum Filitra

JanleF
7 месяцев назад

Best Price For Propecia Online [url=https://buycialisuss.com/#]buy cialis cheap[/url] Apply Propecia Buy Cialis Viagra Como Se Toma

treantinc
treantinc
4 месяцев назад

Order Ciprofloxacin 500mg [url=https://agenericcialise.com/]best place to buy cialis online forum[/url] approach doctor cialis Cialis Viagra Wirkung Bei Gesunden