CSS - 상속

CSS에는 정답이 없다. 눈으로는 같아 보여도 적용하는 방법은 다양하고 답이 없기 때문이다.

아래 예시를 보면

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>

위 같은 코드가 있을때 글자 색을 변경하고자 한다면
인라인 스타일도 있을 것이며

/* 태그 선택자*/
h1 {
	color:blue;
}

/* 그룹 선택자*/
h1,
h2,
p {
	color:blue;
}

/* 상속*/
div {
	color:blue;
}

div > h1 {
	color:blue;
}

등 방법이 엄청 많다!,,,

정말 쓰기 나름인 듯 하다

상속

• CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있다
• 위의 div의 color 속성은 자식인 h1, h2, p에게 상속이 되지만, width, height, margin, padding, border 와 같은 것은 상속되지 않음

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>

div {
	color: red;
	border: 5px solid pink;
}

<div>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</div>

div {
	color: red;	
	border: 5px solid pink;
}
h1 { **border: inherit;** }

• 그리고 button , input 요소처럼 form 관련 태그들은 상속받지 않는다