집 > 기사 > 웹 프론트엔드 > CSS 속성 상속이란 무엇입니까? CSS의 상속 가능한 속성과 상속 불가능한 속성 요약

CSS 속성 상속이란 무엇입니까? CSS의 상속 가능한 속성과 상속 불가능한 속성 요약

不言원래의: 2018-07-27 16:30:0415760검색

소위 상속이란 현재 요소가 이 속성을 정의하지 않더라도 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) value

각 속성은 "inherit" 값을 지정할 수 있습니다. 즉, 특정 요소에 대해 속성은 계산된 값과 동일한 값을 갖습니다. 상위 요소의 상대 속성입니다. 상속된 값은 일반적으로 "inherit"를 명시적으로 지정하여 향상될 수 있는 대체 값으로만 사용됩니다. 예:

p {font-size: 상속; }

상속의 제한

상속은 줄어듭니다. 그러나 반복 정의의 문제는 테두리, 여백, 패딩, 배경 등과 같은 일부 속성을 상속할 수 없다는 것입니다.

이 설정은 의미가 있습니다. 예를 들어 e388a4556c0f65e1904146cc1a846bee에 테두리가 설정된 경우 이 속성도 상속되면 이 e388a4556c0f65e1904146cc1a846bee 내의 모든 요소에 테두리가 있으므로 의심할 여지 없이 눈부신 결과가 생성됩니다. . 마찬가지로 여백, 패딩 등 요소 위치에 영향을 미치는 속성은 상속되지 않습니다.

동시에 브라우저의 기본 스타일도 상속 결과에 영향을 미칩니다. 예:

body { font-size: 12px; }

c1a436a314ed609750bd7c7d319db4da레벨 2 제목의 텍스트가 12픽셀이 아닙니다. // 2e9b454fa8428549ca2e64dfac4625cd H2 중국어 텍스트는 12px 크기 텍스트가 아닌 제목 2 스타일 텍스트입니다.

　브라우저의 기본 스타일이 c1a436a314ed609750bd7c7d319db4da의 CSS 규칙을 설정하기 때문입니다.

동시에 일부 이전 버전의 브라우저는 상속을 제대로 지원하지 않을 수 있습니다. 예를 들어 일부 브라우저는 f5d188ed2c074f8b944552db028f98a1을 만나면 상속된 모든 속성을 잃게 됩니다.

일단 상속되면 CSS 속성은 취소할 수 없으며 재정의만 가능합니다.

CSS 속성 상속이란 무엇입니까? CSS의 상속 가능한 속성과 상속 불가능한 속성 요약

관련 기사