CSS3에서 all 속성의 용도는 무엇입니까? CSS3의 모든 속성 사용법 소개
- 不言앞으로
- 2018-10-18 15:38:213152검색
이 글의 내용은 CSS3에서 all 속성의 사용법에 관한 것입니다. CSS3의 all 속성 사용법에 대한 소개에는 특정 참조 값이 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 호환성
아래와 같습니다.
호환성은 괜찮습니다. 지원되지 않는 IE를 제외하면 현재 자체 엔터테인먼트, 인트라넷 프로젝트 등의 경우 기본적으로 녹색입니다. 괜찮습니다.
2. all 속성은 실제로는 all CSS 속성의 약어입니다. 즉, 모든 CSS 속성이 이와 같지만 unicode-bidi와 방향이라는 두 가지 CSS 속성은 포함되지 않습니다.
이 CSS 속성이 왜 있나요? 상속과 같은 일부 CSS 속성 값은 기본적으로 모든 CSS 속성에서 공유된다는 것을 알 수 있습니다! CSS에서 입력 상자를 재설정할 때 다음과 유사한 코드가 있습니까(실제로는 유사한 효과를 갖는 특정 값일 수 있음):input, textarea {
color: inherit;
font-size: inherit;
font-family: inherit;
}이 유형의 입력 컨트롤에는 자체 내장 크기와 글꼴을 재설정해야 합니다. 이 시점에서 모든 사람은 이러한 속성 값이 모두 상속된다는 것을 알게 될 것입니다. CSS의 모든 속성은 병합에 사용됩니다.
input, textarea {
all: inherit;
}이것은 단지 표시용이며 실제로는 사용되지 않습니다. 왜냐하면 all:inherit는 배경색과 다른 것들이 부모로부터 상속되기 때문입니다. 나는 이것이 당신이 보고 싶어하는 것이 아니라고 믿습니다. 3. 구문과 차이점구문은 다음과 같습니다.
all: initial; all: inherit; all: unset; /* CSS4特性，无视之 */ all: revert;기본 HTML과 CSS는 제목과 목록이 있는 전통적인 태그 콘텐츠입니다.
<article>
<h6>标题</h6>
<p>p变文字</p>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<textarea>文本域</textarea>
</article>
article {
background-color: #f0f3f9;
color: green;
}
article > textarea {
border: 1px solid #34538b;
background-color: #ffffe0;
color: red;
}보시다시피:
색상, 간격 및 텍스트 필드 상태는 우리가 생각하는 대로 표시됩니다.
.initial > * {
all: initial;
}
.inherit > * {
all: inherit;
}
.unset > * {
all: unset;
}결과:
initial은 초기 값, 즉 모든 기사 요소 아래의 첫 번째 요소 unicode-bidi 및 방향을 제외한 모든 CSS 요소는 초기 값을 사용합니다.
,
요소의 내장 디스플레이:블록이 인라인 요소로 대체되어 한 줄에 표시됩니다.
글꼴 -size도 사용됩니다. 브라우저 소프트웨어 자체에서 설정한 크기는 16px이며, 색상 색상도 브라우저 소프트웨어 자체의 검정색으로 변경되었습니다. 예를 들어, 브라우저 설정에서 글꼴 크기를 중간에서 크게로 변경합니다:
표시된 텍스트 콘텐츠도 더 커진 것을 볼 수 있습니다:
인접 레벨 하위 요소는 초기 설정이 되어 있으므로
inherit은 상속을 의미합니다. 즉, 기사 요소 아래의 모든 인접한 하위 요소는 unicode-bidi 및 방향을 제외하고
,
요소는 여전히 블록 모양이고, background-color는 unset 요소의 표시 속성 값은 초기 값을 사용하므로 인라인 요소가 되며 두 개가 같은 줄에 표시됩니다. 이러한 요소의 색상은 상속 값을 사용하므로 모두 녹색입니다. 
결과는 다음과 같습니다. 하위 요소가 꽃을 피웠습니다. 
,
위 내용은 CSS3에서 all 속성의 용도는 무엇입니까? CSS3의 모든 속성 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!