Css Style 적용순위(Cascade)

[CODE]Style과 택 속성의 관계 요소는 선택자에게 사용할 style의 종류를 지정하는 것이고 값은 요소의 값입니다. H3 { font-size: 12pt; color: red; } 는

택에 font-size:12pt, color:red 를 지정하게 합니다. 여기서 font-size, color 가 요소이고 12pt, red가 값입니다. 요소와 값은 colon(:)으로 구분하고 각 요소:값은 semicolon(;)으로 구분합니다. 요소와 colon, 값, semicolon 사이에 공백은 넣어주어도 되고 안넣어주어도 됩니다. 두칸 이상의 공백도 한칸으로 지정됩니다. 그리고 대소문자도 구분하지 않습니다. h3 { Font-Size:12pt; COLOR:reD; } 로 사용해도 위의 구문과 같은 동작을 합니다. 대소문자는 구분하지 않기 때문입니다. 대소문자 구분에서 예외가 있습니다. 바로 font-family, URL입니다. font-family는 사용자의 시스템에 있는 특정 글꼴을 사용하는 것입니다. 그 글꼴들 중에는 한 단어도 있고 여러 단어로 이름 지어진 글꼴 이름이 있습니다. "Arial", "Time New Roman" 같은 글꼴을 예로들면 "Arial"은 대문자로 시작하고 "Time New Roman"에는 공백문자가 들어가 있습니다. 이 글꼴 이름은 고유한 것이기 때문에 대소문자를 지켜야하고 공백도 넣어주어야 합니다. URL은 사이트의 주소나 화일이름일 수 있습니다. 이들은 기본적으로 대소문자를 구분합니다. Style 적용순위(Cascade) Style을 지정하는 방법은 4가지가 있습니다. @import

12pt 크기의 초록색입니다.

my.css 화일안에 style을 아래와 같이 지정했을 때, H3 { font-size: 12pt; color: red; } 이 때의

택이 가지고 있는 글자는 12pt 크기의 초록색이 됩니다. 즉, 택으로 style을 지정하고 다음에

12pt 크기의 빨간색입니다.

로 하면 나중에 선언된 style이 듣기 때문에

가 가지고 있는 글자의 색은 빨간색이 됩니다. 보통 택은 여러 페이지에 style을 지정하기 때문에 큰 골격의 style을 지정합니다. 그리고 각 페이지에서 필요한 style을 지정하기 때문에 택을 먼저 지정하고

12pt 크기의 빨간색 글자입니다.

,

빨간색 글자입니다.

위의 페이지의 H3 택의 글자는 빨간색이 됩니다. 색깔의 변화는 노랑색에서 파란색 마지막으로 빨강색이 됩니다. my.css 의 내용 : .order { color: yellow }

초록색 글자입니다.

위의 같은 html에서 빨간색의 내용을 추가하였습니다. class, id 속성을 같이 지정하여 id 속성이 지정되므로 H3 택의 글자는 초록색이 됩니다. 즉, 같은 style을 지정시 id 속성이 class 속성보다 우선순위가 높습니다. 만약 위의 페이지의 H3 택에 style 속성을 같이 지정하였다면 그것이 지정됩니다. inline style은 가장 높은 우선순위이기 때문입니다. my.css 의 내용 : .order { color: yellow }

ie4에서 빨간색 글자, nn4에서 파란색 글자입니다.

맨위의 소스에서 빨간색으로

택 다음에 H3 택의 글자가 빨간색 20pt로 나옵니다. Style과 택 속성의 관계 style과 html 택의 속성중에서 서로 중복되는 기능은 style이 적용됩니다. H1 { font-size: 10pt; } 는 크기를 가장 크게하는

택의 글자크기를 10pt로 아주 조그마하게 만듭니다. 글자 크기를 지정하는 font-size가

택의 고유기능에 우선하기 때문입니다.

중앙으로 정열함.

table의 안의 내용물의 위치를 지정하는 td 택의 align 속성도 같은 기능을 하는 text-align을 같이 지정하면 style의 지정이 듣습니다. 즉, style은 html 고유 기능과 속성에 우선합니다. 반대로 style을 지정해도 style로 같은 기능을 하는 요소를 지정하지 않았다면 택의 고유기능과 속성은 작동합니다. 그러므로 style을 지정시 택의 선택에 주의해야 합니다. 어떤 택에 style을 지정하면 그 택은 지정받은 요소를 사용할 수 있으면 자신의 양식으로 만들고 없으면 무시합니다. 사용여부는 그 택이 inline 택이냐 block 택이냐로 주로 구분됩니다. inline 택은 , 같은 줄넘김을 하지않는 택을 말하고 block 택은

,

,

같은 줄넘김을 하는 택들입니다. b { border: outset 2px red } 로 지정하면 nn4는 작동하는데 ie4는 전혀 border가 듣지 않습니다. block 택에 테두리를 입히는 이 요소가 CSS1에서는 block 택에서 작동하고 CSS2에서는 모든 택에서 작동합니다. 이 inline 택으로 작동하느냐 block 택으로 작동하느냐가 ie4, nn4에서 다른 택이 많기 때문에 border 같은 요소를 지정하기 위해서는 두 브라우저가 공통으로 지원하는 block 택에 지정해야 합니다. div { border: outset 2px red } 로 div 택에 지정하면 듣습니다.

택이 ie4, nn4에서 block 택으로 가장 확실하게 작동합니다.

같은 글자 크기가 필요하면 'font-size'를 같은 굵기가 필요하면 'font-weight'를 같이 지정하면

, 택은 필요가 없습니다. div { border: outset 2px red; font-size:15pt; font-weight: bold } -- nn4, ie4의 두 브라우저가 CSS1, CSS2를 왔다갔다 합니다. W3C를 예기할 필요는 없겠지만 브라우저는 자기들 식대로 작동합니다. 많은 버그와 함께요.. 우리에게 중요한 것은 표준이 무었이냐가 아니고 내 페이지가 어떻게 나오느냐 일것입니다. :) 버젼5 대의 브라우저에서는 이런 문제가 정리가 될것으로 생각합니다. 정리가 안된다고 그렇게 실망하지 말기 바랍니다. 이것은 오히려 자신의 능력을 차별화할 수 있는 기회일 수도 있으니까요. 값의 종류와 사용 div { color: red } div 택의 글자를 빨간색으로 지정합니다. "red"가 값입니다. 요소에 지정하는 값은 지정자(keyword), 수치값, %, 문자열, url(화일주소)등 각 요소의 종류에 따라서 여러가지가 있습니다. 지정자 : 는 CSS를 읽는 브라우저가 미리 지정해 놓은 값입니다. red, green 등의 색 이름같은 것입니다. 이것은 문자열이 아니고 css 구문입니다. 그래서 인용부호(", ')는 필요가 없습니다. 수치값 : 숫자와 단위를 같이 사용합니다. 2em, 10pt, 20px 등이 있습니다. 수치값에 단위를 지정하지 않으면 기본으로 'px'가 지정됩니다. % : 는 상위의 크기에 따른 상대적인 값입니다. 수치와 % 단위로 사용합니다. width: 50%는 상위의 절반 크기를 지정합니다. 문자열 : 글꼴의 이름이나 content 요소에 사용할 수 있습니다. 각 글꼴의 이름은 지정자로 사용됩니다. 그래서 인용부호는 필요가 없지만 글꼴의 이름중에서 공백이 들어있는 글꼴은 인용부호로 감싸야 하고 대소문자를 지켜야 합니다. P { font-family: Arial, "Time New Roman" } 으로 공백이 들어있는 "Time New Roman" 글꼴에게 인용부호를 줍니다. url(화일주소) : 배경 이미지 같은 것을 외부 이미지 화일로 지정시 화일의 주소는 대소문자를 구분합니다. 화일의 경로를 감싸는 인용부호는 지정하지 않아도 됩니다. div { background-image: url("../images/backImage.gif") } style="요소:값" :