Красивые ссылки на вашем сайте

Эта ста­тья для всех, кто хочет делать кра­си­вые сай­ты. Одна из глав­ных вещей на сай­те — это ссыл­ки, и они долж­ны выгля­деть рос­кош­но. В этой ста­тье пока­жем, как настро­ить кра­си­вые ссыл­ки, на при­ме­ре стра­ни­цы «О себе».

Све­де­ния из этой ста­тьи будут полез­ны всем, у кого есть и будет сайт на чистом HTML или на движ­ке, где вы кон­тро­ли­ру­е­те сти­ли. Если у вас услов­ная «Тиль­да» или «Реди­маг», это не подой­дёт — там управ­ле­ние сти­ля­ми огра­ни­че­но.

Сей­час у нас есть стра­ни­ца с мно­же­ством ссы­лок, и она выгля­дит пло­хо­ва­то:

  • ссыл­ки не под­чёрк­ну­ты, непо­нят­но, что это ссыл­ки;
  • когда наво­дишь мыш­ку, ссыл­ка под­чёр­ки­ва­ет­ся, но очень тол­сто;
  • ссыл­ки, по кото­рым мы уже щёл­ка­ли, не выде­ля­ют­ся дру­гим цве­том — так не ясно, что мы уже чита­ли, а что нет.

Как будет

Давай­те испра­вим каж­дый пункт, что­бы полу­чи­лось как на скрин­шо­те ниже: тон­кие кра­си­вые под­чёр­ки­ва­ния, крас­ный цвет при наве­де­нии, а ещё долж­но быть вид­но посе­щён­ные ссыл­ки:

Всё дело в CSS

Что­бы сде­лать кра­си­во, нам пона­до­бит­ся CSS — спе­ци­аль­ная раз­мет­ка, кото­рая отве­ча­ет за внеш­ний вид и пове­де­ние эле­мен­тов на стра­ни­це.

В нашем при­ме­ре CSS-код встро­ен в саму стра­ни­цу, поэто­му новые инструк­ции по оформ­ле­нию добав­лять будем тоже там. Это не очень пра­виль­но с точ­ки зре­ния клас­си­че­ской раз­ра­бот­ки — пра­виль­нее дер­жать CSS в отдель­ном фай­ле. Но для теку­щей зада­чи это неваж­но.

За ссыл­ки на стра­ни­це отве­ча­ет тег <a>, поэто­му доба­вим в CSS-раздел настрой­ки того, как будут выгля­деть наши ссыл­ки:

a {    }

Меж­ду фигур­ны­ми скоб­ка­ми мы напи­шем код, кото­рый пре­вра­тит наши ссыл­ки в ссыл­ки со стиль­ным тон­ким под­чёр­ки­ва­ни­ем. Для это­го нам пона­до­бит­ся:

  • убрать стан­дарт­ное под­чёр­ки­ва­ние;
  • про­пи­сать цвет ссыл­ки, что­бы в каж­дом бра­у­зе­ре они выгля­де­ли оди­на­ко­во;
  • сде­лать тон­кую линию под ссыл­кой.

Сде­ла­ем всё по оче­ре­ди.

Уби­ра­ем стан­дарт­ное под­чёр­ки­ва­ние

text-decoration: none;

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

Зада­ём цвет ссыл­ки

color: #0f7afc;

Это стан­дарт­ный цвет ссы­лок в бра­у­зе­ре Chrome, возь­мём его за осно­ву.

Дела­ем тон­кую линию вни­зу

border-bottom: 1px solid; border-bottom-color: rgba(15, 122, 252, 0.2);

Пер­вая строч­ка гово­рит бра­у­зе­ру, что­бы он нари­со­вал под ссыл­кой (border-bottom) сплош­ную линию (solid) тол­щи­ной в один пик­сель (1px).

А вто­рая — что­бы эта линия была опре­де­лён­но­го цве­та. RGBA озна­ча­ет, что нам нуж­но сме­шать крас­ный, зелё­ный и синий цве­та (RGB) и задать им какую-то про­зрач­ность (A). Сде­ла­ем всё тем же цве­том, что и ссыл­ки, а про­зрач­ность поста­вим 0.2 — так линия будет выгля­деть тонь­ше, чем один пик­сель.

Соби­ра­ем всё вме­сте

a {
  text-decoration: none;
  color: #0f7afc;
  border-bottom: 1px solid;
  border-bottom-color: rgba(15, 122, 252, 0.2);
}

Меняем цвет ссылки при наведении

За реак­цию на наве­де­ние мыш­ки отве­ча­ет hover, поэто­му нам в CSS-раздел нуж­но доба­вить такое:

a:hover{   }

Это зна­чит, что когда мы под­ве­дём кур­сор к ссыл­ке, то сра­бо­та­ет тот набор инструк­ций, кото­рый будет про­пи­сан в этом раз­де­ле.

Нам нуж­но, что­бы ссыл­ка поме­ня­ла цвет на оран­же­вый и при этом оста­лась тон­кая линия под­чёр­ки­ва­ния. Для это­го повто­рим все шаги из преды­ду­ще­го раз­де­ла, кро­ме border-bottom: 1px solid; — это свой­ство доста­нет­ся в наслед­ство сра­зу всем ссыл­кам, а вот всё осталь­ное нуж­но про­пи­сать зано­во.

Уби­ра­ем стан­дарт­ное под­чёр­ки­ва­ние:

text-decoration: none;

Что­бы текст ссыл­ки стал оран­же­во­го цве­та, исполь­зу­ем коман­ду:

color:#cf0000;

Дела­ем у линии тот же цвет, что и у актив­ной ссыл­ки:

border-bottom-color: rgba(208, 64, 0, 0.2);

В ито­ге полу­чим:

a:hover {
  text-decoration: none;
  color: #cf0000;
  border-bottom-color: rgba(208, 64, 0, 0.2);
}

Помечаем использованные ссылки

Здесь всё то же самое, что и в преды­ду­щем раз­де­ле, толь­ко вме­сто hover будем исполь­зо­вать visited — имен­но оно отве­ча­ет за пове­де­ние ссыл­ки, по кото­рой мы уже пере­хо­ди­ли. Цвет возь­мём стан­дарт­ный фио­ле­то­вый: #800080, и этот же цвет пере­ве­дём в RGBA для под­чёр­ки­ва­ния ссы­лок.

a:visited {
  text-decoration: none;
  color: #800080;
  border-bottom-color: rgba(128, 0, 128, 0.2);
}
Готовый CSS-код для красивых ссылок

a {
  text-decoration: none;
  color: #0f7afc;
  border-bottom: 1px solid;
  border-bottom-color: rgba(15, 122, 252, 0.2);
}
a:hover {
  text-decoration: none;
  color: #cf0000;
  border-bottom-color: rgba(208, 64, 0, 0.2);
}
a:visited {
  text-decoration: none;
  color: #800080;
  border-bottom-color: rgba(128, 0, 128, 0.2);
}

Дальше — больше
Если вам кажет­ся, что ста­тья закон­чи­лась слиш­ком быст­ро и что мож­но было сде­лать ещё кра­си­вее, при­хо­ди­те учить­ся веб-разработке в «Прак­ти­кум». Будет мно­го HTML, CSS и осталь­ной кра­со­ты.