CSSOM dan Gaya yang Dihitung

CSSOM dan Gaya Terhitung

Model objek CSS mengubah teks stylesheet menjadi objek hidup yang berpartisipasi dalam cascade yang sesungguhnya. CSSStyleSheet menyimpan aturan, CSSStyleDeclaration menyimpan deklarasi properti, dan Element.get_computed_style() melaporkan hasil yang terpecahkan.

Penguraian dan Penempelan Stylesheet

CSSStyleSheet.replace_sync() mengurai teks stylesheet; Document.attach_style_sheet() mendaftarkan lembar sehingga aturannya berlaku. Aturan juga dapat dikelola secara individual dengan insert_rule(), add_rule(), dan 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)

Keluarga Aturan

Lembar yang diparsing berisi aturan bertipe: CSSStyleRule untuk selector biasa ditambah CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule, dan varian halaman/lapisan/namespace, yang dikumpulkan dalam sebuah CSSRuleList. parse_stylesheet() dan parse_rule_text() mengekspos lapisan parsing secara langsung.

Deklarasi dan Gaya Inline

Properti style setiap elemen bersifat langsung CSSStyleDeclaration: set_property(), get_property_value(), get_property_priority(), dan item() deklarasi baca dan tulis. Deklarasi inline mengungguli aturan penulis dengan spesifisitas selector apa pun:

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

Menyelesaikan Cascade

Element.get_computed_style() mengembalikan ComputedStyleDeclaration yang mencerminkan spesifisitas, pentingnya, dan pewarisan. Aturan penulis yang ditandai !important mengalahkan deklarasi inline yang tidak penting:

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

Tips dan Praktik Terbaik

• Lampirkan sheet sebelum membaca gaya terhitung — resolusi mencerminkan sheet yang saat ini terlampir
• Gunakan get_property_priority() untuk memeriksa !important saat men-debug pemenang yang mengejutkan
• Pertahankan satu CSSStyleSheet per stylesheet logis; CSSRuleList mempertahankan urutan aturan, yang penting untuk ikatan dengan spesifisitas yang sama
• Untuk pemeriksaan pewarisan, baca nilai terhitung orang tua terlebih dahulu, kemudian nilai anak

Masalah Umum

FAQ

Bagaimana cara saya mengurai teks CSS menjadi objek?

CSSStyleSheet.replace_sync() untuk seluruh lembar, atau parse_rule_text() untuk satu aturan.

Apa yang dikembalikan get_computed_style?

Sebuah ComputedStyleDeclaration — baca nilai dengan get_property_value().

Apakah gaya inline selalu menang?

Mereka mengalahkan aturan penulis dengan spesifisitas apa pun, tetapi kalah pada aturan penulis yang ditandai !important.

API Reference Ringkasan

Lihat Juga

• Aspose.HTML for Python — Enterprise Documentation