CSS 우선순위 및 상속 문제

CSS 우선순위 및 상속 문제

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

★스타일 상속:
상속이란 상위(부모)의 CSS 스타일을 설정한다는 의미입니다. , 상위(상위) 레벨) 및 하위(하위) 레벨이 이 속성을 갖습니다. 일반적으로 텍스트 텍스트에만 텍스트 크기, 텍스트 굵기, 텍스트 색상, 글꼴 등과 같은 속성이 상속됩니다. 그러나 일부 CSS 스타일은 상속되지 않습니다. 예를 들어 border: 1px solid red;

demo:

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

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

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

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

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

2. 텍스트 속성:

vertical-align: 세로 텍스트 정렬

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

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

white-space: 공백 문자 처리

unicode-bidi: 텍스트 방향 설정

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

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

5. 위치 지정 속성: float,clear, position, top, right, Bottom, left, min-width, min-height, max-width, max - 높이, 오버플로, 클립, Z-인덱스

6. 생성된 콘텐츠 속성: content, counter-reset, counter-increment

7. 개요 스타일 속성: 개요 스타일 , 외곽선-색상, 윤곽선

8. 페이지 스타일 속성: 크기, 페이지 나누기 전, 페이지 나누기 후

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

2. 상속 속성

1. 글꼴 계열 속성

글꼴: 결합 글꼴

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

font-weight: 글꼴 두께 설정

font-size: 글꼴 크기 설정

font- style: 글꼴 스타일 정의

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

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

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

2. 텍스트 시리즈 속성

text-indent: 텍스트 들여쓰기

text-align: 텍스트 가로 정렬

line-height: 줄 높이

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

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

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

방향: 텍스트 쓰기 방향 지정

색상: 텍스트 색상

3. 요소 가시성: 가시성

4. 테이블 레이아웃 속성: 캡션 측면, 테두리 접기, 테두리 간격, 빈 셀, 테이블 레이아웃

5. 속성: 목록 스타일 유형, 목록 스타일 이미지, 목록 스타일 위치, 목록 스타일

6. 생성된 콘텐츠 속성: 인용부호

7. 커서

8. 페이지 스타일 속성: 페이지, 페이지 나누기 내부, 창, 고아

9. 사운드 스타일 속성: 말하기, 구두점 말하기, 숫자 말하기, 말하기 속도 , 볼륨, 성음계열, 음높이, 음높이 범위, ​​강세, 풍부함, 방위각, 고도

3. 모든 요소에 상속될 수 있는 속성

1. 🎜>

2. 커서 속성: 커서

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

1. 텍스트 들여쓰기 제외. , text-align 이외의 텍스트 시리즈 속성

5. 블록 수준 요소가 상속할 수 있는 속성

1. text-indent, text-align

CSS가 더 선호됩니다. 레벨 및 상속 문제에 관한 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!