CSSOM y Estilos Computados

CSSOM y Estilos Calculados

El modelo de objetos CSS convierte el texto de la hoja de estilos en objetos vivos que participan en una cascada real. CSSStyleSheet contiene reglas, CSSStyleDeclaration contiene declaraciones de propiedades, y Element.get_computed_style() informa el resultado resuelto.

Análisis y Vinculación de Hojas de Estilo

CSSStyleSheet.replace_sync() analiza el texto de la hoja de estilo; Document.attach_style_sheet() registra la hoja para que sus reglas se apliquen. Las reglas también pueden gestionarse individualmente con insert_rule(), add_rule() y 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)

La familia de reglas

Las hojas analizadas contienen reglas tipificadas: CSSStyleRule para selectores ordinarios más CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule y variantes de página/capa/espacio de nombres, recopiladas en un CSSRuleList. parse_stylesheet() y parse_rule_text() exponen la capa de análisis directamente.

Declaraciones y estilos en línea

La propiedad style de cada elemento es un CSSStyleDeclaration en vivo: set_property(), get_property_value(), get_property_priority() y item() declaraciones de lectura y escritura. Las declaraciones inline superan las reglas del autor de cualquier especificidad de selector:

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

Resolviendo la cascada

Element.get_computed_style() devuelve un ComputedStyleDeclaration que refleja la especificidad, la importancia y la herencia. Una regla de autor marcada !important supera una declaración inline no 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"))

Consejos y mejores prácticas

• Adjunte hojas antes de leer los estilos computados — la resolución refleja las hojas actualmente adjuntas
• Utilice get_property_priority() para comprobar !important al depurar ganadores inesperados
• Mantenga un CSSStyleSheet por hoja de estilo lógica; CSSRuleList preserva el orden de las reglas, lo cual es importante para empates de especificidad igual
• Para verificaciones de herencia, lea primero el valor computado del padre y luego el del hijo

Problemas comunes

FAQ

¿Cómo analizo el texto CSS en objetos?

CSSStyleSheet.replace_sync() para hojas completas, o parse_rule_text() para una regla única.

¿Qué devuelve get_computed_style?

Un ComputedStyleDeclaration — lee valores con get_property_value().

¿Los estilos en línea siempre prevalecen?

Superan las reglas del autor de cualquier especificidad, pero pierden frente a las reglas del autor marcadas !important.

API Reference Resumen

Ver también

• Aspose.HTML for Python — Enterprise Documentation