CSSOM és a számított stílusok

CSSOM és számított stílusok

A CSS objektummodell a stíluslap szöveget élő objektumokká alakítja, amelyek részt vesznek egy valós kaszkádban. CSSStyleSheet tartalmaz szabályokat, CSSStyleDeclaration tartalmaz tulajdonságdeklarációkat, és Element.get_computed_style() jelenti a feloldott eredményt.

Stíluslapok elemzése és csatolása

CSSStyleSheet.replace_sync() elemzi a stíluslap szövegét; Document.attach_style_sheet() regisztrálja a lapot, hogy a szabályai érvényesüljenek. A szabályok egyenként is kezelhetők a insert_rule(), add_rule() és remove_rule() segítségével:

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)

A szabálycsalád

Az elemzett lapok típusos szabályokat tartalmaznak: CSSStyleRule a szokásos szelektorokhoz, valamint CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule, és az oldal/réteg/namespacer változatok, amelyeket egy CSSRuleList gyűjt össze. parse_stylesheet() és parse_rule_text() közvetlenül teszik elérhetővé az elemzési réteget.

Deklarációk és beágyazott stílusok

Minden elem style tulajdonsága egy élő CSSStyleDeclaration: set_property(), get_property_value(), get_property_priority() és item() olvasási és írási deklarációk. A beágyazott deklarációk felülbírálják a szerzői szabályokat bármilyen szelektor specifikussága esetén:

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

A kaszkád feloldása

Element.get_computed_style() egy ComputedStyleDeclaration-t ad vissza, amely tükrözi a specifikusságot, a fontosságot és az öröklődést. Egy !important jelölésű szerzői szabály felülmúlja a nem fontos beágyazott deklaráció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 !important }")
doc.attach_style_sheet(sheet)
inline = el.style
inline.set_property("color", "blue")
print(el.get_computed_style().get_property_value("color"))

Tippek és bevált gyakorlatok

• Csatolj stíluslapokat a számított stílusok olvasása előtt — a feloldás a jelenleg csatolt lapokat tükrözi.
• Használd a get_property_priority()-t a !important ellenőrzésére, ha meglepő győztesekkel találkozol a hibakeresés során.
• Tarts egy CSSStyleSheet-t logikai stíluslaponként; a CSSRuleList megőrzi a szabályok sorrendjét, ami fontos az azonos specifikusságú döntések esetén.
• Az öröklődés ellenőrzéséhez először olvasd a szülő számított értékét, majd a gyermekét.

Gyakori problémák

FAQ

Hogyan tudom a CSS szöveget objektumokká feldolgozni?

CSSStyleSheet.replace_sync() teljes lapokhoz, vagy parse_rule_text() egyetlen szabályhoz.

Mit ad vissza a get_computed_style?

Egy ComputedStyleDeclaration — értékek olvasása a get_property_value() segítségével.

A beágyazott stílusok mindig felülírják?

Legyőzik a szerzői szabályokat bármilyen specifikussággal, de veszítenek a !important jelölésű szerzői szabályokkal.

API Reference Összefoglaló

Lásd még:

• Aspose.HTML for Python — Enterprise Documentation