CSS의 상속 사용 분석

이 글은 CSS의 상속 기술에 대한 요약을 주로 소개합니다. CSS의 상속 키워드 사용은 CSS 입문 학습을 위한 기본 지식입니다. 계단식 테이블 기능을 무시합니다. 대부분의 개발자는 상속 키워드를 알고 있지만 여러분이 알지 못할 수도 있는 몇 가지 새로운 CSS3 상속 기능이 있습니다...

　property: 상속;
　 상속 키워드는 "상위 항목에 할당된 모든 값 사용"을 의미합니다. 요소". 상위 요소에 명시적인 값 정의가 없으면 브라우저는 해당 속성을 찾을 때까지 DOM 트리를 검색합니다. 결국 찾을 수 없으면 브라우저의 기본값을 사용합니다. 예:

#myparent   
{   
    margin: 10px;   
    border: 1px solid #000;   
}   
/* use the same border as the parent */
#myparent p   
{   
    border: inherit;   
}

실제로 상속을 사용할 필요는 거의 없습니다. 글꼴, 글꼴 크기, 색상 등과 같은 많은 유용한 속성이 자동으로 상속됩니다.

　 유전염 안심하고 사용하실 수 있습니다. IE6, IE7에서는 지원하지 않더라도 이로 인해 디자인이 깨지지는 않습니다.

　property:initial;
　 아, 새로운 CSS3 키워드네요! initial은 속성을 초기 값으로 설정합니다. 즉, 브라우저의 기본 정의 값(예:

body   
{   
    font-size: 0.5em;   
}   

/* reset paragraphs to 1em */
p   
{   
    font-size: initial;   
}

유용합니까?) 어쩌면 모든 브라우저가 동일한 기본값을 갖도록 보장할 수는 없을 수도 있습니다.

　 합리적인 지원 - Chrome, Firefox, Safari 및 Opera 15+. IE에서는 작동하지 않습니다. 그리고 이것이 치명적인 문제가 될 수 있는 상황을 생각하려고 합니다.

　property: unset;
　이것은 약간 특이한 것입니다. unset을 사용하면 상속 가능한 값이 존재하고 상속된 것처럼 동작합니다. 상속 가능한 값을 찾지 못하면(예: box-shadow와 같은 상속 불가능한 속성인 경우) 브라우저의 기본값을 상속하는 것처럼 동작합니다.

그리고 다시 말하지만 unset이 사용되는 시나리오는 너무 많아서 현재 이를 지원하는 경우가 거의 없습니다.

　all: [ 상속 | 초기 | unset ];
　마지막으로 all은 값이 아닌 속성입니다. 모든 속성에 영향을 미치도록 상속, 초기 또는 설정 해제를 지정할 수 있습니다. 예를 들어 모든 CSS 속성을 브라우저 기본값으로 재설정합니다.

#mywidget   
{   
    all: initial;   
}

제3자 컨트롤을 추가하고 페이지 스타일 충돌을 피하려는 경우 이는 선택 사항일 수 있습니다. 전역 CSS 도메인입니다.

안타깝게도 지금은 브라우저 간 엄격한 일관성을 신뢰할 수 없지만 여전히 유용한 기능입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

CSS 정보 Normalize의 파일 구성

CSS에서 RGB 색상 사용 분석

위 내용은 CSS의 상속 사용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!