CSSOM e Estilos Computados

CSSOM e Estilos Computados

O modelo de objeto CSS transforma o texto da folha de estilos em objetos vivos que participam de uma cascata real. CSSStyleSheet contém regras, CSSStyleDeclaration contém declarações de propriedades e Element.get_computed_style() relata o resultado resolvido.

Análise e Anexação de Folhas de Estilo

CSSStyleSheet.replace_sync() analisa o texto da folha de estilos; Document.attach_style_sheet() registra a folha para que suas regras sejam aplicadas. As regras também podem ser gerenciadas individualmente com insert_rule(), add_rule() e 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)

A Família de Regras

Folhas analisadas contêm regras tipificadas: CSSStyleRule para seletores comuns, além de CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule e variantes de página/camada/espaço de nomes, coletadas em um CSSRuleList. parse_stylesheet() e parse_rule_text() expõem a camada de análise diretamente.

Declarações e Estilos Inline

A propriedade style de cada elemento é um CSSStyleDeclaration ao vivo: set_property(), get_property_value(), get_property_priority() e item() declarações de leitura e escrita. Declarações inline têm precedência sobre regras de autor de qualquer especificidade de seletor:

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

Resolvendo a Cascata

Element.get_computed_style() retorna um ComputedStyleDeclaration que reflete especificidade, importância e herança. Uma regra de autor marcada !important supera uma declaração inline não importante:

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

Dicas e Melhores Práticas

• Anexe folhas antes de ler estilos computados — a resolução reflete as folhas atualmente anexadas
• Use get_property_priority() para verificar !important ao depurar vencedores surpreendentes
• Mantenha um CSSStyleSheet por folha de estilo lógica; CSSRuleList preserva a ordem das regras, o que importa em empates de especificidade igual
• Para verificações de herança, leia primeiro o valor computado do pai, depois o do filho

Problemas Comuns

FAQ

Como faço para analisar texto CSS em objetos?

CSSStyleSheet.replace_sync() para planilhas completas, ou parse_rule_text() para uma única regra.

O que get_computed_style retorna?

Um ComputedStyleDeclaration — leia valores com get_property_value().

Os estilos inline sempre prevalecem?

Eles superam regras de autor de qualquer especificidade, mas perdem para regras de autor marcadas !important.

API Reference Resumo

Ver também

• Aspose.HTML for Python — Enterprise Documentation