CSSOM și Stiluri Calculate

CSSOM și Stilurile calculate

Modelul de obiecte CSS transformă textul foilor de stil în obiecte active care participă la o cascadă reală. CSSStyleSheet conține regulile, CSSStyleDeclaration conține declarațiile de proprietăți și Element.get_computed_style() raportează rezultatul rezolvat.

Analiza și atașarea foilor de stil

CSSStyleSheet.replace_sync() analizează textul foii de stil; Document.attach_style_sheet() înregistrează foaia astfel încât regulile sale să se aplice. Regulile pot fi, de asemenea, gestionate individual cu insert_rule(), add_rule() și 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)

Familia de reguli

Foaile analizate conțin reguli tipizate: CSSStyleRule pentru selectori obișnuiți plus CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule și variantele pagină/strat/spațiu de nume, colectate într-un CSSRuleList. parse_stylesheet() și parse_rule_text() expun stratul de analiză direct.

Declarații și stiluri inline

Fiecare proprietate style a elementului este un CSSStyleDeclaration live: declarații de citire și scriere set_property(), get_property_value(), get_property_priority() și item(). Declarațiile inline depășesc regulile autorului, indiferent de specificitatea selectorului:

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"))

Rezolvarea cascadei

Element.get_computed_style() returnează un ComputedStyleDeclaration care reflectă specificitatea, importanța și moștenirea. O regulă a autorului marcată !important învinge o declarație inline neimportantă:

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"))

Sfaturi și cele mai bune practici

• Atașați foile înainte de a citi stilurile calculate — rezoluția reflectă foile atașate în prezent
• Utilizați get_property_priority() pentru a verifica !important atunci când depanați câștigători surprinzători
• Păstrați un CSSStyleSheet pentru fiecare foaie de stil logică; CSSRuleList păstrează ordinea regulilor, ceea ce contează în caz de egalitate de specificitate
• Pentru verificări de moștenire, citiți mai întâi valoarea calculată a părintelui, apoi a copilului

Probleme comune

FAQ

Cum să analizez textul CSS în obiecte?

CSSStyleSheet.replace_sync() pentru foi întregi, sau parse_rule_text() pentru o regulă singulară.

Ce returnează get_computed_style?

Un ComputedStyleDeclaration — citește valori cu get_property_value().

Stilurile inline câștigă întotdeauna?

Ele depășesc regulile autorului de orice specificitate, dar pierd în fața regulilor autorului marcate !important.

API Reference Rezumat

Vezi și:

• Aspose.HTML for Python — Enterprise Documentation