CSSOM и вычисленные стили

CSSOM и вычисленные стили

Объектная модель CSS превращает текст таблицы стилей в живые объекты, которые участвуют в реальном каскаде. CSSStyleSheet содержит правила, CSSStyleDeclaration содержит объявления свойств, а Element.get_computed_style() сообщает о полученном результате.

Разбор и присоединение таблиц стилей

CSSStyleSheet.replace_sync() разбирает текст таблицы стилей; Document.attach_style_sheet() регистрирует лист, чтобы его правила применялись. Правила также могут управляться по отдельности с помощью insert_rule(), add_rule() и 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)

Семейство правил

Разобранные листы содержат типизированные правила: CSSStyleRule для обычных селекторов плюс CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule и варианты страниц/слоёв/пространств имён, собранные в CSSRuleList. parse_stylesheet() и parse_rule_text() напрямую открывают слой разбора.

Объявления и встроенные стили

Свойство style каждого элемента является «живым» CSSStyleDeclaration: set_property(), get_property_value(), get_property_priority() и item() — объявления чтения и записи. Встроенные объявления имеют приоритет над правилами автора любого уровня специфичности селектора:

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

Разрешение каскада

Element.get_computed_style() возвращает ComputedStyleDeclaration, отражающий специфичность, важность и наследование. Правило автора, отмеченное !important, превосходит необязательное встроенное объявление:

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

Советы и лучшие практики

• Подключайте листы перед чтением вычисленных стилей — разрешение отражает текущие подключённые листы
• Используйте get_property_priority(), чтобы проверить наличие !important при отладке неожиданных победителей
• Храните один CSSStyleSheet на каждый логический лист стилей; CSSRuleList сохраняет порядок правил, что имеет значение при равных специфичностях
• Для проверки наследования сначала читайте вычисленное значение родителя, затем дочернего

Распространённые проблемы

FAQ

Как разобрать текст CSS в объекты?

CSSStyleSheet.replace_sync() для целых листов, или parse_rule_text() для отдельного правила.

Что возвращает get_computed_style?

Объект ComputedStyleDeclaration — считывайте значения с помощью get_property_value().

Всегда ли встроенные стили имеют приоритет?

Они превосходят правила автора любой специфичности, но уступают правилам автора, помеченным !important.

API Reference Сводка

См. также:

• Aspose.HTML for Python — Enterprise Documentation