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