집 > 기사 > 웹 프론트엔드 > CSS3의 새로운 속성은 무엇입니까? 무슨 소용이 있나요?

CSS3의 새로운 속성은 무엇입니까? 무슨 소용이 있나요?

青灯夜游원래의: 2018-11-02 11:47:303515검색

웹 프론트 엔드 개발의 편의를 위해 CSS3에는 많은 새로운 속성(새로운 기능)이 추가되었습니다. 이 글에서는 CSS3의 새로운 속성 all이 무엇인지 소개하여 모든 사람이 all 속성의 역할과 사용법을 이해할 수 있도록 하겠습니다. . 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. [css3에 대해 더 알고 싶다면 영상 학습을 추천합니다: css3 tutorial]

우선 이해해 봅시다 css3 all 속성이 무엇인가요? 무엇을 할 수 있나요?

all 속성은 실제로 모든 CSS 속성의 약어입니다. 즉, 모든 CSS 속성은 어떻게 되어야 하지만 두 CSS 속성 unicode-bidi 및 방향은 포함되지 않습니다. 따라서 all 속성의 역할을 알 수 있어야 합니다.

all 속성: 텍스트 방향을 제어하는 두 가지 속성인 방향 속성과 unicode-bidi 속성을 제외하고 선택한 모든 요소 속성을 재설정할 수 있습니다.

.demo{
  all: unset;
}

구성 요소 수준 스타일 재설정을 허용하는 데 중점을 둡니다. 때로는 원하는 스타일을 처음부터 설정하는 것이 원래 스타일을 수정하는 것보다 훨씬 쉽습니다.

all 속성으로 설정할 수 있는 속성 값을 살펴보겠습니다.

1.initial: 선택한 모든 요소의 속성을 CSS 사양에 정의된 초기 값으로 재설정합니다.

2. 상속: 선택한 요소는 일반적으로 상속할 수 없는 스타일을 포함하여 모든 상위 요소의 스타일을 상속합니다.

3. 설정 해제: 선택한 요소는 상위 요소에서 전달된 상속 가능한 값을 상속합니다. 상속 가능한 값이 없으면 CSS 사양의 초기 값이 각 속성에 사용됩니다.

참고:

CSS의 일부 속성은 사양에서 초기 값을 명확하게 정의하지 않지만 색상, 글꼴 모음과 같은 초기 값을 사용자가 직접 설정할 수 있도록 허용합니다.

all은 단일 선언을 사용하여 모든 CSS 속성의 값을 한 번에 제어할 수 있기 때문에 단축 속성입니다. 그러나 대부분의 단축 속성과 달리 실용적인 "긴 단축" 버전이나 하위 속성이 없습니다.

all의 데모 효과를 살펴보겠습니다.

html 코드:

<div class="container">
	<div class="parent">
		<div class="alltest">
			<p>Change this div&#39;s <code>all</code> value.</p>
		</div>
	</div>
</div>

css 코드:

.container {/* 继承 */
  font-family: sans-serif;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

.parent {
  color: green;/* 继承*/
  
  /* 不继承 */
  background-color: gainsboro;
  width: 80%;
  padding: 1em;
  border: 5px solid #E18728;
}

렌더링(all 속성을 사용하지 않음):

CSS3의 새로운 속성은 무엇입니까? 무슨 소용이 있나요?