Beispiel:HTML-Links-4.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Links auf unterschiedliche Dokumenttypen kennzeichnen</title>
<style>
a[href$=".mp3"] span,
a[type="application/zip"] span {
width: 2.5em;
height: 2.5em;
margin-right: 0.5em;
display: inline-block;
font: 0/0;
color: transparent;
}
a[href$=".mp3"] span{
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2099%2099%22%3E%0A%20%20%3Ctitle%3ESymbol%20fuer%20mp3-Datei%3C/title%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20text%20%7B%0A%09%20%20font-size%3A%2030px%3B%0A%09%20%20font-weight%3A%20bold%3B%0A%09%20%20fill%3A%20%23c32e04%3B%0A%09%7D%0A%20%20%3C/style%3E%0A%20%20%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2297%22%20height%3D%2297%22%20fill%3D%22none%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20/%3E%0A%20%20%3Cpath%20id%3D%22rahmen%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20d%3D%22M87%2C20%20l-18%2C-16%20h-55%20a10%2C10%200%200%2C0%20-10%2C10%20v71%20a10%2C10%200%200%2C0%2010%2C10%20h71%20a10%2C10%200%200%2C0%2010%2C-10%20v-55%20h-20%20a10%2C10%200%200%2C1%20-10%2C-10%20v-8%22/%3E%0A%20%20%3Cpath%20id%3D%22noten%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M20%2C55%20a6%2C6%200%201%2C0%206%2C6%20v-30%20l25%2C-10%20v30%20a6%2C6%200%201%2C1%20-6%2C-6%22%20/%3E%0A%20%20%3Ctext%20x%3D%2220%22%20y%3D%2285%22%3E.mp3%3C/text%3E%0A%3C/svg%3E");
}
a[type="application/zip"] span{
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20viewBox%3D%220%200%2099%2099%22%3E%0A%20%20%3Ctitle%3ESymbol%20fuer%20zip-Datei%3C/title%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20id%3D%22muster1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2214%22%20height%3D%226%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%226%22%20height%3D%223%22%20fill%3D%22black%22%20/%3E%0A%09%20%20%3Crect%20x%3D%228%22%20y%3D%223%22%20width%3D%226%22%20height%3D%223%22%20fill%3D%22black%22%20/%3E%0A%09%20%20%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22black%22%20/%3E%0A%09%20%20%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%224%22%20height%3D%221%22%20fill%3D%22black%22%20/%3E%09%0A%20%20%20%20%3C/pattern%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cstyle%3E%0A%20%20%20%20text%20%7B%0A%09%20%20font-size%3A%2030px%3B%0A%09%20%20font-weight%3A%20bold%3B%0A%09%20%20fill%3A%20%23c32e04%3B%0A%09%7D%0A%20%20%3C/style%3E%0A%20%20%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2297%22%20height%3D%2297%22%20fill%3D%22none%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20/%3E%0A%20%20%3Cpath%20id%3D%22rahmen%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20d%3D%22M87%2C20%20l-18%2C-16%20h-55%20a10%2C10%200%200%2C0%20-10%2C10%20v71%20a10%2C10%200%200%2C0%2010%2C10%20h71%20a10%2C10%200%200%2C0%2010%2C-10%20v-55%20h-20%20a10%2C10%200%200%2C1%20-10%2C-10%20v-8%22/%3E%0A%20%20%3Crect%20id%3D%22zip%22%20width%3D%2213.9%22%20height%3D%2230%22%20fill%3D%22url%28%23muster1%29%22%20transform%3D%22translate%2820%2C6%29%20scale%282%2C2%29%22/%3E%0A%20%20%3Ctext%20x%3D%2240%22%20y%3D%2285%22%3E.zip%3C/text%3E%0A%3C/svg%3E");
}
li {
margin-bottom: 1em;
}
li > span {
display:inline-block;
width: 15em;
}
li > a {
display: inline-block;
width: 10em;
}
a:hover, a:focus {
background: #fffbf0;
}
</style>
</head>
<body>
<h1>Links auf unterschiedliche Dokumenttypen kennzeichnen</h1>
<h2>Toptitel der Klassik</h2>
<ol>
<li>
<span data-attribute="title">Europahymne (Beethoven)</span>
<a href="/local/Europahymne.mp3" title="mp3 direkt hören!"><span>mp3</span> (976kB)</a>
<a href="/local/Europahymne.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>ZIP</span> (925kB)</a>
(7. Mai 1824)
</li>
<li>
<span data-attribute="title">Halleluja (Händel)</span>
<a href="#Halleluja.mp3" title="mp3 direkt hören!"><span>mp3</span> (1.236kB)</a>
<a href="#Halleluja.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>zip</span> (1.125kB)</a>
(1743)
</li>
<li>
<span data-attribute="title">kleine Nachtmusik (Mozart)</span>
<a href="#Nachtmusik.mp3" title="mp3 direkt hören!"><span>mp3</span> (1.476kB)</a>
<a href="#Nachtmusik.zip" title="mp3 als ZIP-Archiv" type="application/zip"><span>mp3</span> (1.111kB)</a>
(10. August 1787)
</li>
</ol>
</body>
</html>
