Double-Dash CSS 속성은 무엇이며 어떻게 작동합니까?

수수께끼의 이중 대시 CSS 속성 탐색

속성 이름 앞에 이중 대시가 붙은 독특한 CSS 코드를 접했을 수도 있습니다. 이는 일반 CSS 속성이 아니라 CSS3에 도입된 사용자 정의 속성입니다.

사용자 정의 속성 이해

CSS 변수라고도 하는 사용자 정의 속성을 사용하면 값을 정의하고 재사용할 수 있습니다. 스타일시트 전체에 걸쳐. 디자인 요소를 중앙 집중화하여 유연성과 유지 관리 가능성을 지원합니다.

구문 및 사용

사용자 정의 속성은 다음 구문을 사용하여 루트 요소(:root) 내에서 선언됩니다.

:root {
  --property-name: property-value;
}

그런 다음 var() 메서드를 사용하여 모든 요소 내의 사용자 정의 속성 값에 액세스할 수 있습니다. 함수:

#element {
  color: var(--property-name);
}

W3C의 예:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

이 예는 기본 색상과 강조 색상에 대한 사용자 정의 속성을 정의하고 # foo h1 선택기.

참조 및 문서

사용자 정의 속성에 대한 포괄적인 문서는 W3C 사양 페이지를 참조하세요:

https://www.w3.org/TR/css-variables/

위 내용은 Double-Dash CSS 속성은 무엇이며 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!