CSSOM und Berechnete Stile

Overview

Das CSS-Objektmodell wandelt Stylesheet-Text in Live-Objekte um, die an einer echten Kaskade teilnehmen. CSSStyleSheet enthält Regeln, CSSStyleDeclaration enthält Property-Deklarationen, und Element.get_computed_style() gibt das aufgelöste Ergebnis zurück.

Parsen und Anhängen von Stylesheets

CSSStyleSheet.replace_sync() parst den Stylesheet-Text; Document.attach_style_sheet() registriert das Blatt, sodass seine Regeln angewendet werden. Regeln können auch einzeln verwaltet werden mit insert_rule(), add_rule() und remove_rule():

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red }")
doc.attach_style_sheet(sheet)

Die Regelfamilie

Geparste Blätter enthalten typisierte Regeln: CSSStyleRule für gewöhnliche Selektoren plus CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule und Varianten für Seite/Ebene/Namensraum, gesammelt in einem CSSRuleList. parse_stylesheet() und parse_rule_text() geben die Parsing-Ebene direkt frei.

Deklarationen und Inline-Styles

Die style-Eigenschaft jedes Elements ist ein Live-CSSStyleDeclaration: set_property(), get_property_value(), get_property_priority() und item() Lese- und Schreib-Deklarationen. Inline-Deklarationen haben Vorrang vor Autor-Regeln jeder Selektor-Spezifität:

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
el = doc.create_element("div")
doc.append_child(el)
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red }")
doc.attach_style_sheet(sheet)
inline = el.style
inline.set_property("color", "blue")
print(el.get_computed_style().get_property_value("color"))

Auflösung des Cascades

Element.get_computed_style() gibt ein ComputedStyleDeclaration zurück, das Spezifität, Wichtigkeit und Vererbung widerspiegelt. Eine als !important markierte Autor-Regel schlägt eine nicht-wichtige Inline-Deklaration:

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
el = doc.create_element("div")
doc.append_child(el)
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red !important }")
doc.attach_style_sheet(sheet)
inline = el.style
inline.set_property("color", "blue")
print(el.get_computed_style().get_property_value("color"))

Tipps und bewährte Verfahren

• Sheets anhängen, bevor Sie berechnete Stile auslesen – die Auflösung spiegelt die derzeit angehängten Sheets wider
• Verwenden Sie get_property_priority(), um nach !important zu prüfen, wenn Sie überraschende Gewinner debuggen
• Behalten Sie pro logischem Stylesheet ein CSSStyleSheet bei; CSSRuleList bewahrt die Reihenfolge der Regeln, was bei Gleich-Spezifitäts-Unentschieden wichtig ist
• Für Vererbungsprüfungen lesen Sie zuerst den berechneten Wert des Elternteils und dann den des Kindes

Häufige Probleme

FAQ

Wie parse ich CSS-Text in Objekte?

CSSStyleSheet.replace_sync() für ganze Tabellen, oder parse_rule_text() für eine einzelne Regel.

Was gibt get_computed_style zurück?

Ein ComputedStyleDeclaration — Werte lesen mit get_property_value().

Gewinnen Inline-Stile immer?

Sie übertrumpfen Autorenregeln jeder Spezifität, verlieren jedoch gegen Autorenregeln, die mit !important markiert sind.

API Reference Zusammenfassung

Siehe auch

• Aspose.HTML for Python — Enterprise Documentation