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().

Чи завжди переважають inline-стилі?

Вони переважають правила автора будь-якої специфічності, але програють правилам автора, позначеним !important.

API Reference Огляд

Дивіться також

• Aspose.HTML for Python — Enterprise Documentation