- XHTML 문서에 CSS를 적용하는 데는 다섯 가지 방법이 있다.
1. style 속성을 개별 요소에 지정한다.
<p style="margin :15px;">
2. <head> 범위 안에 style 요소로 지정한다.
<style type="text/css">
p { margin : 15px; }
</style>
3. <head> 범위 안에 link를 사용하여 외부 스타일시트를 참조한다.
<link rel="stylesheet" type="text/css" href="./css/default.css"/>
4. head 범위 안에 @import로 외부 스타일시트를 참조한다.
<style type="text/css">
@import url("./css/default.css");
</style>
5. xml-stylesheet 처리 명령으로 외부 스타일시트를 참조한다.
<?xml-stylesheet type="text/css" href="./css/default.css"?>
- 위의 다섯 가지 방법 가운데 1,2 같이 XHTML 문서 안에서 CSS를 기술하는 방법보다 3,4 처럼 외부 스타일시트를 참조하는 방법을 추천한다. 5는 W3C권고에 근거하여 XML로 외부 스타일시트을 참조하는 방법이다.
#meta 요소로 스타일시트 언어 지정
- 어떤 적용방법을 사용하더라도 XHTML문서에 CSS를 사용할 때는 스타일시트 언어의 MIME 타입을 지정한다. CSS의 MIME타입은 'text/css'이며 head 요소의 범위에 meta 요소(p. 46)로 지정한다. http-equiv 속성값은 'Content-Style-Type', content 속성값은 'text/css'로 지정한다.
<meta http-equive="Content-Style-Type" content="text/css"/>
- 서버가 Apache라면 .htaccess파일에 다음같이 지정하는 방법도 있다.
Header apeend Content-Style-Type "text/css"
@ 스타일의 우선순위
#스타일을 읽어들이는 순서
- "가장 마지막에 지정된 스타일을 우선적으로 적용한다"
p.attn { color : purple }
p.note { color : red }
<p class="attn note"> 주의문 </p>
# 스타일의 개별성
- CSS에서는 다음 규칙을 기준으로 a의 수를 '100' , b의 수를 '10', c의 수를 '1'로 개별성을 계산한다.
1. 선택자에 포함된 id의 수(=a)
2. 선택자에 포함된 가상 클래스와 속성(class 포함)의 수(=b)
3. 선택자에 포함된 요소명의 수(=c)
4. 가상 요소는 계산에 포함하지 않는다.
* {} /* a=0, b=0, c=0, 개별성=0 */
ul {} /* a=0, b=0, c=1, 개별성=1 */
ul+ol {} /* a=0, b=0, c=2, 개별성=2 */
ul+ol li {} /* a=0, b=0, c=3, 개별성=3 */
li[class="num"] {} /* a=0, b=1, c=1, 개별성=11 */
ul+ol li.num {} /* a=0, b=1, c=3, 개별성=13 */
li.num.com {} /* a=0, b=2, c=1, 개별성=21 */
#get {} /* a=1, b=0, c=0, 개별성=100 */
p#attn {} /* a=1, b=0, c=1, 개별성=101 */
p { color : black; }
p.attn { color : red; }
p#attn1 {color : purple; }
<p class="attn" id="attn1">주의문</p>
#get{ color : blue; }
<p id="get" style="color : green " > 텍스트 </p>
# 사용자 스타일시트 우선
- CSS에는 "사용자 스타일시트를 우선한다." 라는 규칙이 있다. 이는 '사용자측 스타일 우선'(user override of style) 이라고도 하며 작성자 측의 CSS에 대하여 사용자 측의 CSS를 우선적, 강제적으로 적용하기 위한 규칙이다.
- XHTML 문서에 적용된 스타일에는 '작성자 스타일', '사용자 스타일' '브라우저(사용자 에이전트) 스타일'의 세 가지가 있지만 보통 이 순서가 그대로 우선순위가 된다.
작성자 스타일 > 사용자 스타일 > 브라우저 스타일
- 속성에 '!important' 선언을 지정한 경우 스타일의 우선순위가 다음같이 변경된다.
!important선언을 한 사용자 스타일 > !important선언을 한 작성자 스타일 > 작성자 스타일
> 사용자 스타일 > 브라우저 스타일
댓글 없음:
댓글 쓰기