| 6 속성값 지정, 카스테이딩(Cascading)과 전달 | |
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
사용도구가 문서를 해석(parse)하고 문서계통(tree)을 구성하면, 계통에서 각 엘레멘트에는 목표 메디아 타입(media type)에 적용되는 각 속성값을 할당해야 한다.
속성의 최종값은 다음 세단계 계산 결과이다: 이 값은 이 규격을 통하여 정의되고("지정된 값"), 그 후 필요하면 절대값으로 산정되고 ("계산된 값"), 최종적으로 지역 환경의 제한에 따라 변환된다("실제값").
사용도구는 우선 다음 기능들(우선순위로)에 의거하여 속성에 지정된 값을 할당하여야 한다:
모체를 가지고 있기 않기 때문에, 문서계통의 최상위(root)인 경우는 모체 엘레멘트로 부터의 값들을 사용할 수 없다; 이 경우 필요하다면 최초값이 사용된다.
지정된 값은 절대적(다른 값에 상대적으로 지정하지 않은 것, 예로 'red' 또는 '2mm') 또는 상대적(다른 값에 상대적으로 지정한 것, 예 'auto', '2em', '12%') 일 수 있다. 절대값에서는 계산이 필요 없어 계산된 값을 찾을 필요가 없다.
이와는 달리, 상대값은 계산된 값으로 환산되어야 한다: 백분율은 참조 값(각 속성은 그 값을 지정함)에 곱해져야 하고, 상대적 단위(unit: em, ex, px)를 갖는 값은 적당한 글꼴(font) 또는 픽셀(pixel) 크기를 곱하여, 절대값으로 만들어 져야하고, 'auto' 값은 각 속성의 주어진 공식에 의하여 계산되어야 하며, 어떤 키워드(keyword)들 ('smaller', 'bolder', 'inherit')은 그들의 정의에 따라 대체되어야 한다.
대부분의 경우, 엘레멘트에 전달(inherit)되는 것은 계산된 값이다. 그러나, 일부 지정된 값(예: 'line-height' 속성의 수치 값)이 전달될 수 있는 속성들도 있다. 자식(child) 엘레멘트에 계산된 값을 전달(inherit)하지 않는 경우는, 그 속성 정의에 설명되어 있다.
계산된 값은 원칙적으로 즉시 사용이 가능하나, 사용도구는 주어진 환경에서 사용하지 않아도 된다. 예를 들어, 사용도구는 테두리(border)의 정수 픽셀(pixel) 너비들 만을 사용할 수 있다. 또한 계산된 값의 근사치를 가질 수 있다. 실제적인 값은 계산된 값을 근사치화한 다음에 적용된다.
일부 값들은 문서계통에서 그 엘레멘트의 자식(child)에 전달(inherit)된다. 각 속성은 이들이 전달되는가 않되는가를 정의한다.
내부에 EM 엘레멘트가 깔려있는 H1 엘레멘트가 있다고 가정하자:
<H1>The headline <EM>is</EM> important!</H1>
만일 색상이 이 EM 엘레멘트에 지정되지 않았다면, 강조한 "is"는 모체 엘레멘트의 색상을 전달하므로, H1이 청색을 가지면, EM 엘레멘트는 같은 청색을 가진다.
문서에서 디폴트("default") 스타일 속성을 설정하기 위하여, 제작자들은 문서계통의 최상위(root)에서 그 속성을 설정할 수 있다. HTML에서, 예를 들어, HTML 또는 BODY 엘레멘트는 이 기능을 제공할 수 있다. 만일 제작자가 HTML 문서에서 BODY를 생략하더라도, HTML 해석자(parser)는 누락된 태그를 인정하므로, 이와 같은 작용은 일어난다는 점에 유의하라.
예를 들어, 'color' 속성은 전달되므로, BODY 엘레멘트의 모든 하위(descendant)에는 검정('black') 색상이 전달된다:
BODY { color: black; }
지정된 백분율 값은 전달되지 않고, 그 계산된 값들이 전달된다.
예를 들어, 주어진 다음 스타일쉬트에서:
BODY { font-size: 10pt }
H1 { font-size: 120% }
그리고 이 문서의 부분에서:
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
H1 엘레멘트의 'font-size'속성은 계산된 값 '12pt'(120% 곱하기 모체의 값 10pt)를 갖는다. 'font-size'의 계산된 값이 전달되므로, EM 엘레멘트도 계산된 값 '12pt'를 갖는다. 만일 사용도구에서 12pt 글꼴이 없다면, H1와 EM의 는 둘 다 'font-size'의 실제값은 예제에서 '11pt'를 갖는다.
각 속성은 전달된('inherit') 지정 값도 가질 수 있는데, 이는, 주어진 엘레멘트에서, 그 속성은 엘레멘트의 모체의 속성과 같은 계산된 값을 갖는다는 의미이다. 보통 자동적인 값으로 사용되는 전달된 값은 'inherit'를 명시적으로 설정하여 보강될 수 있다.
아래 예제에서, 색상('color')과 'background' 속성이 BODY 엘레멘트에 설정되어있다. 모든 다른 엘레멘트에서, 'color' 값은 전달될 것이고, 배경은 투명하게 된다. 만일 이들 명령이 사용자의 스타일쉬트의 일부이면, 흰 배경에 검정 텍스트가 전 문서를 통하여 작용된다.
BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
}
'@import' 명령은 사용자가 스타일 명령(style rule)들을 다른 스타일쉬트로 부터 도입(import)할 수 있게 한다. @import 명령은 스타일쉬트 안의 모든 명령 세트(rule set)의 앞에 와야 한다. 키워드(keyword) '@import' 다음에는 스타일쉬트을 포함하는 URI이 나와야 한다. 문자열도 허용되는데, 이는 그 안에 url(...)가 있는 것으로 간주한다.
다음 줄들의 '@import' 문법들("url()"을 가진것과 단순한 문자열을 가진 것)은 그 의미와 내용에서 동일하다:
@import "mystyle.css";
@import url("mystyle.css");
사용도구가 지원 안하는 메디아(media) 타입에서 자원을 읽어 표현하는 것을 방지하기 위하여, 제작자들은 메디아에 따른 도입(@import) 명령을 지정할 수 있다. 이 조건부 도입(import)은 URI 다음에 컴마(,)로 분리된 메디아(media) 타입들 지정한다.
다음 명령들은, 도입된(imported) 스타일쉬트가 같은 메디아에서 @media 명령에 의하여 감싸진 것과 같이 간주되어, 같은 효과를 갖지 만, 이는 사용도구가 효과적인 다운로드하는데 노력을 절감시켜 준다.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
어떤 메디아 타입들이 없는 경우도, 그 도입(import)은 무조건적이다. 메디아(medium)에 'all'이라는 지정은 같은 효과를 갖는다.
스타일쉬트은 제작자, 사용자, 사용도구의 세가지 다른 원천(origin)을 가질 수 있다:
시스템 설정(예: 시스템 색상들)이 사용자에 의하여 변경되면, 디폴트 스타일쉬트는 변경될 수 있다는 점에 유의하라. 그러나 사용도구의 내부 적용의 제한들 때문에, 디폴트 스타일쉬트의 값들의 변경이 불가능할 수도 있다.
이 스타일쉬트의 세가지 원천들은 그 범위에서 중복될 수 있으며, 그런 경우 카스케이드(cascade)에 따라 해석된다.
CSS 카스케이드는 각 스타일 명령의 우선순위를 지정한다. 여러 명령들이 적용될 때는, 그 중에서 가장 우선순위가 높은 한가지 만 적용된다.
디폴트로, 제작자 스타일쉬트 안의 명령들은 사용자 스타일쉬트 안에 있는 명령들보다 우선순위가 높다. 그러나 "!important" 명령이 오면 우선 적용된다. 모든 사용자과 제작자 명령들이 그 사용도구의 디폴트 스타일쉬트 안에 있는 명령들보다 우선순위가 높다.
도입된 스타일쉬트도 카스케이드(cascade)되고, 그들의 우선순위는 도입(import) 순서에 따라 다르다. 주어진 스타일쉬트에 지정된 명령들은 제작자 스타일쉬트로부터 도입된(imported) 명령로 덮어씌워(override) 진다. 도입된 스타일쉬트들은 그 자체가, 반복적으로, 도입하고 제작자 스타일쉬트들을 덮어씌우기(override)를 할 수 있으며, 같은 우선순위가 적용된다.
엘레멘트/속성 조합의 값을 얻기 위하여, 사용도구는 다음의 정렬 순서를 적용하여야 한다:
개별 선언에 "!important" 설정과는 별도로, 사용자의 스타일쉬트보다 제작자의 스타일쉬트이 높은 우선순위를 갖는다는 원칙이 적용된다. 따라서 사용도구가, 사용자로 하여금 어떤 스타일쉬트의 영향을 중지시킬 수 있는 능력을 제공하는 것이 중요하다. 예: 풀다운 메뉴(pull-down menu)를 통하여.
CSS는 제작자와 사용자사이의 스타일쉬트들의 능력의 균형을 형성하도록 의도하였다. 디폴트로, 제작자의 스타일쉬트에 있는 명령들이 사용자의 스타일쉬트에 있는 것들을 덮어씌운다. (위 카스테이드 세가지 규칙을 참조하라).
그러나, 균형을 위하여, "!important" 선언("!" 키워드와 그 뒤 "important", 그 뒤에 선언)이 일반적인 선언에 우선한다. 제작자와 사용자 스타일쉬트 양쪽에서 "!important" 선언들을 가질 수 있고, 사용자 "!important" 명령이 제작자 "!important" 명령을 덮어씌운다. 이 CSS의 기능은, 사용자에게 표현의 제어에 특수한 요구사항(큰 글꼴, 색상 조합들, 등)을 지정할 수 있게 함으로서, 문서의 접속성을 개선했다.
주석. 이는 CSS1으로 부터 변화된 사항이다. CSS1에서는, 제작자의 "!important" 명령이 사용자 "!important" 명령에 우선하였었다.
약식속성 선언(예: 'background')이 "!important" 수준과 같게 하기 위하여서는, 그 모든 하위 속성들이 "!important"로 선언되어야 한다.
"!important" 선언를 포함하는 다음 예제에서 사용자의 스타일쉬트 안의 첫번째 명령에서, 이 "!important" 선언은 제작자의 스타일쉬트(styles sheet) 안의 해당 선언을 덮어씌운다. 두번째 선언에서도 역시 "!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: 12pt sans-serif !important }
P { font-size: 24pt }
선택자의 특정성 계산은 다음과 같다:
a-b-c 세가지 수치(큰 기초의 수치 시스템)의 다음과 같은 결합이 그 특정성(specificity)을 준다.
일부 예제들:
* {} /* a=0 b=0 c=0 -> 특정성 = 0 */
LI {} /* a=0 b=0 c=1 -> 특정성 = 1 */
UL LI {} /* a=0 b=0 c=2 -> 특정성 = 2 */
UL OL+LI {} /* a=0 b=0 c=3 -> 특정성 = 3 */
H1 + *[REL=up]{} /* a=0 b=1 c=1 -> 특정성 = 11 */
UL OL LI.red {} /* a=0 b=1 c=3 -> 특정성 = 13 */
LI.red.level {} /* a=0 b=2 c=1 -> 특정성 = 21 */
#x34y {} /* a=1 b=0 c=0 -> 특정성 = 100 */
HTML에서, 엘레멘트의 "style" 애트리뷰트의 값들은 스타일쉬트 명령들이다. 이 명령들은 선택자(selector)를 가지고 있지 않지만, 카스케이드(cascade) 기능에서 제 3단계의 목적을 위하여, ID 선택자가 특정성: a=1, b=0, c=0을 갖는 것으로 간주된다. 제 4단계의 목적을 위하여, 이들이 모든 다른 명령들 다음에 온 것으로 간주된다.
<HEAD>
<STYLE type="text/css">
#x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>
위 예제에서, P 엘레멘트의 색상은 적색이다. 두 선언들에서 특정성(specificity)은 같지만, "style" 애트리뷰트에서의 선언이, 카스케이딩 규칙 4단계 때문에, STYLE 엘레멘트에 있는 것을 덮어씌움(override)한다.
사용도구는 스타일쉬트 이외의, 예를 들어 FONT 엘레멘트 또는 HTML의 "align" 애트리뷰트 등, 다른 원천(source)들로 부터 표현적 힌트를 선택할 수 있다. 이런 경우, 비 CSS 표현적 힌트는, 특정성(specificity) zero(0)을 갖는, 해당 CSS 명령들로 해석되어야 한다. 명령은 다른 스타일쉬트의 시작 위치에 오고, 그 뒤에 오는 스타일쉬트 명령에 의하여 덮어씌워(override) 질 수 있다는 것을 가정한다.
주석. 이 원칙은, 이와 같은 전환 단계에서, 스타일쉬트들과 같이 사용되는는 스타일적(stylistic) 애트리뷰트들을 쉽게 사용하게 한다.
주석. CSS1에서, 비 CSS 표현적 힌트는 특정성(specificity)가 '0' 이 아니고 ''로 주어 졌었다. 이 변경은 특정성이 '0'을 갖는 공통 선택자의 도입에 따른 것이다.
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
맨위이 문서()는 자유로이 연결 사용이 가능함.
(수정일 )