CSSOM والأنماط المحسوبة

CSSOM والأنماط المحسوبة

نموذج الكائن CSS يحول نص ورقة الأنماط إلى كائنات حية تشارك في تدفق حقيقي. 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"))

حل التدرج

تُعيد 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