CSS의 핵심 기본 요약

오늘의 글은 이전 CSS 보충 지식을 통합한 것입니다.

CSS에 대한 기존 지식이 좀 헷갈리는 것 같아서 오늘 정리하겠습니다.

캐스케이딩 스타일시트

캐스케이딩이 무슨 뜻인가요? 이 단어가 그 이름에 포함되는 것이 왜 그렇게 중요한가요?

계단식은 단순히 충돌 해결로 이해될 수 있습니다.

갈등이란 무엇입니까?

은 다른 선택기를 사용하여 동일한 요소를 선택한 후 동일한 스타일을 추가하는 것을 의미합니다.

우선순위 규칙은

인라인 스타일>ID 스타일>카테고리 스타일>태그 스타일

복잡한 페이지에서는 특정 요소가 여러 요소로부터 스타일을 얻을 수 있습니다. 예를 들어 웹사이트의 특정

수준 제목은 전체적으로 녹색을 사용하도록 설정되어 있지만 특수 열은 파란색을 사용해야 하므로 해당 열에

을 사용해야 합니다. . 일반 스타일 설정을 재정의합니다. 매우 단순한 페이지에서는 이러한 특별한 요구 사항을 구현하는 것이 어렵지 않을 것입니다.

그러나 웹 사이트의 구조가 매우 복잡하면 코드가 매우 혼란스러워서 찾을 수 없을 수도 있습니다.

특정 요소의 스타일을 결정하는 규칙은 다음과 같습니다. 따라서 CSS의 "캐스케이딩(Cascading)" 원리를 완전히 이해하는 것이 필요합니다.

상충되는 스타일의 우선순위를 계산하는 것은 비교적 복잡한 프로세스이며, 위의

단순한 우선순위 규칙만으로는 이를 완전히 설명할 수 없습니다. 그러나 독자들은 "스타일이 특별할수록 우선순위가 높아진다"는 일반적인 원칙을 따를 수 있습니다.

이게 어떻게 특별하고, 어떻게 특별하게 포지셔닝해야 하는지는 아래 내용을 꼭 읽어주세요.

특이성:

각 선택자에는 특이성이 있으며 요소에 두 개 이상의 충돌하는 속성 선언이 있는 경우 특이성이 더 높은 항목이 승리합니다.

선택기의 특이성은 선택기 자체의 구성 요소에 따라 결정됩니다. 특이도 값은 0,0,0,0과 같이 4부분으로 표현됩니다.

선택기의 특정 특이도는 다음과 같이 결정됩니다.

선택기에 지정된 각 ID에 대해 속성 값은 두 번째 부분인 0,1,0,0에 1을 추가합니다.

선택기에 제공된 각 클래스 속성 값, 속성 선택 또는 의사 클래스에 대해 세 번째 부분인 0, 0, 1, 0에 1을 추가합니다.

선택기에 제공된 각 요소와 의사 요소에 대해 네 번째 부분인 0,0,0,1에 1을 추가합니다.

결합자와 와일드카드 선택자는 구체성에 아무런 영향을 미치지 않습니다.

그러나 와일드카드 선택기는 구체성이 0입니다. 즉, 0,0,0,0입니다.

결합 기호에는 0도 없습니다.

예:

h1{color:red;}는 0,0,0,1입니다.

p em{color:purple}은 0,0,0,2입니다.

.grape{color:purple}은 0,0,1,0

p.b e.a{color:red } 0,0,2,2

#aa; {color:red;} 0,1,0,0

p#aa *[href]{color:red;} 0,1,1,1

그리고 첫 번째 0 는 인라인 스타일을 위해 준비되어 있는데, 빠를수록 우선순위가 높기 때문에 0이 아닌 숫자의 위치가 동일할 경우 먼저 이전 숫자의 크기를 비교한 후

합니다. 숫자가 상대적이지 않을 때까지 아래쪽으로 비교하세요. 숫자가 더 큰 숫자가 더 높은 우선순위를 갖습니다.

그래서 위에 대략적인 우선순위 규칙이 있는 것입니다.

인라인 스타일>ID 스타일>카테고리 스타일>태그 스타일

그들은 각각 작동합니다. 일부 부서는 번호에 따라 자리에 앉습니다.

중요한 설명 !important 즉, 필요한 설명을 표시하세요. 우선순위가 가장 높지만 선언된 값의 마지막에 배치되어야 합니다.

상속:

상속의 특수성은 0도 아닙니다. 즉, 특수성이 없습니다.

전문화가 없는 것과 큰 차이가 있다는 것입니다. 즉, 구체성이 0인 선택자는

자손에 스타일을 추가할 수 있으며 상속도 자손에 스타일을 추가할 수 있지만 색상과 같은 자손 요소에는 상속 기능이 있는 선택자만 추가할 수 있다는 제한이 있습니다. 등. 여백, 패딩 및 테두리 속성은 하위 항목에 추가되지 않습니다.

동일한 가중치를 가진 순서대로 비교됩니다.

특이성이 높은 것이 낮은 것보다 강합니다

따라서 의사 클래스 선언 순서: link-visited-hover-active

LVHA(약어)

언제 :visited 가 그 뒤에 옵니다. 가중치가 동일하기 때문에 순서가 확인되고 :visited 가 그 뒤를 따릅니다.

통합 속성을 작성하지 않으면 이 문제가 발생하지 않습니다. 따라서 동일한 속성을 작성할 때는 주의하세요! ! ! !

위 내용은 CSS의 핵심 기초입니다.

이 지식 확장:

포함 블록:

포함 블록의 너비는 포함된 요소의 상위 요소 너비입니다. 너비이고 부모의 너비는

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right=포함 블록 가로 너비

width, margin-left 및 margin-right는 모두 자동으로 설정할 수 있습니다.

margin-left와 margin-right는 동시에 자동으로 설정되므로 가운데 정렬이 수행됩니다. , 그러나 이는 문제가 됩니다. 조건부:

1. 이 요소는 블록 수준 요소여야 하며 문서 흐름에서 분리되지 않아야 합니다.

2 이 요소는 너비가

margin-top 및 margin-bottom 설정 자동은 수직으로 중앙에 배치되지 않습니다. 자동으로 설정하면 0과 동일해집니다.

전체 가로 길이의 7가지 속성은 위 계산식의 속성으로, 그 합은 전체 가로 길이보다 클 수 없으며, 여백은 음수 값이 될 수 있으므로 이 규칙을 위반하지 않습니다. 계산.

참고: 여백만 음수일 수 있습니다.

마진이 음수일 때 어떻게 보이는지 직접 경험해 보세요. 이 속성은 상당히 불법적인 것 같습니다.

위의 CSS 핵심 기본 요약(권장)은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 홈페이지에 많은 지원 부탁드립니다.

CSS의 핵심 기본 요약과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!