CSS에는 이론적으로 모든 CSS 속성에 적용할 수 있는 4가지 키워드가 있는데, 이들은 초기(initial), 상속(inherited), unset(설정되지 않음), revert(복원)입니다. all의 값은 위의 4개 키워드만 가능합니다. 이 글에서는 초기, 상속, 설정 해제, 되돌리기 등을 모두 소개합니다.
은 요소 속성의 초기 기본값을 나타냅니다. (기본값은 공식 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>
요소의 직접 상위 요소에 해당하는 속성의 계산된 값을 나타냅니다.
호환성: 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을 설정하는 것은 설정하지 않는 것과 같습니다
호환성: 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>
은 스타일 시트에 정의된 요소 속성의 기본값을 나타냅니다. 사용자 정의 스타일 시트에 명시적으로 설정된 경우 이 설정을 따르세요. 그렇지 않으면 브라우저 정의 스타일 시트에 있는 스타일 설정을 따릅니다. 그렇지 않으면 설정 해제와 동일합니다.
호환성: safari9.1+ 및 ios9에서만 지원됩니다. 3+
은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!