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משמר את סדר הכללים, החשוב בקשרים של ספציפיות שווה - לבדיקות הורשה, קרא תחילה את הערך המחושב של ההורה, ואז של הילד
בעיות נפוצות
| בעיה | סיבה | תיקון |
|---|---|---|
| הערך המחושב מתעלם מכלל | הגיליון אף פעם לא מצורף | קריאה Document.attach_style_sheet() |
| הסגנון המוטמע נעלם באופן בלתי צפוי | לכלל המחבר יש !important | בדוק באמצעות get_property_priority() |
| ערך בירושה חסר | המאפיין אינו ניתן להורשה או שלצאצא יש ערך מקומי | ערכים מקומיים תמיד מנצחים את הערכים המורשים |
FAQ
איך אני מפענח טקסט CSS לאובייקטים?
CSSStyleSheet.replace_sync() עבור גיליונות שלמים, או parse_rule_text() עבור כלל יחיד.
מה מחזיר get_computed_style?
ComputedStyleDeclaration — קרא ערכים עם get_property_value().
האם סגנונות מוטמעים תמיד מנצחים?
הם מתגברים על כללי המחבר מכל ספציפיות, אך מפסידים לכללי המחבר המסומנים !important.
API Reference סיכום
| מחלקה/מתודה | תיאור |
|---|---|
CSSStyleSheet.replace_sync | פענח טקסט של גיליון סגנונות במקום |
Document.attach_style_sheet | רישום גיליון למסמך |
CSSStyleDeclaration.set_property | כתוב הצהרה |
CSSStyleDeclaration.get_property_priority | בדוק !important |
Element.get_computed_style | פתור את הקסקדה עבור אלמנט |
parse_stylesheet | פענוח של גליון סגנון ברמת נמוכה |