CSSOM i obliczone style

CSSOM i style obliczone

Model obiektowy CSS przekształca tekst arkusza stylów w żywe obiekty, które uczestniczą w rzeczywistej kaskadzie. CSSStyleSheet przechowuje reguły, CSSStyleDeclaration przechowuje deklaracje właściwości, a Element.get_computed_style() zgłasza rozwiązany wynik.

Parsowanie i podłączanie arkuszy stylów

CSSStyleSheet.replace_sync() parsuje tekst arkusza stylów; Document.attach_style_sheet() rejestruje arkusz, aby jego reguły były stosowane. Reguły mogą być również zarządzane indywidualnie za pomocą 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)

Rodzina reguł

Przetworzone arkusze zawierają reguły typowane: CSSStyleRule dla zwykłych selektorów oraz CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule i warianty strony/warstwy/przestrzeni nazw, zebrane w CSSRuleList. parse_stylesheet() i parse_rule_text() udostępniają warstwę parsowania bezpośrednio.

Deklaracje i style inline

Właściwość style każdego elementu jest dynamicznym CSSStyleDeclaration: set_property(), get_property_value(), get_property_priority() i item() odczyt i zapis deklaracji. Deklaracje inline mają wyższy priorytet niż reguły autora o dowolnej specyficzności selektora:

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

Rozwiązywanie kaskady

Element.get_computed_style() zwraca ComputedStyleDeclaration odzwierciedlający specyficzność, ważność i dziedziczenie. Reguła autora oznaczona !important pokonuje nieistotną deklarację inline:

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

Wskazówki i najlepsze praktyki

• Dołącz arkusze przed odczytaniem wyliczonych stylów — wynik odzwierciedla aktualnie dołączone arkusze
• Użyj get_property_priority(), aby sprawdzić !important podczas debugowania zaskakujących zwycięzców
• Utrzymuj jeden CSSStyleSheet na logiczny arkusz stylów; CSSRuleList zachowuje kolejność reguł, co ma znaczenie w przypadkach remisów przy równej specyficzności
• Podczas sprawdzania dziedziczenia najpierw odczytaj wyliczoną wartość rodzica, a następnie dziecka

Typowe problemy

FAQ

Jak sparsować tekst CSS na obiekty?

CSSStyleSheet.replace_sync() dla całych arkuszy, lub parse_rule_text() dla pojedynczej reguły.

Co zwraca get_computed_style?

A ComputedStyleDeclaration — odczytaj wartości za pomocą get_property_value().

Czy style inline zawsze wygrywają?

Przebijają reguły autora o dowolnej specyficzności, ale przegrywają z regułami autora oznaczonymi !important.

API Reference Podsumowanie

Zobacz także

• Aspose.HTML for Python — Enterprise Documentation