КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ

[Главная страница] [HTML/CSS] [Контакты]

При создании ссылки на внешние ресурсы целесообразно использовать визуальные подсказки, дающие пользователю понять, что ссылка ведет на другой сайт. Это можно сделать с помощью CSS, не изменяя разметку самого документа.

Для оформления внешних ссылок можно использовать селектор CSS3, поддерживаемый многими современными броузерами. В следующем абзаце первая ссылка ведет на другую страницу того же сайта, а вторая – на другой веб-сайт (Google).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta. Donec eget quam. Morbi libero. Curabitur ut justo vehicula elit feugiat lacinia. Morbi ac quam. Sed venenatis, lectus quis porta viverra, lectus sapien tempus odio, ac volutpat mi dolor ac elit. Go somewhere else Download a PDF Email someone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta. Donec eget quam. Morbi libero. Curabitur ut justo vehicula elit feugiat lacinia. Morbi ac quam. Sed venenatis, lectus quis porta viverra, lectus sapien tempus odio, ac volutpat mi dolor ac elit.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
body {
  background-color: #ffffff;
  color: #000000;
  margin: 0;
  padding: 1em;
  font: 1em Arial, Helvetica, sans-serif;
}
ul.links {
  margin: 0;
  padding: 0;
  list-style: none;
}

a[href ^="http:"] {
  padding-left: 20px;
  background-image: url(link_icon_external.gif);
  background-repeat: no-repeat;
}

a[href ^="mailto:"] {
  padding-left: 20px;
  background-image: url(link_icon_email.gif);
  background-repeat: no-repeat;
}

a[href $=".pdf"] {
  padding-left: 20px;
  background-image: url(link_icon_pdf.gif);
  background-repeat: no-repeat;
}
</style>
</head>

<body>
	<p>Lorem ipsum dolor sit amet, <a href="page2.html">consectetur adipiscing elit</a>. Aenean porta. 
	Donec eget quam. Morbi libero. Curabitur ut justo vehicula elit feugiat lacinia. 
	Morbi ac quam. <a href="http://www.google.com.ua" target="_blank">Sed venenatis</a>, 
	lectus quis porta viverra, lectus sapien tempus odio, ac volutpat mi dolor ac elit.</p>
	
	<ul class="links">
	  <li><a href="http://www.google.com">Go somewhere else</a></li>
	  <li><a href="/files/example.pdf">Download a PDF</a></li>
	  <li><a href="mailto:info@example.com">Email someone</a></li>
	</ul>
</body>

Для обращения к ссылке, начинающейся с http:, и добавления к ней пиктограммы можно использовать селектор, описанный в спецификации CSS3:

a[href ^="http:"] {
    padding-left: 20px;
    background-image: url(link_icon_external.gif);
    background-repeat: no-repeat;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta. Donec eget quam. Morbi libero. Curabitur ut justo vehicula elit feugiat lacinia. Morbi ac quam. Sed venenatis, lectus quis porta viverra, lectus sapien tempus odio, ac volutpat mi dolor ac elit.

Рядом со всеми ссылками, начинающимися с http: (они должны вести на внешние ресурсы, поскольку для ссылок, ведущих на другие страницы того же сайта не нужно вводить http:), будет показана пиктограмма в виде земного шара.

Рассмотрим селектор атрибута a[href ^="http:"] более подробно.

Атрибутом для данного селектора выбран href, и мы хотим, чтобы он ссылался на элементы, у которых значение данного атрибута начинается с http:. Оператор ^= означает «начинается с». С помощью похожего селектора атрибута можно, к примеру, выбрать все ссылки на электронные адреса: a[href ^="mailto:"].

Селекторы атрибутов удобно также использовать для анализа расширения файла, на который указывает ссылка. Например, анализируя расширение файла в тексте ссылки, можно добавить значок, указывающий на то, что это файл в формате PDF и т. п. Селектор a[href $=".pdf"] указывает на все ссылки с расширением файла .pdf. Оператор $= означает «заканчивается на», поэтому данный селектор выбирает все элементы, значение атрибута href которых заканчивается на .pdf. Ниже представлен пример использования всех рассмотренных трех селекторов:

html:

<ul class="links">
    <li><a href="http://www.google.com">Go somewhere else</a></li>
    <li><a href="/files/example.pdf">Download a PDF</a></li>
    <li><a href="mailto:info@example.com">Email someone</a></li>
</ul>

css:

a[href ^="http:"] {
    padding-left: 20px;
    background-image: url(link_icon_external.gif);
    background-repeat: no-repeat;
}

a[href ^="mailto:"] {
    padding-left: 20px;
    background-image: url(link_icon_email.gif);
    background-repeat: no-repeat;
}

a[href $=".pdf"] {
    padding-left: 20px;
    background-image: url(link_icon_pdf.gif);
    background-repeat: no-repeat;
}

Go somewhere else Download a PDF Email someone

Селекторы атрибутов полезно использовать в подобных ситуациях – для внесения привлекательных дополнений в дизайн вашей страницы.

Источник: Рейчел Эндрю "CSS и 101 совет"

КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

Навигация