CSSOM וסגנונות מחושבים

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פענוח של גליון סגנון ברמת נמוכה

ראה גם

 עברית