목차
사용자 에이전트가 문서를 구문 분석하고 문서 트리를 구성한 후에는 트리의 모든 요소에 대해 대상 미디어 유형에 적용되는 모든 속성에 값을 할당해야 합니다.
속성의 최종 값은 네 단계 계산의 결과로, 지정된 값("specified value")을 통해 결정되고, 상속에 사용되는 값("computed value")으로 변환된 후, 필요하면 절대 값("used value")으로 변환되며, 마지막으로 로컬 환경의 제한에 따라 변환된 값("actual value")으로 변경됩니다.
사용자 에이전트는 다음 메커니즘(우선순위 순서대로)에 따라 각 속성에 지정 값을 먼저 할당해야 합니다:
지정 값은 계단식 처리 중 계산 값으로 해석됩니다. 예를 들어, URI는 절대 URI로 변환되며, 'em' 및 'ex' 단위는 픽셀 또는 절대 길이로 계산됩니다. 값을 계산하는 것은 문서를 렌더링하지 않아도 가능합니다.
사용자 에이전트가 절대 URI로 변환할 수 없는 URI의 계산 값은 지정 값입니다.
속성의 계산 값은 속성 정의의 계산 값 라인에 명시된 대로 결정됩니다. 지정 값이 'inherit'인 경우 계산 값의 정의는 상속 섹션을 참조하세요.
계산 값은 속성이 적용되지 않는 경우에도 존재합니다. 이는 '적용 대상' 라인에 정의됩니다. 그러나 일부 속성은 속성이 요소에 적용되는지 여부에 따라 요소의 계산 값을 정의할 수 있습니다.
계산 값은 문서를 포맷하지 않고 가능한 한 많이 처리됩니다. 하지만 일부 값은 문서를 레이아웃할 때만 결정될 수 있습니다. 예를 들어, 요소의 너비가 포함 블록의 특정 비율로 설정된 경우, 포함 블록의 너비가 결정될 때까지 요소의 너비를 결정할 수 없습니다. 사용 값은 계산 값을 가져와 남아 있는 종속성을 절대 값으로 해석한 결과입니다.
사용 값은 원칙적으로 렌더링에 사용되는 값이지만, 사용자 에이전트는 주어진 환경에서 값을 사용할 수 없을 수도 있습니다. 예를 들어, 사용자 에이전트는 정수 픽셀 너비로만 테두리를 렌더링할 수 있으며 계산된 너비를 근사해야 할 수 있습니다. 또는 사용자 에이전트가 전체 색상이 아닌 흑백 음영만 사용할 수 있어야 할 수도 있습니다. 실제 값은 근사가 적용된 후의 사용 값입니다.
일부 값은 문서 트리의 요소 자식들에게 상속됩니다. 이는 위에 설명되어 있습니다. 각 속성은 상속 여부를 정의합니다.
H1 요소 안에 강조 요소(EM)가 있는 경우를 가정해 보세요:
<H1>The headline <EM>is</EM> important!</H1>
EM 요소에 색상이 지정되지 않은 경우, 강조된 "is"는 부모 요소의 색상을 상속합니다. 따라서 H1의 색상이 파란색이라면, EM 요소도 파란색으로 표시됩니다.
상속이 발생하면 요소는 계산 값을 상속합니다. 부모 요소의 계산 값은 자식 요소의 지정 값과 계산 값이 됩니다.
다음 스타일 시트를 고려해 보세요:
body { font-size: 10pt }
h1 { font-size: 130% }
그리고 이 문서 조각:
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
H1 요소의 'font-size' 속성은 계산 값으로 '13pt'(부모 값인 10pt의 130%)를 가집니다. 계산 값이 'font-size'에 대해 상속되므로, EM 요소도 계산 값으로 '13pt'를 가지게 됩니다. 사용자 에이전트가 13pt 글꼴을 사용할 수 없는 경우, H1 및 EM의 'font-size' 실제 값은 '12pt'일 수 있습니다.
상속은 문서 트리를 따르며, 익명 상자에 의해 차단되지 않는다는 점에 유의하세요.
각 속성은 'inherit'로 계단식 값을 가질 수 있으며, 이는 주어진 요소에 대해 속성이 부모 요소의 계산 값을 지정 값으로 가져간다는 의미입니다. 'inherit' 값은 값 상속을 강제할 때 사용될 수 있으며, 일반적으로 상속되지 않는 속성에도 사용할 수 있습니다.
'inherit' 값이 루트 요소에 설정된 경우 속성은 초기 값으로 할당됩니다.
아래 예제에서 'color'와 'background' 속성은 BODY 요소에 설정되었습니다. 다른 모든 요소에서는 'color' 값이 상속되고 배경은 투명하게 됩니다. 이러한 규칙이 사용자 스타일 시트의 일부라면, 문서 전체에서 흰색 배경에 검은색 텍스트가 강제됩니다.
body {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent !important;
}
'@import' 규칙은 사용자가 다른 스타일 시트에서 스타일 규칙을 가져올 수 있도록 합니다. 현행 표준 CSS 2.2에서는 @import 규칙이 모든 다른 규칙(있는 경우 @charset 규칙 제외)보다 앞서야 합니다. @import 규칙을 무시해야 할 경우는 구문 분석 섹션을 참조하세요. '@import' 키워드 뒤에는 포함할 스타일 시트의 URI가 와야 합니다. 문자열도 허용되며, url(...)로 둘러싼 것처럼 해석됩니다.
다음 줄은 '@import' 구문 두 가지(하나는 "url()"을 사용하고, 다른 하나는 단순 문자열)를 보여줍니다:
@import "mystyle.css";
@import url("mystyle.css");
사용자 에이전트가 지원되지 않는 미디어 유형에 대한 리소스 검색을 피할 수 있도록, 저자는 미디어 종속적인 @import 규칙을 지정할 수 있습니다. 이러한 조건부 가져오기는 URI 뒤에 쉼표로 구분된 미디어 유형을 지정합니다.
다음 규칙은 @import 규칙이 미디어 종속적으로 만들어질 수 있는 방법을 보여줍니다:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
미디어 유형이 없는 경우 가져오기는 무조건적입니다. 'all'을 매체로 지정하는 것은 동일한 효과를 냅니다. 가져오기는 대상 매체가 미디어 목록과 일치하는 경우에만 유효합니다.
대상 매체가 미디어 목록의 항목 중 하나이거나 'all'인 경우 대상 매체는 미디어 목록과 일치합니다.
미디어 쿼리 [MEDIAQ]는 미디어 목록의 구문과 일치 정의를 확장합니다.
동일한 스타일 시트가 여러 위치에서 문서에 가져오거나 연결된 경우, 사용자 에이전트는 각 링크를 별도의 스타일 시트로 간주하고 처리해야 합니다.
스타일 시트는 작성자, 사용자, 사용자 에이전트라는 세 가지 다른 기원을 가질 수 있습니다.
사용자가 시스템 설정(예: 시스템 색상)을 수정하여 기본 스타일 시트에 영향을 줄 수 있습니다. 하지만 일부 사용자 에이전트 구현에서는 기본 스타일 시트의 값을 변경할 수 없도록 합니다.
이 세 가지 기원의 스타일 시트는 범위가 겹치며, 계단식 처리에 따라 상호 작용합니다.
CSS 계단식 처리는 각 스타일 규칙에 가중치를 할당합니다. 여러 규칙이 적용되는 경우 가중치가 가장 큰 규칙이 우선합니다.
기본적으로 작성자 스타일 시트의 규칙은 사용자 스타일 시트의 규칙보다 더 높은 가중치를 가집니다. 그러나 "!important" 규칙의 경우 우선순위가 반대가 됩니다. 모든 사용자 및 작성자 규칙은 사용자 에이전트의 기본 스타일 시트 규칙보다 더 높은 가중치를 가집니다.
요소/속성 조합에 대한 값을 찾으려면, 사용자 에이전트는 다음 정렬 순서를 적용해야 합니다:
개별 선언의 "!important" 설정 외에도, 이 전략은 작성자 스타일 시트에 독자가 가진 스타일 시트보다 더 높은 가중치를 부여합니다. 사용자 에이전트는 특정 작성자 스타일 시트의 영향을 끌 수 있는 기능을 사용자에게 제공해야 합니다. 예를 들어 드롭다운 메뉴를 통해 가능합니다. UAAG 1.0 체크포인트 4.14를 준수하면 이 조건을 충족합니다 [UAAG10].
CSS는 작성자와 사용자 스타일 시트 간에 권한 균형을 조성하려고 합니다. 기본적으로 작성자 스타일 시트의 규칙은 사용자 스타일 시트의 규칙을 덮어씁니다(계단식 규칙 3 참조).
그러나 균형을 위해, "!important" 선언(구분 기호 "!" 및 키워드 "important"가 선언 뒤에 따라붙음)은 일반 선언보다 우선합니다. 작성자 및 사용자 스타일 시트 모두 "!important" 선언을 포함할 수 있으며, 사용자 "!important" 규칙은 작성자 "!important" 규칙을 덮어씁니다. 이 CSS 기능은 특수 요구 사항(큰 글꼴, 색상 조합 등)을 가진 사용자에게 프레젠테이션을 제어할 수 있는 기능을 제공하여 문서 접근성을 개선합니다.
축약 속성(예: 'background')에 "!important"를 선언하는 것은 모든 하위 속성을 "!important"로 선언하는 것과 동일합니다.
다음 예제에서 사용자의 스타일 시트의 첫 번째 규칙은 "!important" 선언을 포함하며, 작성자 스타일 시트의 해당 선언을 덮어씁니다. 두 번째 선언도 "!important"로 표시되었기 때문에 승리합니다. 그러나 사용자의 스타일 시트에서 세 번째 규칙은 "!important"가 아니므로, 작성자 스타일 시트의 두 번째 규칙(축약 속성에 스타일을 설정함)이 승리합니다. 또한 작성자 스타일 시트의 세 번째 규칙은 두 번째 규칙이 "!important"이기 때문에 패배합니다. 이는 "!important" 선언이 작성자 스타일 시트 내에서도 기능이 있음을 보여줍니다.
/* 사용자 스타일 시트 */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }
/* 작성자 스타일 시트 */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
선택자의 명시도는 다음과 같이 계산됩니다:
명시도는 선택자의 형식에만 기반합니다. 예를 들어 "[id=p33]" 형식의 선택자는 속성 선택자로 계산됩니다(a=0, b=0, c=1, d=0). 이는 ID 속성이 소스 문서의 DTD에서 "ID"로 정의되었더라도 마찬가지입니다.
a-b-c-d 네 숫자를 연결하면(큰 진수 체계에서) 명시도가 나타납니다.
몇 가지 예제:
* {} /* a=0 b=0 c=0 d=0 -> 명시도 = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> 명시도 = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> 명시도 = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> 명시도 = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 명시도 = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 명시도 = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 명시도 = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> 명시도 = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> 명시도 = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> 명시도 = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
위 예제에서, P 요소의 색상은 초록색이 됩니다. "style" 속성의 선언은 명시도가 더 높기 때문에 STYLE 요소의 선언을 덮어씁니다.
UA는 HTML 소스 문서에서 프레젠테이션 속성을 존중하도록 선택할 수 있습니다. 이 경우 이러한 속성은 명시도가 0인 해당 CSS 규칙으로 변환되며, 작성자 스타일 시트의 시작 부분에 삽입된 것처럼 처리됩니다. 따라서 이후 스타일 시트 규칙에 의해 덮어씌워질 수 있습니다. 전환 단계에서는 스타일 속성과 스타일 시트가 공존하기 쉽게 하기 위해 이 정책이 유용합니다.
HTML의 경우, 다음 목록에 없는 모든 속성은 프레젠테이션 속성으로 간주해야 합니다: abbr, accept-charset, accept, accesskey, action, alt, archive, axis, charset, checked, cite, class, classid, code, codebase, codetype, colspan, coords, data, datetime, declare, defer, dir, disabled, enctype, for, headers, href, hreflang, http-equiv, id, ismap, label, lang, language, longdesc, maxlength, media, method, multiple, name, nohref, object, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, onunload, profile, prompt, readonly, rel, rev, rowspan, scheme, scope, selected, shape, span, src, standby, start, style, summary, title, type (LI, OL 및 UL 요소 제외), usemap, value, valuetype, version.
다른 언어의 경우, 모든 문서 언어 기반 스타일링은 해당 CSS로 변환되어야 하며, 사용자 에이전트 수준에서 계단식 처리에 참여하거나, HTML 프레젠테이션 힌트와 마찬가지로 작성자 수준 규칙으로 처리되어야 하며 작성자 스타일 시트의 시작 부분에 명시도 0으로 배치되어야 합니다.
다음 사용자 스타일 시트는 모든 문서에서 'b' 요소의 글꼴 두께를 무효화하고, XML 문서에서 색상 속성이 있는 'font' 요소의 색상을 무효화합니다. 그러나 HTML 문서에서 색상 속성이 있는 'font' 요소의 색상에는 영향을 미치지 않습니다:
b { font-weight: normal; }
font[color] { color: orange; }
그러나 다음 규칙은 모든 문서에서 'font' 요소의 색상을 덮어씁니다:
font[color] { color: orange ! important; }