CSSOM và Kiểu đã tính toán

CSSOM và Kiểu tính toán

Mô hình đối tượng CSS chuyển văn bản bảng kiểu thành các đối tượng sống động tham gia vào một chuỗi cascade thực tế. CSSStyleSheet chứa các quy tắc, CSSStyleDeclaration chứa các khai báo thuộc tính, và Element.get_computed_style() báo cáo kết quả đã giải quyết.

Phân tích và Gắn kết các bảng kiểu

CSSStyleSheet.replace_sync() phân tích văn bản bảng kiểu; Document.attach_style_sheet() đăng ký bảng để các quy tắc của nó được áp dụng. Các quy tắc cũng có thể được quản lý riêng lẻ bằng insert_rule(), add_rule(), và 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)

Nhóm Quy tắc

Những bảng đã phân tích chứa các quy tắc được phân loại: CSSStyleRule cho các bộ chọn thông thường cộng với CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule, và các biến thể trang/lớp/không gian tên, được tập hợp trong một CSSRuleList. parse_stylesheet() và parse_rule_text() cho phép tiếp cận lớp phân tích một cách trực tiếp.

Khai báo và Kiểu nội tuyến

Thuộc tính style của mỗi phần tử là một CSSStyleDeclaration trực tiếp: set_property(), get_property_value(), get_property_priority(), và item() là các khai báo đọc và ghi. Các khai báo nội tuyến có ưu tiên hơn các quy tắc của tác giả bất kể độ đặc hiệu của bộ chọn:

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

Giải quyết Cascade

Element.get_computed_style() trả về một ComputedStyleDeclaration phản ánh độ đặc hiệu, tầm quan trọng và kế thừa. Một quy tắc của tác giả được đánh dấu !important thắng một khai báo nội tuyến không quan trọng:

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

Mẹo và Thực hành Tốt nhất

• Gắn các sheet trước khi đọc kiểu đã tính — kết quả phản ánh các sheet đang được gắn hiện tại
• Sử dụng get_property_priority() để kiểm tra !important khi gỡ lỗi các trường hợp thắng bất ngờ
• Giữ một CSSStyleSheet cho mỗi stylesheet logic; CSSRuleList bảo toàn thứ tự quy tắc, điều này quan trọng khi có sự cân bằng độ đặc hiệu bằng nhau
• Đối với kiểm tra kế thừa, đọc giá trị đã tính của phần tử cha trước, sau đó là của phần tử con

Các vấn đề thường gặp

FAQ

Làm thế nào để tôi phân tích cú pháp văn bản CSS thành các đối tượng?

CSSStyleSheet.replace_sync() cho toàn bộ bảng, hoặc parse_rule_text() cho một quy tắc duy nhất.

Hàm get_computed_style trả về gì?

Một ComputedStyleDeclaration — đọc giá trị bằng get_property_value().

Các kiểu nội tuyến luôn thắng không?

Chúng vượt qua các quy tắc của tác giả bất kể độ đặc hiệu, nhưng thua các quy tắc của tác giả được đánh dấu !important.

API Reference Tóm tắt

Xem thêm

• Aspose.HTML for Python — Enterprise Documentation