집 > 기사 > 웹 프론트엔드 > CSS에서 변수를 사용할 수 있나요?

CSS에서 변수를 사용할 수 있나요?

css는 변수를 사용할 수 있습니다. CSS에서 변수는 문서 전체에서 재사용할 특정 값을 포함하는 CSS 작성자가 정의한 엔터티입니다. 사용자 정의 속성을 사용하여 변수 이름을 설정하고 var() 함수를 사용하여 이를 읽습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

CSS 변수에는 현재 두 가지 형식이 있습니다.

변수는 법적 식별자와 합법적인 값을 갖습니다. 어디서나 사용할 수 있습니다. var() 함수를 사용하여 변수를 사용할 수 있습니다. 예를 들어 var(--example-variable)은 --example-variable
custom 속성에 해당하는 값을 반환합니다. 이러한 속성은 이름으로 --*where*라는 특수 형식을 사용합니다. 예를 들어 --example-variable: 20px도 CSS 선언문입니다. --example-varibale 변수에 20px을 할당하는 것을 의미합니다.

CSS 변수를 사용할 때 알아야 할 세 가지 주요 사항

1. 우리는 재사용 속성을 커스텀 속성으로 정의할 수 있으므로 나중에 수정해야 할 경우 커스텀 속성에서 속성값만 수정하면 됩니다.

:root {
　　--textColor: #444;
}

위 코드는 커스텀 속성으로 작성할 때, 사용자 정의 속성은 --

3. var() 함수

로 시작한다는 점에 유의해야 합니다. 변수를 읽으려면 var() 함수를 사용해야 합니다. 그렇지 않으면 브라우저는 사용자 정의 속성이 무엇인지 알 수 없습니다.

var() 함수는 속성의 기본값을 나타내는 두 번째 속성을 지정할 수도 있습니다.

p {
　　color: var(--textColor);
}

p 태그의 글꼴 색상을 설정하려면 위 코드와 같이 작성하면 됩니다.

동일합니다. as

This

p { color: #444; }

3. 루트 의사 클래스

루트 의사 클래스에 대해 이야기하기 전에 먼저 CSS 사용자 정의 속성의 범위 문제에 대해 이야기해야 합니다.

동일한 CSS 사용자 정의 속성을 여러 개로 선언하고 읽을 수 있습니다. selectors , 우선 순위가 가장 높은 속성이 적용됩니다.

body {
　　--bgColor: red;
}
.content {
　　--textColor: blue;
}

위 코드에서 -bgColor의 범위는 body이고, --textColor의 범위는 .content이므로 custom 속성을 넣는 것이 가장 좋습니다. 루트 요소: 루트 내부에서는 모든 선택자가 읽을 수 있도록 보장합니다.

(비디오 공유 학습:

css 비디오 튜토리얼

)

위 내용은 CSS에서 변수를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：