让民族团结之花常开长盛 援疆干部与村民结对认亲

Der Wert jeder CSS-Eigenschaft stammt aus der Deklaration mit der gr??ten specificity. Wenn zwei oder mehr Deklarationen mit derselben Spezifit?t unterschiedliche Eigenschaftswerte für dasselbe Element bereitstellen, wird der Deklarationswert angewendet, dessen Selektor das gr??te algorithmische Gewicht hat.

Jeder Eigenschaftswert stammt aus einem einzelnen Eigenschaft-Wert-Paar; es wird ein einzelner Wert aus jeder Eigenschaft angewendet. Selbst wenn der Wert eine kommagetrennte Liste von Werten ist, stammt diese Werteliste aus einer einzigen Deklaration.

Um zu bestimmen, welcher spezifizierte Wert angewendet wird, sammelt und verarbeitet der User Agent alle Stile aus verschiedenen Quellen, wie z.B. Inline-Stilen sowie internen und externen Stylesheets.

Bestimmte Eigenschaften erben Werte von ihren Elternelementen, sofern sie nicht ausdrücklich überschrieben werden. Vererbung tritt auf, wenn keine Stilinformationen für eine bestimmte Eigenschaft auf einem Element existieren. Wenn die Eigenschaft vererbt wird, wird der Wert auf den berechneten Wert des Elternelements gesetzt. Wenn die Eigenschaft nicht vererbt wird, wird ihr Wert auf den Anfangswert für dieses Element gesetzt.

Der Cascade-Algorithmus bestimmt, welcher Wert angewendet werden soll, wenn mehrere widersprüchliche Stile dasselbe Element anvisieren. Der Cascade-Algorithmus definiert, wie User Agents Eigenschaftswerte aus verschiedenen Quellen, Kontexten und/oder Ebenen kombinieren. Wenn ein Selektor mit einem Element übereinstimmt, wird der spezifizierte Wert der Eigenschaft aus dem Ursprung mit der h?chsten Priorit?t angewendet, selbst wenn ein Selektor von einem Ursprung oder einer Ebene mit niedrigerer Priorit?t gr??ere specificity aufweist.

Nach der Anwendung der Cascade-Regeln und der schrittweisen Aufl?sung von Werten stellt der Browser sicher, dass die visuelle Darstellung mit dem verarbeiteten CSS übereinstimmt.

Alle Elemente, die Teil des abgeflachten Elementbaums des Dokuments sind, besitzen deklarierte, kaskadierte, spezifizierte, berechnete, verwendete und aktuelle Werte. Für eine bestimmte Eigenschaft k?nnen diese Werte gleich oder unterschiedlich sein. Zum Beispiel, wenn Ihr gro?er Codebestand das CSS p { font-size: 1.25em; } und Ihr HTML <p>CSS macht Spa?!</p> enth?lt, welche Gr??e wird der Absatz haben? Der font-size-Wert durchl?uft einige Stufen, um vom spezifizierten em-Wert zum gerenderten px-Wert zu gelangen.

• Anfangswert
• Spezifizierter Wert
• Berechneter Wert
• Verwendeter Wert

Diese Werte werden verwendet, um den endgültigen gerenderten Wert zu bestimmen.

Der Anfangswert einer Eigenschaft ist der Standardwert, der in der Definitionstabelle in der Spezifikation aufgeführt ist. Die Verwendung des Anfangswertes h?ngt davon ab, ob eine Eigenschaft vererbt wird oder nicht:

• Für vererbte Eigenschaften wird der Anfangswert nur auf das Wurzelelement angewendet, solange kein spezifizierter Wert angegeben ist.
• Für nicht vererbte Eigenschaften wird der Anfangswert auf alle Elemente angewendet, solange kein spezifizierter Wert angegeben ist.

Sie k?nnen den Anfangswert explizit mit dem initial-Schlüsselwort festlegen.

Der spezifizierte Wert ist der Wert, der ursprünglich in der CSS-Datei oder durch das style-Attribut zugewiesen wurde. Der spezifizierte Wert für eine gegebene Eigenschaft wird nach den folgenden Regeln bestimmt:

1. Wenn das Stylesheet des Dokuments explizit einen Wert für die Eigenschaft angibt, wird der angegebene Wert verwendet.
2. Wenn das Stylesheet des Dokuments keinen Wert angibt, es sich jedoch um eine vererbte Eigenschaft handelt, wird der Wert vom Elternelement übernommen.
3. Wenn keine der oben genannten Regeln zutrifft, wird der Anfangswert des Elements verwendet.

Im Beispiel p { font-size: 1.25em; } ist der spezifizierte Wert 1.25em, es sei denn, der Codebestand enth?lt eine font-size-Deklaration mit gr??erer specificity.

Der berechnete Wert einer Eigenschaft ist der Wert, der w?hrend der Vererbung von Eltern zu Kindern übertragen wird. Es ist das Ergebnis nach der Aufl?sung von relativen Einheiten und benutzerdefinierten Eigenschaften in absolute Werte, jedoch bevor layout-spezifische Informationen berücksichtigt werden.

Der berechnete Wert wird aus dem spezifizierten Wert berechnet durch:

1. Das Behandeln der speziellen Werte inherit, initial, revert, revert-layer, und unset.
2. Das Durchführen der Berechnung, die erforderlich ist, um den Wert zu erreichen, der in der Linie ?Berechneter Wert“ in der Definitionstabelle der Eigenschaft beschrieben ist.

Die Berechnung, die erforderlich ist, um den berechneten Wert einer Eigenschaft zu erreichen, umfasst normalerweise die Umwandlung von relativen Werten (wie denen in em-Einheiten oder Prozents?tzen) in absolute Werte. Zum Beispiel, wenn ein Element spezifizierte Werte font-size: 16px und padding-top: 2em hat, betr?gt der berechnete Wert von padding-top 32px (das Doppelte der Schriftgr??e).

Jedoch werden für einige Eigenschaften (diese, bei denen Prozents?tze relativ zu etwas anderem sind, was das Layout zur Bestimmung erfordert, wie width, margin-right, text-indent und top), prozentual spezifizierte Werte zu prozentual berechneten Werten. Au?erdem werden einheitslose Zahlen, die für die Eigenschaft line-height angegeben sind, zum berechneten Wert, so wie sie angegeben sind. Die relativen Werte, die im berechneten Wert verbleiben, werden zu absoluten, wenn der verwendete Wert bestimmt wird.

Angenommen, p { font-size: 1.25em; }, wenn em 16px ist, wird die berechnete Schriftgr??e für einen Absatz 20px betragen.

Der verwendete Wert ist der Wert der Eigenschaft, nachdem alle Berechnungen auf den berechneten Wert angewendet wurden und er mit layout-spezifischen Details (z.B. in tats?chliche Pixelwerte aufgel?ste Prozents?tze) verfeinert wurde.

Jede CSS-Eigenschaft hat einen verwendeten Wert. Die verwendeten Werte von Dimensionen (z.B. width oder line-height) sind in Pixeln angegeben. Die verwendeten Werte von Shorthand-Eigenschaften (z.B. background) stimmen mit denen ihrer Komponenten-Eigenschaften (z.B. background-color oder background-size) sowie mit position und float überein.

Der verwendete Wert für die width oder inline-size eines Elements ist ein Pixelwert, selbst wenn der spezifizierte Wert der Eigenschaft mit Prozents?tzen oder Schlüsselwortwerten festgelegt wurde.

Wenn wir drei Containerelemente mit ihrer Breite auf auto, 50% und inherit gesetzt haben:

<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>

#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/* Make results easier to see */
div {
  border: 1px solid red;
  padding: 8px;
}

function updateUsedWidth(id) {
  const div = document.getElementById(id);
  const par = div.querySelector(".show-used-width");
  const wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);

W?hrend die drei spezifizierten Werte, auto, 50% und inherit, Schlüsselwort- und <percentage>-Werte sind, liefert das Abrufen der width mit window.getComputedStyle(el)["width"]; ein absolutes L?ngenma? im px-Wert:

?ndern Sie die Fenstergr??e oder drehen Sie Ihr mobiles Ger?t, um die Gr??e und die verwendeten Werte zu ?ndern.

Der gerenderte Wert wird als tats?chlicher Wert bezeichnet, w?hrend der über ein Skript abgerufene Wert als aufgel?ster Wert bezeichnet wird.

Der tats?chliche Wert einer Eigenschaft ist der verwendete Wert dieser Eigenschaft, nachdem alle erforderlichen Approximationen angewendet wurden. Es ist der endgültige gerenderte Wert, wie er vom Browser implementiert wird, einschlie?lich Anpassungen für Rendering-?Macken“ oder -Einschr?nkungen. Zum Beispiel kann ein User Agent, der nur Rahmen mit einer ganzen Pixelbreite rendern kann, die Dicke des Rahmens auf die n?chste ganze Zahl runden.

Die Berechnung umfasst folgende Schritte:

1. Zuerst wird der spezifizierte Wert basierend auf dem Ergebnis der Kaskadierung, Vererbung, oder dem Anfangswert bestimmt.
2. Anschlie?end wird der berechnete Wert gem?? der Spezifikation berechnet (zum Beispiel wird ein span mit position: absolute seine berechnete display in block ?ndern).
3. Dann wird das Layout berechnet, was zum verwendeten Wert führt.
4. Schlie?lich wird der verwendete Wert gem?? den Einschr?nkungen der lokalen Umgebung transformiert, was zum tats?chlichen Wert führt.

Der aufgel?ste Wert einer Eigenschaft ist der Wert, nachdem aktive Stylesheets angewendet wurden und alle grundlegenden Berechnungen, die diese Werte enthalten k?nnen, aufgel?st sind. Die Methode getComputedStyle() gibt ein Live-CSSStyleDeclaration-Objekt zurück, das die aufgel?sten Werte aller auf ein bestimmtes Element angewendeten CSS-Eigenschaften enth?lt. Jeder aufgel?ste Wert ist entweder der berechnete Wert oder der verwendete Wert, je nach Eigenschaft.

Historisch gesehen hat getComputedStyle() den berechneten Wert eines Elements oder Pseudo-Elements zurückgegeben. Als CSS sich weiterentwickelte, ?nderte sich auch das Konzept des ?berechneten Wertes“, aber die von getComputedStyle() zurückgegebenen Werte mussten aus Gründen der Rückw?rtskompatibilit?t mit bereitgestellten Skripten gleich bleiben. Diese Werte sind die ?aufgel?sten Werte“.

Für die meisten Eigenschaften ist der aufgel?ste Wert der berechnete Wert, aber für einige ?ltere Eigenschaften (einschlie?lich width und height) ist es der verwendete Wert. Die CSSOM-Spezifikation bietet detaillierte Informationen pro Eigenschaft.

CSS 2.0 definierte den berechneten Wert als den letzten Schritt in der Berechnung einer Eigenschaft. CSS 2.1 führte die detaillierte Definition des "verwendeten Wertes" ein. Ein Element konnte dann explizit die Breite/H?he seines Elternteils vererben, dessen berechneter Wert ein Prozentsatz ist. Für CSS-Eigenschaften, die nicht vom Layout abh?ngen (z.B. display, font-size, oder line-height), sind die berechneten Werte und verwendeten Werte gleich. Die folgende Liste enth?lt die CSS 2.1-Eigenschaften, die _vom Layout abh?ngen und daher unterschiedliche berechnete und verwendete Werte haben (übernommen aus CSS 2.1 Changes: Specified, computed, and actual values):

• background-position
• bottom, left, right, top
• height, width
• margin-bottom, margin-left, margin-right, margin-top
• min-height, min-width
• padding-bottom, padding-left, padding-right, padding-top
• text-indent

• CSS-Werte zur Steuerung der Vererbung: inherit, initial, revert, revert-layer, und unset
• CSS-Kaskadierung und -Vererbung Modul
• CSS-Syntax Modul