CSSOM และสไตล์ที่คำนวณ

CSSOM และสไตล์ที่คำนวณแล้ว

โมเดลวัตถุ CSS จะเปลี่ยนข้อความสไตล์ชีตให้เป็นออบเจ็กต์ที่ทำงานแบบเรียลไทม์ซึ่งเข้าร่วมใน cascade อย่างแท้จริง 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"))

การแก้ไข Cascade

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

สไตล์อินไลน์ชนะเสมอหรือไม่?

พวกมันชนะกฎของผู้เขียนใด ๆ ไม่ว่าจะมีความจำเพาะระดับใด แต่แพ้ต่อกฎของผู้เขียนที่มีเครื่องหมาย !important.

API Reference สรุป

ดูเพิ่มเติม

• Aspose.HTML for Python — Enterprise Documentation