CSSOM و سبک‌های محاسبه‌شده

CSSOM و استایل‌های محاسبه‌شده

مدل شیء CSS متن stylesheet را به اشیای زنده تبدیل می‌کند که در یک cascade واقعی شرکت می‌کنند. CSSStyleSheet شامل قوانین است، CSSStyleDeclaration شامل اعلان‌های ویژگی است، و Element.get_computed_style() نتیجه حل‌شده را گزارش می‌دهد.

تجزیه و پیوست Stylesheet‌ها

CSSStyleSheet.replace_sync() متن stylesheet را تجزیه می‌کند؛ 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"))

حل سلسله‌مراتبی

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 هنگام اشکال‌زدایی برندگان شگفت‌انگیز استفاده کنید
• در هر stylesheet منطقی یک 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