CSS3에서 all 속성의 용도는 무엇입니까? CSS3의 모든 속성 사용법 소개

이 글의 내용은 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 id="标题">标题</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;
}

보시다시피:

색상, 간격 및 텍스트 필드 상태는 우리가 생각하는 대로 표시됩니다.

이제 데모의 드롭다운 메뉴를 클릭하고 해당하는 모든 속성 값을 선택하면 다음 CSS 효과를 얻을 수 있습니다.

.initial > * {
    all: initial;
}
.inherit > * {
    all: inherit;
}
.unset > * {
    all: unset;
}

결과:

initial은 초기 값, 즉 모든 기사 요소 아래의 첫 번째 요소 unicode-bidi 및 방향을 제외한 모든 CSS 요소는 초기 값을 사용합니다.

예를 들어, 브라우저의

,

요소의 내장 디스플레이:블록이 인라인 요소로 대체되어 한 줄에 표시됩니다.

글꼴 -size도 사용됩니다. 브라우저 소프트웨어 자체에서 설정한 크기는 16px이며, 색상 색상도 브라우저 소프트웨어 자체의 검정색으로 변경되었습니다. 예를 들어, 브라우저 설정에서 글꼴 크기를 중간에서 크게로 변경합니다:

표시된 텍스트 콘텐츠도 더 커진 것을 볼 수 있습니다:

인접 레벨 하위 요소는 초기 설정이 되어 있으므로

요소는 영향을 받지 않습니다. 그러나 상위 요소를 알 수 없는 경우

요소는 기본적으로 점으로 설정되므로 여기서 숫자는 dot, list-style -type과 list-style-position이 모두 변경되었습니다.

inherit은 상속을 의미합니다. 즉, 기사 요소 아래의 모든 인접한 하위 요소는 unicode-bidi 및 방향을 제외하고

요소의 CSS를 상속합니다.

따라서

,

요소는 여전히 블록 모양이고, background-color는

요소의 배경색이며, 색상은

과 동일합니다. 이는 녹색입니다(텍스트 필드의 빨간색이 사라졌습니다).

위 CSS뿐만 아니라 패딩/여백도 상속되지만 기본값은 0입니다. 이를 약간 수정해 보겠습니다. 예를 들어

요소에 여백 값을 지정합니다.

결과는 다음과 같습니다. 하위 요소가 꽃을 피웠습니다.

unset

# 🎜🎜#unset은 unset, 즉 unicode-bidi와 방향을 제외하고 기사 요소 아래에 있는 모든 인접한 하위 요소의 CSS를 제거한다는 의미입니다. 필요하지 않다면 어떤 용도로 사용해야 할까요? 설정되지 않은 값의 특징은 다음과 같습니다. 현재 요소 브라우저나 사용자가 설정한 CSS는 무시됩니다. 그러면 색상 등 상속된 속성이 있는 경우 CSS 속성인 경우 상속된 값이 사용됩니다. background-color와 같은 상속된 속성이 없으면 초기 값이 사용됩니다.

따라서

,

요소의 표시 속성 값은 초기 값을 사용하므로 인라인 요소가 되며 두 개가 같은 줄에 표시됩니다. 이러한 요소의 색상은 상속 값을 사용하므로 모두 녹색입니다. 의 배경색은 상속 속성이 없으므로 투명하게 표시됩니다. 스크린샷. <p></p> <p>Finally<strong></strong></p>all에는 CSS 속성이 너무 많이 사용됩니다. 이 CSS 속성을 사용할 시나리오는 아직 생각나지 않습니다. 아니면 특수 요소가 갑자기 일반 요소가 되기를 바라는 경우도 있습니다. 예를 들어 입력 입력 상자 밖에 p가 있고, 입력 {all:inherit;}이 있는 경우도 있는 것 같습니다. 테두리나 배경이 필요하지 않습니다. 패딩이나 여백이 필요하지 않습니다. <p></p> <p class="comments-box-content"></p>

위 내용은 CSS3에서 all 속성의 용도는 무엇입니까? CSS3의 모든 속성 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!