상속받을 수 있는 CSS의 속성

CSS에서 상속할 수 있는 속성은 text-indent, text-align, line-height, word-spacing, letter-spacing, text-transform, visible, color, 커서 등입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

CSS 상속이란 무엇인가요?

CSS 스타일 시트의 상속을 이해하기 위해 문서 트리(HTML DOM)부터 시작합니다. 문서 트리는 HTML 요소로 구성됩니다.

문서 트리는 가계도와 유사하며 조상, 후손, 아버지, 자녀 및 형제도 있습니다^_^. 이는 이해하기 쉬우므로 여기서는 자세히 설명하지 않겠습니다. 더 알고 싶으시면 구글링해 보세요.

따라서 CSS 스타일 시트 상속은 특정 CSS 속성이 하위 요소로 전달된다는 의미입니다.

예를 들어 다음 HTML 코드 조각은 다음과 같습니다.

<p>
CSS样式表<em>继承特性</em>的演示代码
</p>

em은 p에 포함되어 있습니다.

p의 CSS 스타일을 지정하면 em은 어떻게 되는지 볼까요?

<style>
p { color:red; }
</style>

추천 튜토리얼: CSS 비디오 튜토리얼

p와 em 글꼴은 브라우저에서 동시에 빨간색으로 변합니다. 우리는 em의 스타일을 지정하지 않았지만 em은 상위 요소 p의 스타일 속성을 상속합니다.

아마 이 글을 읽고 나면 이것이 당연하고 전혀 그럴 가치가 없다고 생각할 수도 있을 것입니다^_^. 사실 이것은 상속입니다. 이는 자신도 모르게 코드에 영향을 미칩니다(상속된 속성이 없다면 각 요소에 대해 색상 속성을 정의해야 한다고 상상해 보세요. 이것이 얼마나 고통스러운 일입니까!!! =_=!).

물론 테두리 속성과 같은 모든 CSS 속성이 하위 클래스에 상속되는 것은 아닙니다. 위의 코드를 계속 사용하세요. p 요소에 border 속성을 추가합니다

p { border: 1px solid red; }

다행히 p의 border 속성은 em에 상속되지 않습니다. 그렇지 않으면 이상하지 않을까요? !

그렇다면 어떤 속성을 물려받을 수 있나요? css 스타일 시트 속성은 다음과 같이 상속될 수 있습니다.

1. 글꼴 모음 속성

font: 결합된 글꼴

font-family: 요소의 글꼴 모음을 지정합니다.

font-weight: 글꼴의 두께를 설정합니다.

font-size : 글꼴의 크기를 설정합니다.

font-style: 글꼴의 스타일을 정의합니다.

font-variant: 텍스트를 표시할 작은 대문자의 글꼴을 설정합니다. 이는 모든 소문자가 변환된다는 의미입니다. 대문자로 변경되지만 모두 작은 대문자 글꼴을 사용합니다. 글자는 나머지 텍스트에 비해 글꼴 크기가 더 작습니다.

font-stretch: 텍스트를 더 넓거나 좁힐 수 있습니다. 모든 주요 브라우저에서는 지원되지 않습니다.

font-size-adjust: 요소의 가로세로 값을 지정합니다. 글꼴의 소문자 "x" 높이와 "글꼴 크기" 높이 사이의 비율을 글꼴의 가로세로 값이라고 합니다. 이렇게 하면 기본 글꼴의 x 높이가 유지됩니다.

2. 텍스트 시리즈 속성

text-indent: 텍스트 들여쓰기

text-align: 텍스트 가로 정렬

line-height: 줄 높이

word-spacing: 단어 사이의 간격을 늘리거나 줄입니다(예: 단어 간격). )

letter-spacing: 문자 사이의 간격을 늘리거나 줄입니다(문자 간격)

text-transform: 텍스트 대소문자 제어

direction: 텍스트 쓰기 방향 지정

color: 텍스트 색상

3. 요소 가시성 ： visible

4. 테이블 레이아웃 속성: caption-side, border-collapse, border-spacing,empty-cell, table-layout

5. 목록 속성: list-style-type, list-style-image, list-style -position, list-style

6, 생성된 콘텐츠 속성: quote

7, 커서 속성:cursor

8, 페이지 스타일 속성: page, page-break-inside, windows, orphans

9, 사운드 스타일 속성 ： 말하기, 구두점 말하기, 숫자 말하기, 헤더 말하기, 속도, 볼륨, 음성 계열, 음조, 음조 범위, 강세, 풍부함, 방위각, 고도

모든 요소가 상속할 수 있는 속성:

• 요소 가시성: 가시성, 불투명도

• 커서 속성: 커서

인라인 요소는 속성을 상속받을 수 있습니다.

• 글꼴 계열 속성

• text-indent 및 text-align 제외 텍스트 시리즈 속성

블록 수준 요소가 상속할 수 있는 속성: text-indent, text-align

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 상속받을 수 있는 CSS의 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!