CSS의 초기, 상속, 설정 해제, 되돌리기 키워드 및 모든 속성을 이해합니다.

CSS에는 이론적으로 모든 CSS 속성에 적용할 수 있는 4가지 키워드가 있는데, 이들은 초기(initial), 상속(inherited), unset(설정되지 않음), revert(복원)입니다. all의 값은 위의 4개 키워드만 가능합니다. 이 글에서는 초기, 상속, 설정 해제, 되돌리기 등을 모두 소개합니다.

initial

은 요소 속성의 초기 기본값을 나타냅니다. (기본값은 공식 CSS 사양에 의해 정의됩니다.)

호환성: IE는

을 지원하지 않습니다.[참고] 각 속성의 초기 기본값은 다음과 같습니다. 여기로 이동

//display在官方CSS规范中定义的默认值是inline
<style>
.test{display: initial;}
</style>
<div class="box">
    <div class="test">测试一</div><span>文字</span>
    <br>
    <div >测试二</div><span>文字</span>
</div>

inherit

요소의 직접 상위 요소에 해당하는 속성의 계산된 값을 나타냅니다.

호환성: IE7-지원되지 않음

<style>
.box{
    border: 1px solid black;
    padding: 10px;
    width: 100px;
}
.test{
    border: inherit;
    height: 30px;
}
</style>
<div class="box">
    <div class="test">测试一</div>
</div>
<div class="box">
    <div class="in">
        <div class="test">测试二</div>        
    </div>
</div>

unset

친척 설정 해제 초기 및 상속은 조금 더 복잡합니다. 속성이 기본적으로 상속 가능하면 값이 상속됨을 나타냅니다. 그렇지 않으면 값은 초기입니다. 사실 unset을 설정하는 것은 설정하지 않는 것과 같습니다

호환성: IE는 지원하지 않고, safari9는 지원하지 않고, ios9.2는 지원하지 않고, android4.4.4는 지원하지 않습니다

【일반적으로 사용되는 기본 상속 가능 스타일 】

color
cursor
direction
font
letter-spacing
line-height
list-style
text-align
text-indent
text-shadow
text-transform
white-space
word-break
word-spacing
word-wrap
writing-mode

//内容为测试一的元素和内容为测试二的元素的样式是一样的
<style>
.box{
    border: 1px solid black;
    padding: 10px;
    width: 100px;
    color: red;
}
.test1{
    border: unset;
    color: unset;
}
</style>
<div class="box">
    <div class="test">测试一</div>
    <div>测试二</div>
</div>

revert

은 스타일 시트에 정의된 요소 속성의 기본값을 나타냅니다. 사용자 정의 스타일 시트에 명시적으로 설정된 경우 이 설정을 따르세요. 그렇지 않으면 브라우저 정의 스타일 시트에 있는 스타일 설정을 따릅니다. 그렇지 않으면 설정 해제와 동일합니다.

호환성: safari9.1+ 및 ios9에서만 지원됩니다. 3+

all

은 unicode-bidi 및 방향을 제외한 모든 CSS 속성의 속성 값을 재설정한다는 의미입니다. 값은 초기, 상속, 설정 해제 및 되돌리기만 가능합니다.

호환성: IE는 지원하지 않습니다. it, safari9-no 지원, ios9.2-지원 안함, android4.4-지원 안함

<style>
.test{
    border: 1px solid black;
    padding: 20px;
    color: red;
}
.in{
/*  all: initial;
    all: inherit;
    all: unset;
    all: revert; */
}
</style>
<div class="test">
    <div class="in">测试文字</div>            
</div>

【1】all:initial일 때 .in의 모든 속성은 기본값을 사용합니다

border:none;padding:0;color:black;

【2】all:inherit일 때 , .in .in의 모든 속성은 상위 요소의 상속된 값을 갖습니다

border:1px solid black;padding:20px;color:red;

[3] all:unset일 때 .in의 모든 속성은 값을 설정하지 않는 것과 동일합니다. 기본값은 상속 가능이며 비- 상속 가능한 항목은 기본값을 유지합니다

border:none;padding:0;color:red;

이 기사는 다음에서 복제됩니다: https://www.cnblogs.com/xiaohuochai/p/5464456.html

권장 학습: css 빠른 시작

위 내용은 CSS의 초기, 상속, 설정 해제, 되돌리기 키워드 및 모든 속성을 이해합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!