> 웹 프론트엔드 > CSS 튜토리얼 > CSS에 상속관계가 있나요?

CSS에 상속관계가 있나요?

青灯夜游
풀어 주다: 2022-12-30 11:12:13
원래의
3355명이 탐색했습니다.

CSS에는 상속 관계가 있습니다. CSS 상속은 특정 html 태그 요소뿐만 아니라 그 하위 항목에도 스타일을 적용할 수 있도록 허용하는 규칙입니다. 즉, 상위(상위)의 CSS 스타일이 설정된 경우 상위(상위)의 하위 요소입니다. 이하의 모든 레벨(하위)에는 이 스타일이 있습니다.

CSS에 상속관계가 있나요?

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

(학습 영상 공유: css 영상 튜토리얼)

css는 상속 관계를 가지고 있습니다. CSS 상속의 역할: 상위 요소에 대한 일부 속성을 설정하면 하위 요소에서도 사용할 수 있습니다.

CSS 상속은 내부에 포함된 태그가 외부 태그의 스타일 속성을 갖는다는 것을 의미합니다. 상속 기능의 가장 일반적인 적용은 주로 웹페이지 전체의 기본 스타일로 사용되며, 다른 스타일로 지정해야 하는 부분은 개별 요소에서 설정할 수 있습니다. 이 기능은 웹 디자이너에게 보다 이상적인 플레이 공간을 제공할 수 있습니다. 그러나 동시에 상속에는 적용 시 혼란스러울 수 있는 많은 규칙이 있습니다. CSS의 주요 기능 중 하나는 조상-하위 관계에 의존하는 상속입니다. 상속은 특정 요소뿐만 아니라 그 하위 요소에도 스타일을 적용할 수 있도록 하는 메커니즘입니다. 예를 들어 BODY로 정의된 색상 값은 단락 텍스트에도 적용됩니다. 다음은 예입니다.

스타일 정의:

body{color:red;}
로그인 후 복사

응용 예제 코드:

<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
로그인 후 복사

이 코드의 응용 프로그램 결과는 다음과 같습니다. "CSS 계단식 및 상속에 대한 심층 토론" 이 단락은 빨간색으로 표시됩니다. 상속" Strong 요소가 적용되어 굵게 표시됩니다. 이는 작성자의 의도와 일치하며 상속이 CSS의 일부인 이유입니다.

참고:

1. 모든 속성을 상속할 수는 없습니다. color/font-/text-/line으로 시작하는 속성만 상속할 수 있습니다.

2.

상속 가능

응용 프로그램 시나리오:

은 일반적으로 텍스트 색상, 글꼴, 텍스트 크기 등과 같은 웹 페이지의 공통 정보를 설정하는 데 사용됩니다.

CSS에는 상속된 속성이 있습니다

1. 텍스트 시리즈 속성

text-indent: 텍스트 들여쓰기

text-align: 텍스트 가로 정렬

line-height: 줄 높이

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

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

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

direction: 텍스트 쓰기 방향 지정

color: 텍스트 색상

2. 글꼴: 조합 글꼴

font-family: 요소의 글꼴 모음 지정

font-weight: 글꼴의 두께 설정

font-size: 글꼴 크기 설정

font-style: 스타일 정의 글꼴

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

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

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

3. 테이블 레이아웃 속성

caption-side: 테이블 제목의 위치를 ​​설정합니다.

border-collapse: 표 테두리를 단일 테두리로 병합할지 아니면 표준 HTML처럼 별도로 표시할지 설정합니다.

border-spacing: 인접한 셀의 테두리 사이의 거리를 설정합니다("테두리 분리" 모드에서만 사용됨).

empty-cells: 테이블에 빈 셀을 표시할지 여부를 설정합니다("테두리 분리" 모드에만 해당).

table-layout: 테이블의 테이블 레이아웃 알고리즘을 설정합니다.

4. 목록 레이아웃 속성:

list-style-type: 목록 항목 표시 유형을 설정합니다.

list-style-image: 이미지를 사용하여 목록 항목의 마크업을 대체합니다.

list-style-position: 객체의 내용을 기준으로 목록 항목 마커가 그려지는 방식을 나타냅니다.

list-style: 하나의 선언으로 모든 목록 속성을 설정하는 약식 속성입니다.

5. 요소 가시성: visible

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

7. 페이지 스타일 속성:

page, page-break-inside, windows , orphans

9, 사운드 스타일 속성:

말하기, 구두점 말하기, 숫자 말하기, 헤더 말하기, 말하기 속도, 볼륨, 음성 계열, 피치, 피치 범위, 강세, 풍부함,, 방위각 , 고도

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

위 내용은 CSS에 상속관계가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿