웹 문서에서 CSS 상속 작동 방법
CSS로 웹 사이트를 스타일링 할 때 중요한 부분은 상속 개념을 이해하는 것입니다.
CSS 상속은 사용중인 속성의 스타일에 따라 자동으로 정의됩니다. 스타일 속성 background-color를 조회하면 "상속"섹션이 표시됩니다. 당신이 대부분의 웹 디자이너와 같다면, 당신은 그 부분을 무시했지만 목적을 달성 할 수 있습니다.
HTML 문서의 각 요소는 트리의 일부이며 초기 요소를 제외한 모든 요소에는 요소를 묶는 부모 요소가 있습니다. 속성이 상속 될 수있는 경우 부모 요소에 적용된 스타일을 요소에 포함 할 수 있습니다.
예를 들어 아래 HTML 코드에는 EM 태그를 묶는 H1 태그가 있습니다.
EM 요소는 H1 요소의 하위 요소이며 상속 된 H1의 모든 스타일은 EM 텍스트에도 전달됩니다. 예 :
h1 {font-size : 2em; }font-size 속성이 상속되기 때문에 "Big"이라는 텍스트 (EM 태그 안에 포함 된 내용)는 H1의 나머지 부분과 동일한 크기가됩니다. 이것은 CSS 속성에 설정된 값을 상속하기 때문입니다.
그것을 사용하는 가장 쉬운 방법은 상속 된 CSS 속성 과 익숙하지 않은 CSS 속성에 익숙해지는 것입니다. 속성이 상속 된 경우 값은 문서의 모든 자식 요소에 대해 동일하게 유지된다는 것을 알고 있습니다.
이것을 사용하는 가장 좋은 방법은 BODY와 같은 매우 높은 수준의 요소에 기본 스타일을 설정하는 것입니다. body 속성에 font-family 를 설정하면 상속 덕분에 전체 문서가 동일한 글꼴 모음을 유지합니다. 전체 스타일이 적기 때문에 실제로 관리하기가 쉬운 작은 스타일 시트를 만들 수 있습니다. 예 :
body {font-family : Arial, sans-serif; }모든 CSS 속성에는 가능한 옵션으로 "상속"값이 포함됩니다. 이것은 속성이 일반적으로 상속되지는 않지만 부모와 동일한 값을 가져야한다는 것을 웹 브라우저에 알려줍니다. 상속되지 않은 여백과 같은 스타일을 설정하면 후속 속성에서 상속 값을 사용하여 부모와 동일한 여백을 지정할 수 있습니다. 예 :
body {margin : 1em; } p {여백 : 상속; }길이를 사용하는 글꼴 크기와 같은 상속 된 값에 중요합니다. 계산 된 값은 웹 페이지의 다른 값과 관련된 값입니다.
BODY 요소에 1em의 글꼴 크기를 설정하면 전체 페이지가 1em 크기가되지 않습니다. 이는 표제 (H1-H6) 및 기타 요소 (일부 브라우저는 테이블 특성을 다르게 계산 함)와 같은 요소 가 웹 브라우저에서 상대적인 크기를 가지기 때문입니다. 다른 글꼴 크기 정보가 없으면 웹 브라우저는 항상 H1 헤드 라인을 페이지의 가장 큰 텍스트로 만들고 H2 다음에 계속합니다. BODY 요소를 특정 글꼴 크기로 설정하면 "평균"글꼴 크기로 사용되며 headline 요소는 그 값에서 계산됩니다.
나열된 여러 스타일이 W3C의 CSS 2에서 상속되지 않았지만 웹 브라우저는 여전히 값을 상속합니다. 예를 들어, 다음 HTML과 CSS를 작성한 경우 :