CSS(Cascading Style Sheets)

CSS(Cascading Style Sheets)

Cascading Style Sheets는 HTML 이나 XML 요소를 어떻게 규정( 표시 )하거나 지시하는 W3C의 사양중 하나. 문서의 구조와 표현을 분리 시킨다는 이념을 실현하기 위해 제창된 스타일 시트의 구체적인 사양중 하나이다.

CSS는 HTML로 표현 가능하다고 생각되는 디자인의 대부분을 실현할수있는 요소를 도입 하면서, 새로운 디자인 기능을 갖춘다.

스타일 정보는 로드 내용 ( 작성자 스타일 시트 ) 및 사용자 에이전트 설정 ( 사용자 스타일 시트 )의 두 곳 에서 설명 할 수있다. 또한 사용자 에이전트도 자신의 스타일 ( 기본 스타일 시트 )을 가지고있다.

작성자 스타일 시트는 마크업 문서에 직접 작성하거나 다른 문서로 로드 시키는 형태로 이용된다. CSS 의 편리성을 최대한 발휘하기 위해서는 다른 문서로 로드 시키는 것이 추천 되고 있다.

작성 방법
여기 에서는 CSS Level 2 에 대해 설명 한다. CSS의 문법은 다른 수준사이에서도 호환성을 갖도록 설계 되어, 예를 들어 CSS Level 1 로 작성된 스타일 시트를 CSS Level 2 로 취급 할 수도있다 (단 일부 해석의 차이 등에 따른 비 호환 부분도 존재 한다). CSS 는 요소에 스타일을 주기 위하여 다음과 같은 사양이 정해져 있다.

다음 CSS 단편을 예로 들면.

p # id {color : # ff3300 }

●  " { " 부터 "} " 까지의 부분을 선언하는 블럭.
● " p # id "를 선택 하고 , 스타일이 적용되는 대상을 나타낸다.
●  선언 블록 및 선택기를 맞게 규칙 집합한다.
●  " color : # ff3300 " 부분을 선언 한다.

●  선언 중 " : " 이전 ( 위 예에서는 " color " ) 을 속성 ( 특성 ) 짓는다.

●  선언 중 " : " 이후 ( 위 예에서는 " # ff3300 " ) 의 값 

위 예제의 CSS 조각을 적용 하겠다고 선언하는 문서중 선택이 지정하는 것과 일치하는 부위에 선언 블록 의 선언이 적용된다. 선언은 " 속성 : 값 "또는 " 빈공간 ( 아무것도 설명 하지 않는다) " 중 하나로 구성된 속성 " : " 값 의 전후에는 공백 문자 ( 스페이스 , 탭, 개행등 )를 자유롭게 쓸수 있고 또한 " ; " 로 구분 하여 선언하여 나란히 쓸 수 있다.

위 예제는 HTML 문서에 적용 할 경우 " id 라는 ID를 가진 p 요소의 글자색을 빨간색 FF ( = 255 ) , 녹색 33 ( = 51 ) , 파랑 0으로 하라"는 것을 의미한다.

color : # ff3300 ;
width : 35 %

color : " # 0033ff " ;
width : '53 % '

이러한 선언 이있을때 후자 두 문장은 " "또는 '' 을 붙여 '불법' 이다. 왜냐하면 " " 나 '' 안에있는것은 문자열로 취급되고 color 속성이 취할 수있는 색상 값 ( # rrggbb , rgb ( 0-255 ] , [ 0-255 ] , [ 0-255 ] ) 또는 black 과 red 같은 키워드 등 ) 가 아니기 때문이다.

p # id {color : # ff3300 }
p # id { font - size : 24px }

는

p # id {color : # ff3300 ; font - size : 24px }

와 동일하다 . ; 은 이전과 같이 선언을 선택에 하나씩 써있는 것을 하나의 선택기 블록 작성할때 선언을 분리하기 위하여 사용한다. 따라서 반드시 선언 ; 를 매길 것을 강조하는 것은 아니다.

선택기는 구현하기에 수준 높은 브라우저라면 어떤 속성도 CSS를 적용 할 수 있으며 이 경우 ID 에 대한 특성 선택기이기 때문에, # id 는 [id = " id "] 와 동일하다. 선택기의 간단한 매칭이 가능하다. 다른 HTML 태그에 대한 적용, 문서 구조에서 본 구조에 적용 하는 선택기, 나아가서는 링크와 동적 표현 · 언어에 대한 클래스 ( : link : hover , : lang )등이있다.

우선 순위 

CSS는 반드시 다른곳에서 고유하게 지정하지 못하고, 따라서 지정 내용의 충돌을 피하기 위해 우선 순위가 사용자 에이전트에 의해 계산 된다. 그 결과는 다음과 같은 조건에 의해 산출 된다.

작성자 스타일 시트는 사용자 스타일 시트 보다 우선한다.

기본 스타일 시트는 다른 스타일 시트를 우선한다.

가장 중요한 지정선언은 사용자 스타일 시트가 만든 스타일 시트 보다 우선한다. ( CSS1 에서는 반대 )

외부 에서 가져온 것은 가져온 곳과 함께 취급