CSS వేరియబుల్స్

CSS వేరియబుల్స్

వారీ() ఫంక్షన్ సిఎస్ఎస్ వేరీవుల విలువలను ప్రవేశపెట్టడానికి ఉపయోగించబడుతుంది.

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

పాత పద్ధతి

ఈ ఉదాహరణలో, స్టైల్ షేట్లో కొన్ని రంగులను నిర్వచించడానికి పాత పద్ధతిని చూపిస్తుంది (ప్రతి ప్రత్యేక ఎలమెంట్కు ఉపయోగించబడే రంగును నిర్వచించడం ద్వారా):

ఇన్స్టాన్స్

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

亲自试一试

వారీ() ఫంక్షన్ యొక్క సింథెక్సిస్

వారీ() ఫంక్షన్ సిఎస్ఎస్ వేరీవుల విలువలను ప్రవేశపెట్టడానికి ఉపయోగించబడుతుంది.

వారీ() ఫంక్షన్ యొక్క సింథెక్సిస్ ఈ కింద ఉంది:

var(name, value)
విలువ వివరణ
name అవసరం. వారీ పేరు (రెండు దిగువన తిరిగి పరిగణనలోకి వస్తాయి).
value వికల్పం: (వారీని కనుగొనలేకపోయినప్పుడు ఉపయోగించబడుతుంది).

ప్రకటనలు:వారీ పేరులు రెండు దిగువన తిరిగి పరిగణనలోకి వస్తాయి, మరియు క్షీణమైన రూపంలో ఉంటాయి!

వారీ() ఎలా పని చేస్తుంది

మొదటిగా: CSS వేరీవులు సార్వత్రిక లేదా స్థానిక పరిధి కలిగి ఉంటాయి.

సార్వత్రిక వేరీవులు మొత్తం డాక్యుమెంట్లో పరిగణనలోకి వస్తాయి/ఉపయోగించబడతాయి, కానీ స్థానిక వేరీవులు మాత్రమే వాటిని నిర్వచించిన సెలెక్టర్లో ఉపయోగించబడతాయి.

సార్వత్రిక వేరీవులను సృష్టించడానికి, :root సెలెక్టర్లో వాటిని నిర్వచించండి. :root సెలెక్టర్ డాక్యుమెంట్ రూట్ ఎలమెంట్ను మేచేస్తుంది.

స్థానిక వేరీవులను సృష్టించడానికి, వాటిని ఉపయోగించబోయే సెలెక్టర్లో వాటిని నిర్వచించండి.

ఈ ఉదాహరణ పైని ఉదాహరణతో సమానం, కానీ ఇక్కడ మేము var() ఫంక్షన్ ను వినియోగిస్తున్నాము.

మొదటిగా, మేము రెండు సార్వత్రిక వేరీవులు (--blue మరియు --white) నిర్వచిస్తాము. ఈ తర్వాత, మేము var() ఫంక్షన్ ను వినియోగించి స్టైల్ షేట్లో వేరీవుల విలువలను ప్రవేశపెట్టగలం:

ఇన్స్టాన్స్

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

亲自试一试

var() ఉపయోగించడంలో ప్రయోజనాలు కనిపిస్తాయి:

  • కోడ్ నిలకడగా చదవడానికి సులభం చేస్తుంది (తెలుసుకోవడానికి సులభం)
  • రంగు విలువలను మార్చడానికి సులభం చేస్తుంది

నీలి మరియు తెలుపు రంగులను మరింత హార్మోనియస్ రంగులుగా మార్చడానికి, మీరు రెండు వేరీవుల విలువలను మార్చవలసివుంది:

ఇన్స్టాన్స్

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

亲自试一试

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

ఫంక్షన్
var() 49.0 15.0 31.0 9.1 36.0

CSS var() ఫంక్షన్

ఫంక్షన్ వివరణ
var() CSS వేరియబుల్ విలువలను ప్రవేశపెట్టుము.