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

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

CSS-стили (относительно этой wiki)

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;
}

Примеры отображения (файлов под ссылками нет, просто — пример):