ㅇ 부모 태그로부터 상속
CSS3 스타일은 부모 태그로부터 상속된다.
> HTML 코드
<!DOCTYPE html>
<html>
<head>
<title>부모 태그로부터 상속</title>
</head>
<body style="color: green">
<p>부모로부터 상속받음!!</p>
</body>
</html>
p 태그에는 style이 없지만, p 태그의 부모 태그인 body의 style의 영향을 받아서 초록 글씨로 출력된다.
> 결과
ㅇ 스타일 합치기(cascading)와 오버라이딩(overriding)
만약 이런 코드가 있다고 하자.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="tistoryTest.css">
<title>우선순위는??</title>
<style>
p {
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<p style="font-size: 25px">안녕하세요</p>
</body>
</html>
/* tistoryTest.css 파일 */
p {
background: yellow;
}
이 코드에서 안녕하세요 라는 글씨는 어떤 style의 속성을 받았을까?
4종류의 스타일 시트가 존재한다.
우선순위가 낮은 것부터 정리하면,
1. 브라우저의 default 스타일
style을 주지 않았을 때의 기본 값을 말한다. 예를 들어 이렇게라고 치자.
p {
color: black;
font-size: 16px;
background: white;
}
2. CSS 스타일 시트 파일에 작성된 스타일 (Linking style sheet)
p {
background: yellow;
}
3. <style>....</style> 태그에 작성된 스타일 (Internal style sheet)
<style>
p {
color: blue;
font-size: 12px;
}
</style>
4. style 속성에 작성된 스타일 (Inline style sheet)
<p style="font-size: 25px">안녕하세요</p>
우선순위에 따라 적용해본다.
우선순위 / 속성 |
color |
font-size |
background |
1 적용 |
black |
16px |
white |
2 적용 |
black |
16px |
yellow (오버라이딩) |
3 적용 |
blue (오버라이딩) |
12px (오버라이딩) |
yellow |
4 적용 |
blue |
25px (오버라이딩) |
yellow |
이렇게 우선순위에 따라 나중에 바뀐 것이 오버라이딩되어 적용되고, 나중에 각각의 style이 합쳐져서 결과가 나오게 된다.
> 결과
'기타 > HTML and CSS' 카테고리의 다른 글
| [CSS] 가상 클래스 셀렉터 (0) | 2018.07.02 |
|---|---|
| [CSS] 셀렉터 / 스타일 시트 형식 (0) | 2018.06.29 |
| [CSS] CSS3 스타일 시트 형식 (0) | 2018.06.27 |
| [CSS] CSS 적용 방법 (0) | 2018.06.27 |
| [HTML] <ol> <ul> <dl> 태그, 리스트 만들기 (0) | 2018.06.25 |
