CSS 스타일 시트에는 어떤 유형이 있나요? 선택자 우선순위란 무엇입니까?

CSS 스타일 시트에는 인라인 스타일 시트, 내부 스타일 시트, 외부 스타일 시트의 세 가지 유형이 있습니다. 선택기 우선순위는 "범용 선택기> 요소 선택기> 클래스 선택기> 속성 선택기> 의사 클래스> ID 선택기> 인라인 스타일"입니다.

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

CSS 스타일 시트에는 어떤 유형이 있나요?

CSS 스타일이 작성되는 위치(또는 도입 방식)에 따라 CSS 스타일 시트는 다음 세 가지 범주로 나눌 수 있습니다.

1. 인라인 스타일 시트

인라인 스타일은 CSS 스타일을 배치하는 것을 의미합니다. 코드 줄 내에서 직접 태그에 넣는 경우가 많으며, 인라인 스타일은 태그에 직접 삽입하는 방식이므로 가장 직접적인 방법이며, 수정하기 가장 불편한 스타일이기도 합니다. .

예:

<p style="background-color: #999900">行内元素，控制段落-1</p>

2. 내부 스타일 시트

내부 스타일 시트는

웹 문서에 여러 개의

예:

<style>
div {
color: blue;
font-size: 16px;
}
</style>

3. 외부 스타일 시트

CSS 스타일이 웹 문서 외부의 파일에 배치된 경우 이를 외부 스타일 시트라고 합니다.

실제로 외부 스타일 시트는 확장자가 .css인 텍스트 파일일 뿐입니다. CSS 스타일 코드를 텍스트 파일에 복사하여 .css 파일로 저장하면 외부 스타일 시트입니다.

HTML 페이지에서 태그를 사용하여 파일을 소개하세요.

<link rel="styleheet" href="css文件路径">

다중 스타일 시트 우선순위:

인라인 스타일 > sheet > 외부 스타일 시트 요소와 가장 관련성이 높은 속성 값이 결정되어 해당 요소에 적용됩니다. 우선순위는 선택자로 구성된 일치 규칙에 의해서만 결정됩니다.

우선순위는 지정된 CSS 선언에 할당된 가중치로, 일치하는 선택기의 각 선택기 유형 값에 따라 결정됩니다.

선택기 우선순위는 무엇인가요?

다음은 우선순위가 높아지는 선택기 목록입니다.

범용 선택기(*)

요소(유형) 선택기

• 클래스 선택기
• 속성 선택기
• Pseudo-class
• ID 선택기
• 인라인 styles
• !important 규칙 예외
• !important 규칙이 스타일 선언에 적용되면 스타일 선언은 선언 목록에 있는지 여부에 관계없이 CSS의 다른 선언보다 우선 적용됩니다. !important를 사용하는 것은 스타일시트의 원래 계단식 규칙을 변경하여 디버깅을 어렵게 만들기 때문에 좋은 습관이 아닙니다.

몇 가지 경험 법칙:

Always

최적화하려면 !important

• Only 대신 사이트 전체 또는 외부 CSS(예를 들어 ExtJs 또는 YUI 참조의 특정 페이지에서는 !important!important
• Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• Never 永远不要在全站范围的 css 上使用 !important
• Never 永远不要在你的插件中使用 !important 

Never

를 사용하세요.) 사이트에서는 절대 !important

Never

를 사용하지 마세요. 넓은 CSS. 플러그인에서 !important 를 사용하지 마세요.

가중치 계산:
• 설명:
• 1. 인라인 스타일 시트의 최대 가중치는 1000입니다. 선택기의 가중치는 100

3. Class 클래스 선택기의 가중치는 10

🎜 4. HTML 태그 선택기의 가중치는 1🎜🎜🎜 선택기의 가중치를 사용하여 계산하고 비교하면 em은 파란색으로 표시됩니다. , 예는 다음과 같습니다: https://c.runoob.com/codedemo/3048🎜

CSS 우선순위 규칙:

• A. 각 선택자에는 가중치가 있으며, 가중치가 클수록 우선순위가 높습니다.
• B. 가중치가 동일할 경우 나중에 나타나는 스타일 시트 설정이 더 좋습니다.
• C 작성자의 규칙이 뷰어의 규칙보다 높습니다. 즉, 웹 페이지 작성자가 설정한 CSS 스타일이 브라우저에서 설정한 스타일보다 우선순위가 높습니다.
• D 상속된 CSS 스타일. 나중에 지정된 CSS 스타일만큼 좋지 않습니다.
• E 동일하게 그룹 속성 설정에서 "!important"로 표시된 규칙이 가장 높은 우선순위를 갖습니다. 예는 다음과 같습니다. /codedemo/3049
  결과: Firefox에서는 파란색으로 표시되고, IE 6에서는 빨간색으로 표시됩니다.

다음은 인기 있는 CSS 가중치 관계 다이어그램입니다:

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

위 내용은 CSS 스타일 시트에는 어떤 유형이 있나요? 선택자 우선순위란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!