CSSOM a vypočtené styly

CSSOM a vypočítané styly

Objektový model CSS převádí text stylového listu na živé objekty, které se podílejí na skutečném kaskádování. CSSStyleSheet obsahuje pravidla, CSSStyleDeclaration obsahuje deklarace vlastností a Element.get_computed_style() hlásí vyřešený výsledek.

Parsování a připojování stylových listů

CSSStyleSheet.replace_sync() parsuje text stylového listu; Document.attach_style_sheet() registruje list, aby se jeho pravidla uplatnila. Pravidla lze také spravovat jednotlivě pomocí insert_rule(), add_rule() a 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)

Rodina pravidel

Parsované listy obsahují typovaná pravidla: CSSStyleRule pro běžné selektory plus CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule a varianty stránky/vrstvy/jmenného prostoru, shromážděné v CSSRuleList. parse_stylesheet() a parse_rule_text() přímo vystavují vrstvu parsování.

Deklarace a vložené styly

Vlastnost style každého elementu je živý CSSStyleDeclaration: set_property(), get_property_value(), get_property_priority() a item() čtení a zápisu deklarací. Inline deklarace mají přednost před autorovými pravidly jakékoli specifikace selektoru:

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

Řešení kaskády

Element.get_computed_style() vrací ComputedStyleDeclaration, který odráží specifikaci, důležitost a dědičnost. Autorovo pravidlo označené !important přebije nedůležitou inline deklaraci:

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

Tipy a osvědčené postupy

• Připojte listy před načtením vypočítaných stylů — rozlišení odráží aktuálně připojené listy
• Použijte get_property_priority() k ověření !important při ladění překvapivých vítězů
• Udržujte jeden CSSStyleSheet na logický stylopis; CSSRuleList zachovává pořadí pravidel, což má význam u vazeb se stejnou specifikací
• Pro kontroly dědičnosti načtěte nejprve vypočítanou hodnotu rodiče, poté dítěte

Běžné problémy

FAQ

Jak mohu parsovat text CSS do objektů?

CSSStyleSheet.replace_sync() pro celé listy, nebo parse_rule_text() pro jedno pravidlo.

Co vrací get_computed_style?

A ComputedStyleDeclaration — čtěte hodnoty pomocí get_property_value().

Mají vložené styly vždy přednost?

Převáží autorova pravidla jakékoli specifikace, ale prohrávají proti autorovým pravidlům označeným !important.

API Reference Shrnutí

Viz také:

• Aspose.HTML for Python — Enterprise Documentation