Навигация¶

Автоматическое определение семантики ссылок, средствами CSS

Изменено 2010/07/03 09:38 Administrator Категоризировано CSS, HTML

<ru-ru>
CSS-стили (относительно этой wiki)
<nowiki>
<pre class="brush: css">
a[href^="http://"] 
{
	background:transparent url(Images/external.png) center right no-repeat;
	display:inline-block;
	padding-right:15px;
}
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 
{
	background:transparent url(Images/compress.png) center left no-repeat;
	display:inline-block;
	padding-left:20px;
	line-height:18px;
}
a[href$='.pdf'] 
{
	background:transparent url(Images/pdffile.png) center left no-repeat;
	display:inline-block;
	padding-left:20px;
	line-height:15px;
}
a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] 
{
	background:transparent url(Images/excelfile.png) center left no-repeat;
	display:inline-block;
	padding-left:20px;
	line-height:15px;
}
a[href$='.doc'], a[href$='.rtf'], a[href$='.wps'], a[href$='.txt'] 
{
	background:transparent url(Images/wordfile.png) center left no-repeat;
	display:inline-block;
	padding-left:20px;
	line-height:15px;
}
a[href^="mailto:"] 
{
	background:transparent url(Images/mailto.png) center left no-repeat;
	display:inline-block;
	padding-left:20px;
	line-height:15px;
}
</pre>
</nowiki>
Примеры отображения (файлов под ссылками нет, просто &mdash; пример):
# <a href="Example.zip">Example.zip</a>
# <a href="Example.pdf">Example.pdf</a>
# <a href="Example.xls">Example.xls</a>
# <a href="Example.doc">Example.doc</a>
# <a href="mailto:forspamers@mail.ru">forspamers@mail.ru</a>
</ru-ru>
<en-us>
[Login.aspx|Log in] or [Register.aspx|create an account] to start this article
</en-us>

Meta Keywords: CSS, отображение, ссылки
Meta Description: Пример определения типа ссылок для отображения средствами CSS
Change Comment: