03 июня 2014
Кравченко Виктор

Стилизация ссылок средствами CSS

JavaScript HTML CSS Web
01

Перед каждым человеком, занимающимся веб-дизайном рано или поздно встает задача определить стиль ссылки в зависимости от самой ссылки. Самым ярким примером такой задачи могут служить внешние ссылки. Внешние ссылки — это ссылки, которые при нажатии на них отправят пользователя на другой ресурс (который, вероятно, откроется в новом окне). Другим примером может послужить список ссылок «Что почитать», который есть внизу практически каждой моей статьи. Здесь была реализована визуальная идентификация ссылки, в случае указания её на распространенный ресурс. Итак, как же это делается? В подавляющем большинстве случаев это реализуется при помощи css-селекторов:

02 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a[href^='http'][href*='google.ru/'] { /*[href^='http'] - выбрать ссылки a с атрибутом href со значением начинающимся с 'http'*/ /*[href*='google.ru/'] - выбрать ссылки a с атрибутом href со значением содержащим 'google.ru/'*/ background: url('google.png') no-repeat left center; padding-left:20px; } a[href^='http'][href*='wikipedia.org/'] { background: url('wiki.png') no-repeat left center; padding-left:20px; } a[href^='http'][href*='microsoft.com/'] { background: url('microsoft.png') no-repeat left center; padding-left:20px; }
03

Где google.png, wiki.png, microsoft.png — изображения размером 16×16, созданные из иконок соответствующих сайтов (о том как установить иконку на свой сайт, можно почитать в статье). Теперь следующий код:

04 HTML
1
2
3
<a href="http://google.ru/">Google.ru</a><br/> <a href="http://ru.wikipedia.org/">Wikipedia.org</a><br/> <a href="http://microsoft.com/">Microsoft.com</a><br/>
05

будет выглядеть так:

07

Таким же образом можно оформить ссылки, например, на файлы:

08 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
a.file {padding: 0 0 0 22px; background: url(images/files/unknowntype.png) no-repeat left 100%;} a.file[href$='.doc'], a.file[href$='.docx'], a.file[filename$='.doc'], a.file[filename$='.docx'] { background: url(images/files/doc.png) no-repeat left 100%; } a.file[href$='.xls'], a.file[href$='.xlsx'], a.file[filename$='.xls'], a.file[filename$='.xlsx'] { background: url(images/files/xls.png) no-repeat left 100%; } a.file[href$='.pdf'], a.file[filename$='.pdf'] { background: url(images/files/pdf.png) no-repeat left 100%; } a.file[href$='.txt'], a.file[filename$='.txt'] { background: url(images/files/txt.png) no-repeat left 100%; } a.file[href$='.jpg'], a.file[filename$='.jpg'] { background: url(images/files/jpg.png) no-repeat left 100%; } a.file[href$='.zip'], a.file[href$='.rar'], a.file[href$='.gzip'], a.file[filename$='.zip'], a.file[filename$='.rar'], a.file[filename$='.gzip'] { background: url(images/files/zip.png) no-repeat left 100%; } a.file[href$='.mp3'], a.file[href$='.wav'], a.file[href$='.aac'], a.file[filename$='.mp3'], a.file[filename$='.wav'] a.file[filename$='.aac'] { background: url(images/files/music.png) no-repeat left 100%; } a.file[href$='.avi'], a.file[href$='.mkv'], a.file[href$='.mp4'], a.file[filename$='.avi'], a.file[filename$='.mkv'] a.file[filename$='.mp4'] { background: url(images/files/movie.png) no-repeat left 100%; } /* Фрагмент отвечающий за список файлов ul.files {margin:0; color:#8D8D8D;} ul.files span.filesize {margin-left:0.3em} ul.files li { font-size:.875em; margin-bottom:0.4em; position:relative;} ul.files > li::before {content:'';} ul.files > li{text-indent: -22px;} ul.files li div.lock { position:absolute; width:8px; height:9px; left:-12px; top:10px; background:url(images/files/lock_small.png) no-repeat; } */
09

Если вы обратили внимание, то распознавание проходит не только по окончанию значения атрибута href, но и по окончанию атрибута filename. Это сделано на тот случай, если ссылка на файл задана не явно и выглядит примерно как http://www.codius.ru/files/58a259bf-e698-4faf-8a0c-70fa5eb55286 — в этом случае программно задается атрибут filename, значение которого содержит реальное имя файла (например, image1.png), исходя из значения которого и применяется форматирование. Теперь данный код:

10 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="files"> <li><a class="file" filename="GX630-GX660-GX690-RUS.pdf" href="/files/ab2df4cb-c988-4b19-80dc-0565bfdc19e3">Руководство по эксплуатации двигателей</a> <span class="filesize"><nobr>(PDF, 3.4 Мб)</nobr></span></li> <li><a class="file" filename="letter_mcx.PDF" onclick="getaccess();">Письмо Минсельхоза РФ о регистрации техники</a> <span class="filesize"><nobr>(PDF, 294 Кб)</nobr></span> <div class="lock"></div></li> <li><a class="file" filename="letter_gtn.jpg" onclick="getaccess();">Письмо о регистрации в органах гостехнадзора</a> <span class="filesize"><nobr>(JPG, 254 Кб)</nobr></span> <div class="lock"></div></li> <li><a class="file" filename="tech_im.avi" href="/files/17f72ae5-37ab-4176-8b36-4622d1e6d126">Инструкция по монтажу, пуску, регулированию и обкатке изделия</a> <span class="filesize"><nobr>(AVI, 2.9 Мб)</nobr></span></li> <li><a class="file" filename="tech_kdse.rar" href="/files/31bc6e69-3718-4d16-b7ed-5525f2e61bf6">Каталог деталей и сборочных единиц</a> <span class="filesize"><nobr>(RAR, 39.3 Мб)</nobr></span></li> <li><a class="file" filename="default.mp3" href="/files/58a259bf-e698-4faf-8a0c-70fa5eb55286">Фрагмент музыкальной композиции Fly</a> <span class="filesize"><nobr>(MP3, 4.6 Мб)</nobr></span></li> </ul>
11

Будет выглядеть так:

13

Обратите внимание на второй и третий файлы в списке — на иконке висит замочек. Таким образом можно показать, что доступ к данному файлу запрещен. При клике на такую ссылку (можете попробовать кликнуть на ссылки с замочком) будет выполнена функция getaccess();, в которой можно запрограммировать какое-либо специфичное действие, например, показать инструкцию о том, как этот доступ получить:

14 JavaScript
1
2
3
4
5
<script> function getaccess() { alert('для получения доступа к файлу необходимо зарегистрироваться!'); } </script>
15

И в завершение — ссылки на внешние источники:

16 CSS
1
2
3
4
a[href^='http'] { background: url('outersource.png') no-repeat right center; padding-right:16px; }
17

Результат работы чуть ниже — в разделе Что почитать.

18

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

19
P.S.: А что же с кроссбраузерной совместимостью, спросите вы? Как же на все это отреагируют IE версий 7, 6 и ранее?... Да в ж...пу их! Извините не удержался.
21

Похожие запросы:

  • Стилизация (оформление) внешних ссылок на CSS
  • Как стилизовать внешние ссылки
  • Как стилизовать ссылки на файлы
comments powered by HyperComments

Яндекс.Метрика