CSS 우선순위 및 상속 문제

★CSS 충돌, 즉 우선순위
CSS 자체의 설정은 동일한 요소에 동시에 여러 스타일을 적용할 수 있으며, 이때 스타일 간에 충돌이 발생할 수 있으며 사용자가 원하는 효과를 얻을 수 없습니다.
★CSS 충돌 해결 우선순위 규칙:
● CSS 캐스케이딩 스타일 시트 도입 방법 우선순위: 인라인 > 내장 >가져오기
● 여러 외부 스타일 중 나중에 나타나는 스타일이 먼저 나타나는 스타일보다 우선순위가 높으며, 이를 흔히 재정의(override)라고 합니다.
● 스타일에서는 선택자의 우선순위: ID 스타일 >클래스 스타일>마크 스타일 (가중치 비유 사용: id의 가중치는 100, 클래스의 가중치는 10, 태그 이름의 가중치는 1)
● 스타일 뒤에 !important를 추가합니다. 예: .abc { background:#fff !improtant;} 이 스타일의 우선순위는 기본적으로 최상위 수준으로 올라가며, 전역 스타일은 영향을 미칠 수 없습니다.
✪참고: !important는 세미콜론 앞에 써야 합니다.
우선순위:
근접 원칙(코드에 가까울수록 우선순위가 높음)
선택 범위가 작을수록 우선순위가 높아집니다. 선택 범위를 좁히기 위해 상위 요소의 선택자를 더 추가하여 CSS를 다듬고 레이어별로 래핑합니다.

★스타일 상속:
상속은 다음을 참조합니다. 우리의 설정 상위 수준(부모)의 CSS 스타일, 상위 수준(부모)과 다음 자식(하위) 모두 이 속성을 갖습니다. 일반적으로 텍스트 텍스트에만 텍스트 크기, 텍스트 굵기, 텍스트 색상, 글꼴 등과 같은 속성이 상속됩니다. 그러나 일부 CSS 스타일은 상속되지 않습니다. 예를 들어 border: 1px solid red;

demo:

<p style="color:red;">如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

로그인 후 복사

Description: (1) 상위 항목(부모: p)의 텍스트 색상을 빨간색으로 설정했습니다. , 및 하위 레벨(범위)에 대해 텍스트 색상이 설정되지 않았지만 텍스트에 상속 속성이 있으므로 하위 레벨의 텍스트 내용은 여전히 빨간색입니다.
(2) 상위 텍스트 색상 스타일을 설정한 후 상속으로 인해 여러 하위 항목이 상위 항목과 동일해지는 경우 일부 하위 항목의 색상이 상위 항목과 동일해지기를 원하지 않는 경우에만 필요합니다. 해당 어린이에게 필요한 색상을 설정합니다.
✪참고: 또 다른 특별한 가중치가 있습니다. 상속에도 가중치가 있지만 매우 낮습니다. 일부 문헌에서는 이 가중치가 0.1에 불과하므로 상속의 가중치가 가장 낮다고 이해할 수 있습니다.

상속의 장점: 상위 CSS 스타일시트 속성만 설정할 수 있으며 하위 항목은 모두 이 CSS 속성을 가지므로 CSS를 줄일 수 있습니다. 코드를 작성하고 유지 관리를 용이하게 합니다.

★ CSS에서 상속할 수 있는 속성과 상속할 수 없는 속성
1. 상속이 없는 속성

1. 디스플레이: 요소가 생성해야 하는 상자 유형을 지정합니다.

2. 텍스트 속성:

vertical-align: 세로 텍스트 정렬

text- decoration: 텍스트에 추가되는 장식 지정

text-shadow: 텍스트 그림자 효과

white-space: 공백 문자 처리

unicode-bidi: 방향 설정 텍스트

3. 상자 모델의 속성: 너비, 높이, 여백, margin-top, margin-right, margin-bottom, margin-left, border, border-style, border-top-style , 테두리 오른쪽 스타일, 테두리 하단 스타일, 테두리 왼쪽 스타일, 테두리 너비, 테두리 상단 너비, 테두리 오른쪽 오른쪽, 테두리 하단 너비, 테두리 왼쪽 너비, 테두리 색상 , 테두리 상단 색상, 테두리 오른쪽 색상, 테두리 하단 색상, 테두리 왼쪽 색상, 테두리 상단, 테두리 오른쪽, 테두리 하단, 테두리 왼쪽, 패딩, 상단 패딩, 오른쪽 패딩 , padding-bottom, padding-left

4. 배경 속성: background, background-color, background-image, background-repeat, background-position, background-attachment

5. : 부동, 지우기, 위치, 위쪽, 오른쪽, 아래쪽, 왼쪽, 최소 너비, 최소 높이, 최대 너비, 최대 높이, 오버플로, 클립, Z-색인

6. 콘텐츠 속성을 생성합니다. content, counter-reset, counter-increment

7. 개요 스타일 속성: 개요-스타일, 개요-너비, 개요-색상, 개요

8. 페이지 스타일 속성: 크기, 페이지- 브레이크 전, 페이지 브레이크 후

9. 사운드 스타일 속성: 일시 정지 전, 일시 정지 후, 일시 정지, 큐 전, 큐 후, 큐, 재생 중

2. 상속 속성

1. 글꼴 계열 속성

font: 결합된 글꼴

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

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

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