소위 상속이란 현재 요소가 이 속성을 정의하지 않더라도 html 요소가 상위 요소로부터 일부 CSS 속성을 상속받을 수 있음을 의미합니다. 그렇다면 CSS의 어떤 속성을 상속받을 수 있고, 어떤 속성을 상속할 수 없나요? CSS의 속성 상속 내용을 살펴보겠습니다.
먼저 CSS 우선순위를 살펴보겠습니다.
!important > ID 선택기 > 태그 > 상속 >
일반적으로 사용되는 CSS 상속 불가능 속성
display: 요소가 생성해야 하는 상자 유형을 지정합니다.
text-장식: 텍스트에 추가되는 장식을 지정합니다.
text-shadow: 텍스트 그림자 효과
white -space: 공백 문자 처리
Box 모델 속성: width, height, margin, border, padding
Background 속성: background
위치 속성: float,clear, position, top, right, Bottom, left, min-width , min -height, max-width, max-height, 오버플로, 클립, z-index
일반적으로 사용되는 CSS 상속 가능 속성:
font: 결합된 글꼴
font-family: 지정된 요소의 글꼴 모음
font -weight: 글꼴의 두께를 설정합니다.
font-size: 글꼴의 크기를 설정합니다.
font-style: 글꼴의 스타일을 정의합니다.
text-indent: 텍스트 들여쓰기
text-align: 가로 정렬 text
line-height : 줄 높이
color: 텍스트 색상
visibility: 요소 가시성
Cursor 속성:cursor
모든 요소는 상속 가능
1. 커서
인라인 요소에서 상속할 수 있는 속성
1. 글꼴 계열 속성
2. text-indent 및 text-align을 제외한 텍스트 계열 속성
블록 수준 요소에서 상속할 수 있는 속성text-indent , text-align
각 속성은 "inherit" 값을 지정할 수 있습니다. 즉, 특정 요소에 대해 속성은 계산된 값과 동일한 값을 갖습니다. 상위 요소의 상대 속성입니다. 상속된 값은 일반적으로 "inherit"를 명시적으로 지정하여 향상될 수 있는 대체 값으로만 사용됩니다. 예:
p {font-size: 상속; }
상속의 제한상속은 줄어듭니다. 그러나 반복 정의의 문제는 테두리, 여백, 패딩, 배경 등과 같은 일부 속성을 상속할 수 없다는 것입니다.
이 설정은 의미가 있습니다. 예를 들어
에 테두리가 설정된 경우 이 속성도 상속되면 이
내의 모든 요소에 테두리가 있으므로 의심할 여지 없이 눈부신 결과가 생성됩니다. . 마찬가지로 여백, 패딩 등 요소 위치에 영향을 미치는 속성은 상속되지 않습니다.
동시에 브라우저의 기본 스타일도 상속 결과에 영향을 미칩니다. 예:
body { font-size: 12px; }브라우저의 기본 스타일이
동시에 일부 이전 버전의 브라우저는 상속을 제대로 지원하지 않을 수 있습니다. 예를 들어 일부 브라우저는
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
