Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Version 644601 von <percentage>

  • Adressname der Version: Web/CSS/percentage
  • Titel der Version: <percentage>
  • ID der Version: 644601
  • Erstellt:
  • Autor: Sebastianz
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

{{ CSSRef() }}

Übersicht

Der <percentage> CSS Datentyp repräsentiert einen Prozentwert. Viele CSS Eigenschaften akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen {{ Xref_cssnumber() }} Wert unmittelbar gefolgt von einem Prozentzeichen % angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.

Viele Längeneigenschaften verwenden Prozentwerte, wie {{ Cssxref("width") }}, {{ Cssxref("margin") }} und {{ Cssxref("padding") }}. Prozentwerte können auch in {{ Cssxref("font-size") }} vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.

Hinweis: Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen {{ Xref_csslength() }} Wert, verwendet, nicht der Prozentwert.

Interpolation

Werte des <percentage> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die Timingfunktion bestimmt, die mit der Animation verbunden ist.

Beispiele

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Breite: 50%, linker Außenabstand: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Breite: 30%, linker Außenabstand: 60%</div>
</div> 

Ergibt:

{{ EmbedLiveSample('Beispiel_1','600','40') }}

<div style="font-size:18px;">
  Text in Normalgröße (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div> 

Ergibt:

{{ EmbedLiveSample('Beispiel_2','600','40') }}

Spezifikation

Spezifikation Status Kommentar
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }} {{ Spec2('CSS3 Values') }} Keine signifikante Änderung zu CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }} {{ Spec2('CSS2.1') }} Keine Änderung zu CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }} {{ Spec2('CSS1') }}  

Browser Kompatibilität

{{ CompatibilityTable() }}

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 1.0 (1.0) <=5.0 yes 1.0 (85)
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung yes yes yes yes yes

Siehe auch

  • CSS Datentypen: {{ CSSDataTypes() }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Der <code>&lt;percentage&gt;</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Datentyp repräsentiert einen Prozentwert. Viele <a href="/de/docs/Web/CSS/CSS_Referenz" title="en/CSS_Reference">CSS Eigenschaften</a> akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen {{ Xref_cssnumber() }} Wert unmittelbar gefolgt von einem Prozentzeichen <code>%</code> angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.</p>
<p>Viele Längeneigenschaften verwenden Prozentwerte, wie {{ Cssxref("width") }}, {{ Cssxref("margin") }} und {{ Cssxref("padding") }}. Prozentwerte können auch in {{ Cssxref("font-size") }} vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.</p>
<div class="note">
 <strong>Hinweis:</strong> Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen {{ Xref_csslength() }} Wert, verwendet, nicht der Prozentwert.</div>
<h2 id="Interpolation">Interpolation</h2>
<p>Werte des <code>&lt;percentage&gt;</code> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die <a href="/de/docs/Web/CSS/timing-function">Timingfunktion</a> bestimmt, die mit der Animation verbunden ist.</p>
<h2 id="Beispiele">Beispiele</h2>
<div id="Beispiel_1">
 <pre class="brush: html">
&lt;div style="background-color:#0000FF;"&gt;
  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;Breite: 50%, linker Außenabstand: 20%&lt;/div&gt;
  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;Breite: 30%, linker Außenabstand: 60%&lt;/div&gt;
&lt;/div&gt; 
</pre>
</div>
<p>Ergibt:</p>
<p>{{ EmbedLiveSample('Beispiel_1','600','40') }}</p>
<div id="Beispiel_2">
 <pre class="brush: html">
&lt;div style="font-size:18px;"&gt;
  Text in Normalgröße (18px)
  &lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;
  &lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;
&lt;/div&gt; 
</pre>
</div>
<p>Ergibt:</p>
<p>{{ EmbedLiveSample('Beispiel_2','600','40') }}</p>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;') }}</td>
   <td>{{ Spec2('CSS3 Values') }}</td>
   <td>Keine signifikante Änderung zu CSS Level 2 (Revision 1)</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Keine Änderung zu CSS Level 1</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Merkmal</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Grundlegende Unterstützung</td>
    <td>1.0</td>
    <td>1.0 (1.0)</td>
    <td>&lt;=5.0</td>
    <td>yes</td>
    <td>1.0 (85)</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Merkmal</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Grundlegende Unterstützung</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
    <td>yes</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
 <li>CSS Datentypen: {{ CSSDataTypes() }}</li>
</ul>
Zu dieser Version zurücksetzen