CSS 상속이 무슨 뜻인가요? CSS의 어떤 속성을 상속받을 수 있나요?

CSS를 배우는 과정에서 상속할 수 있는 몇 가지 속성을 만나게 됩니다. 그렇다면 CSS에서 상속이란 무엇을 의미할까요? 어떤 속성을 상속받을 수 있나요? 이번 글에서는 CSS 상속의 내용을 소개하겠습니다.

CSS 상속을 정의하기 전에 먼저 HTML DOM(문서 트리)을 살펴보겠습니다. HTML DOM(문서 트리)은 html 요소로 구성됩니다. 또한 조상, 후손, 아버지, 자녀, 형제도 있습니다. 사실 이해하기 쉬우므로 여기서는 자세히 설명하지 않겠습니다. 더 알고 싶으시면 HTML DOM 중국어 참조 매뉴얼을 참조하세요.

CSS 상속이란 무엇을 의미하나요?

문서 트리를 살펴본 후 CSS의 상속은 하위 요소에 전달되는 특정 CSS 속성으로 정의할 수 있습니다. 이는 실제로 이해하기 쉽습니다. 즉, 내부에 포함된 태그는 외부 태그의 스타일을 갖게 됩니다. 즉, 하위 요소는 상위 요소의 속성을 상속할 수 있습니다.

CSS의 상속이 무엇인지 구체적으로 설명하기 위해 예를 들어 보겠습니다.

<p>
CSS<em>继承性</em>代码
</p>

em도 p에 포함되어 있으니 참고하세요.

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

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

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

이 내용을 보고 나면 CSS의 상속이 무엇을 의미하는지 확실히 알 수 있을 것 같습니다. 실제로 CSS 상속은 코드를 작성할 때 알지 못한 채 사용되는 경우가 많습니다.

물론 위의 예에서는 속성을 상속할 수 있지만 모든 속성을 상속할 수는 없습니다. 그렇다면 CSS에서 상속할 수 있는 속성은 무엇인가요? 아래에 정리해 보겠습니다.

CSS에서 상속할 수 있는 속성은 무엇인가요?

1. CSS에서 상속된 글꼴 속성 중

font: 글꼴 . 글꼴 계열: 요소의 글꼴을 지정합니다. Font-Weight : 글꼴의 두께를 설정합니다.

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

font-variant: 텍스트를 표시하기 위해 글꼴을 작은 대문자로 설정합니다. 즉, 모든 소문자는 대문자로 변환되지만 작은 대문자를 사용하는 모든 문자는 나머지 텍스트보다 작아집니다. 글꼴 크기가 더 작습니다.

font-stretch: 현재 글꼴 모음을 늘리고 변형합니다. 모든 주요 브라우저에서는 지원되지 않습니다.

font-size-adjust: 기본 글꼴의 x 높이가 유지되도록 요소의 가로세로 값을 지정합니다.

2 CSS에서 상속된 속성의 텍스트 속성:

text-indent: 텍스트 들여쓰기. text-align: 텍스트를 가로로 정렬합니다. line-height : 줄 높이. 단어 간격: 단어 사이의 간격을 늘리거나 줄입니다(예: 단어 간격).

letter-spacing: 문자 사이의 간격(문자 간격)을 늘리거나 줄입니다. text-transform: 텍스트 대소문자를 제어합니다. 방향: 텍스트의 쓰기 방향을 지정합니다.

color: 텍스트 색상

3. CSS에서 상속된 속성의 요소 가시성:

가시성: 여부를 ​​지정합니다. 요소가 표시됩니다.

4. CSS에 상속된 속성이 있는 테이블 레이아웃 속성:

caption-side: 테이블 제목의 위치를 ​​설정합니다. border-collapse: 테이블 테두리를 단일 테두리로 축소할지 여부를 설정합니다.

border-spacing: 셀 테두리를 구분하는 거리를 설정합니다. 빈 셀: 테이블에 빈 셀을 표시할지 여부를 설정합니다.

table-layout: 셀, 행, 열 표시 알고리즘을 설정합니다.

5. CSS에서 상속된 속성의 목록 레이아웃 속성:

list-style-type: 목록 항목에 사용되는 스타일 수정 플래그 유형 . list-style-image: 각 로고에 이미지를 사용합니다.

list-style-position: 로고가 목록 항목 콘텐츠 외부에 표시되는지 아니면 콘텐츠 내부에 표시되는지 결정할 수 있습니다.

list-style: 축약된 목록 스타일, 하나의 명령문에서 목록의 모든 속성을 설정하는 데 사용됩니다.

6. CSS에서 상속된 속성의 생성된 콘텐츠 속성:

quotes: 중첩된 참조의 인용 유형을 설정합니다.

7. CSS에 상속된 속성인 커서 속성:

cursor: 표시할 커서의 유형(모양)을 지정합니다.# 🎜🎜#

8. CSS에서 상속된 속성의 페이지 스타일 속성:

page: 요소가 표시되어야 하는 특정 페이지 유형을 지정합니다. page-break-inside: 테이블 요소 내부에서 페이징을 방지하도록 페이징 동작을 설정합니다.

windows: 요소 내에서 페이지 매김이 발생할 때 페이지 상단에 남아 있어야 하는 최소 줄 수를 설정합니다.

orphans: 요소 내에서 페이지 매김이 발생할 때 페이지 하단에 남아 있어야 하는 최소 줄 수를 설정합니다.

9. CSS에서 상속된 속성은 사운드 스타일 속성입니다.

speak: 사운드 제공 여부를 설정하거나 검색합니다. speech-tempotion: 구두점 발음 방법을 설정하거나 검색합니다.

speak-numeral: 숫자 발음 방법을 설정하거나 검색합니다. talk-header: 테이블 헤더 다음에 나오는 일련의 셀과 관련하여 테이블 헤더가 나타나는 횟수를 설정하거나 검색합니다.

speech-rate: 발음 속도를 설정하거나 검색합니다. 볼륨: 볼륨을 설정하거나 검색합니다.

voice-family: 현재 음성 유형을 설정하거나 검색합니다. 피치: 피치를 설정하거나 검색합니다.

피치 범위: 소리의 부드러움을 설정하거나 검색합니다. 스트레스: 피치 범위와 유사합니다. 현재 사운드 파형의 최고 피크 값을 설정하거나 검색합니다.

풍부함: 현재 사운드의 음색을 설정하거나 검색합니다. 방위각: 현재 사운드의 음장 각도를 설정하거나 검색합니다.

elevation: 현재 사운드의 소스 고도각을 설정하거나 검색합니다.

10. 모든 요소에서 상속할 수 있는 속성: visible,curs

11. 인라인 요소에서 상속할 수 있는 속성:

(1) 글꼴 계열 속성

(2) text-indent 제외 , text- align

12. 블록 수준 요소에서 상속할 수 있는 속성

: text-indent, text-align 위 내용은 CSS 상속에 대한 요약입니다. CSS 상속 관련 지식을 더 깊이 이해하고 싶다면 php 중국어 홈페이지에 접속해

css video tutorial

칼럼이나 다양한 CSS 관련 영상이 담긴 css3 video tutorial 칼럼을 살펴보시면 됩니다. 관련 권장 사항:

CSS 상속 심층 분석

css의 속성 값 상속 소개

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