상속과 css 우선순위
#1. 상속
요소간에는 부모와 자식관계가 있고 , 상속은 부모 요소의 프로퍼티 값을 자식 요소가 물려받는걸 의미!생산성을 높일 수 있는 기능이지만 ,실제 코드 작성시에는 복잡한 상속관계로 복잡도가 올라갈수있다.
코드로 확인해보자
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
p {
color: OrangeRed;
}
h1 {
border: 1px solid OrangeRed;
}
</style>
</head>
<body>
<p>p 태그 안에 <span>span 태그</span> 넣어보기 </p>
<h1>h1 태그 <span>span 태그</span> 넣어보기 </h1>
</body>
</html>
-
p태그의 color 프로퍼티 값은 span태그에도 적용(상속)
-
h1 태그의 border 프로퍼티 값은 span 태그에 적용하지 않는다 .
-- span 태그에 적용되었다면 , 'span 태그를 ' 왼쪽 + 오른쪽에도 붉은 선이 보임
-
프로퍼티별 상속 가능과 불가능
상속 가능: visibility , opacity , font ,color , line-height , text-align , white-space상속 불가능: width/height , margin, padding , border ,box-sizing ,display , background,vertical-align,text-decortaion,position, top/right/bottom/left , z-index,overflow,float
상속 가능과 불가능이 있다.
2. Cascading
요소는 하나 이상의 CSS 선언에 영향을 받을수 있다.
이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한대 이를 캐스캐이딩이라고 한다.
캐스캐이팅에는 다음과 같은 세가지 규칙이 있다.
1. 중요도: CSS 가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
2. 명시도 : 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
3. 선언순서 : 선언된 순서에 따라 우선 순위가 적용된다. 즉 , 나중에 선언된 스타일이 우선 적용된다.
- 2.1 중요도
CSS 가 어디에 선언 되었는지에 따라서 우선 순위가 달라진다.
- head 요소 내의 style 요소
- head 요소 내의 style 요소 내의 @import 문
- link 태그로 연결된 CSS 파일
- link 태그로 연결된 CSS 파일 내의 @import 문
- 브라우저 디폴트 스타일시트
- 2.2 명시도
대상을 명확하게 특정 할수록 명시도가 높아지고 우선 순위가 높아진다.!important > 인라인 스타일Inline Style > 아이디 선택자 id > class > tag
! !important , 태그안에는 적은 style 은 현업에서는 사용을 제한(복잡한 코드 상에서 , 복잡도를 더 높일수 있기 때문이다.)
- 2.3 CSS 선언 순서
CSS 는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약에 나중에 설정한 값이 적용되지 않게 하려면 속성한 값 뒤에 !important 를 붙여주면 된다!!
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
p {
color: blue;
}
p {
color: red;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p>Will be RED.</p>
<p class="blue red">Will be BLUE.</p>
</body>
</html>
