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"))

ヒントとベストプラクティス

• 計算済みスタイルを読む前にシートをアタッチしてください — 解決は現在アタッチされているシートを反映します
• 予期しない勝者をデバッグする際に、!importantをチェックするためにget_property_priority()を使用してください
• 論理スタイルシートごとにCSSStyleSheetを1つだけ保持してください；CSSRuleListは規則の順序を保持し、同等の特異性のタイで重要です
• 継承チェックのために、まず親の計算済み値を読み取り、次に子の値を読み取ります

よくある問題

FAQ

どうすれば CSS テキストをオブジェクトに解析できますか？

全シートには CSSStyleSheet.replace_sync()、単一のルールには parse_rule_text()。

get_computed_style は何を返しますか？

A ComputedStyleDeclaration — get_property_value() で値を読み取ります。

インラインスタイルは常に優先されますか？

それらは特異性に関係なく著者ルールを上回りますが、!important とマークされた著者ルールには負けます。

API Reference 概要

参照

• Aspose.HTML for Python — Enterprise Documentation