CSS var() ਫੰਕਸਨ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

CSS ਦਾ var() ਫੰਕਸਨ ਸੀਐੱਸਐੱਸ ਵੈਰੀਅੱਬਲ ਦੇ ਮੁੱਲ ਪ੍ਰਵੇਸ਼ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ。

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਪਹਿਲਾਂ, --main-bg-color ਨਾਮ ਦਾ ਇੱਕ ਗਲੋਬਲ ਵੈਰੀਅੱਬਲ ਘੋਸ਼ਿਤ ਕਰੋ, ਫਿਰ ਸਟਾਈਲ ਸ਼ੇਅਰ ਵਿੱਚ ਇਸ ਦਾ ਵਰਤੋਂ ਕਰੋ var() ਫੰਕਸਨ ਵਿੱਚ ਇਸ ਵੈਰੀਅੱਬਲ ਦਾ ਮੁੱਲ ਪ੍ਰਵੇਸ਼ ਕਰਨਾ:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

ਖੁਦ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਦੂਜੇ ਵਰਤੋਂ var() ਫੰਕਸਨ ਵਿੱਚ ਕਈ ਸੀਐੱਸਐੱਸ ਵੈਰੀਅੱਬਲ ਮੁੱਲ ਪ੍ਰਵੇਸ਼ ਦੇ ਉਦਾਹਰਣ:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

ਖੁਦ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰੈਮੈਟਿਕਸ

var(--name, value)

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਚੈੱਕਸ ਵਿੱਚ ਦਿਸਦੇ ਸੰਖਿਆਵਾਂ ਪਹਿਲੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਫੰਕਸਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹਨ。

ਸਬੰਧਤ ਪੰਨੇ

ਟੂਰੀਅਲ:CSS ਵਰਗ