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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
---
title: <url>
slug: Web/CSS/url
tags:
- CSS
- Layout
- Referenz
- URI
- URL
translation_of: Web/CSS/url
---
<div>{{ CssRef() }}</div>
<p>Der <strong><code><url></code></strong> <a href="/de/docs/Web/CSS" title="CSS">CSS</a>-<a href="/de/docs/Web/CSS/CSS_Types">Datentyp</a> bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.</p>
<div class="note">
<p><strong>URI oder URL?</strong> Es gibt einen Unterschied zwischen einem <a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Identifier" title="https://de.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> und einem <a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Locator" title="https://de.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den <em>Speicherort</em> einer Ressource. Ein URI kann entweder ein URL oder ein Name (<a class="external" href="https://de.wikipedia.org/wiki/Uniform_Resource_Name" title="https://de.wikipedia.org/wiki/Uniform_Resource_Name">URN</a>) einer Ressource sein.</p>
<p>In CSS1 die funktionale Notation <code>url()</code> beschrieb nur echte URLs. In CSS2.1 die Definition von <code>url()</code> wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass <code>url()</code> verwendet werden konnte, um ein <code><uri></code> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet <code>url()</code> nur echte <code><url></code>s.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<p>Der <code><url></code> Datentyp wird mit der funktionalen Notation <code><a id="The_url()_functional_notation" name="The_url()_functional_notation">url()</a></code> spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).</p>
<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png")
<a_css_property>: url('http://mysite.example.com/mycursor.png')
<a_css_property>: url(http://mysite.example.com/mycursor.png)
</pre>
<div class="note">
<p><strong>Hinweis:</strong> Steuerzeichen über <span id="summary_alias_container"><span id="short_desc_nonedit_display">0x7e sind ab Firefox 15 </span></span><span><span>in URLs ohne Anführungszeichen nicht erlaubt. Sieh</span></span> {{Bug(752230)}} für mehr Details.</p>
</div>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: css">.topbanner {
background: url("topbanner.png") #00D no-repeat fixed;
}
</pre>
<pre class="brush: css">ul {
list-style: square url(http://www.example.com/redball.png);
}
</pre>
<h2 id="Specifications" name="Specifications">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Values', '#urls', '<url>') }}</td>
<td>{{ Spec2('CSS3 Values') }}</td>
<td>Keine wichtige Änderungen seit CSS2.1.</td>
</tr>
<tr>
<td>{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Keine wichtige Änderungen seit CSS1.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#url', '<url>') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Erste Definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browserkompatibilität</h2>
<p> </p>
<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten erzeugt. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und schicken Sie uns ein Pull-Request.</div>
<p>{{Compat("css.types.url")}}</p>
<p> </p>
|
