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을 유지하세요; 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