.()var ﻊﺑﺎﺗ - CSS ﯼﺎﻫﺮﯿﻐﺘﻣ

فهرست مطالب

    نمایش فهرست مطالب

CSS ﯼﺎﻫﺮﯿﻐﺘﻣ

ﮏﯾ ﺭﺍﺪﻘﻣ ﺝﺭﺩ ﯼﺍﺮﺑ var() ﻊﺑﺎﺗ

ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﺎﻤﺷ ﻪﮐ ﯽﻨﻌﻣ ﻦﯾﺍ ﻪﺑ ،ﺪﻧﺭﺍﺩ ﯽﺳﺮﺘﺳﺩ DOM ﻪﺑ CSS ﯼﺎﻫﺮﯿﻐﺘﻣ

ﺩﻮﺷ ﯽﻣ ﺎﻤﺷ ﯼﺎﻫ ﮓﻧﺭ ﺯﺍ ﺖﺒﺤﺻ ﻪﮐ ﺖﺳﺍ ﯽﻧﺎﻣﺯ 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;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>The Traditional Way</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

var() ﻊﺑﺎﺗ ﻮﺤﻧ

ﮏﯾ ﺭﺍﺪﻘﻣ ﺝﺭﺩ ﯼﺍﺮﺑ var() ﻊﺑﺎﺗ

:ﺖﺳﺍ ﺮﯾﺯ ﺡﺮﺷ ﻪﺑ var() ﻊﺑﺎﺗ ﻮﺤﻧ

 var(--name, value)
name

ﺩﻮﺷ ﻉﻭﺮﺷ ﻭﺩ ﺎﺑ ﺪﯾﺎﺑ) ﺮﯿﻐﺘﻣ ﻡﺎﻧ .ﯼﺭﻭﺮﺿ

value

(ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺪﺸﻧ ﺍﺪﯿﭘ ﺮﯿﻐﺘﻣ ﺮﮔﺍ) ﯽﺘﺸﮔﺯﺎﺑ ﺭﺍﺪﻘﻣ .ﯼﺭﺎﯿﺘﺧﺍ

ﻪﺟﻮﺗ: ﺖﺳﺍ ﺱﺎﺴﺣ ﮒﺭﺰﺑ ﻭ ﮏﭼﻮﮐ ﻑﻭﺮﺣ ﻪﺑ ﻭ ﺩﻮﺷ ﻉﻭﺮﺷ (--) ﻩﺮﯿﺗ ﻂﺧ ﻭﺩ

var() ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﻪﻧﻮﮕﭼ

.ﺪﻨﺷﺎﺑ ﻪﺘﺷﺍﺩ ﯽﻠﺤﻣ ﺎﯾ ﯽﻧﺎﻬﺟ ﻪﻨﻣﺍﺩ ﺪﻨﻧﺍﻮﺗ ﯽﻣ CSS ﯼﺎﻫﺮﯿﻐﺘﻣ :ﻪﻤﻫ ﺯﺍ ﻝﻭﺍ

ﻪﮐ ﯽﻟﺎﺣ ﺭﺩ ،ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ/ﯽﺳﺮﺘﺳﺩ ﺪﻨﺳ ﻞﮐ ﻖﯾﺮﻃ ﺯﺍ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﯼﺮﺳﺍﺮﺳ ﯼﺎﻫﺮﯿﻐﺘﻣ

.ﺪﯿﻨﮐ ﻡﻼﻋﺍ :root ﺭﺩ ﺍﺭ ﻥﺁ ،ﯽﻧﺎﻬﺟ ﻪﻨﻣﺍﺩ ﺎﺑ ﺮﯿﻐ

.ﺪﯿﻨﮐ ﻡﻼﻋﺍ ،ﺪﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺁ ﺯﺍ ﺖﺳﺍ ﺭﺍﺮﻗ ﻪﮐ ﯼﺮﮕﺑﺎﺨﺘﻧﺍ ﺭﺩ ﺍﺭ ﻥﺁ ،ﯽﻠﺤﻣ ﻩﺩﻭﺪﺤﻣ ﺎﺑ ﺮ

.ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ 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;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

:ﺯﺍ ﺪﻨﺗﺭﺎﺒﻋ 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;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
: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;
}
</style>
</head>
<body>

<h1>Using the var() Function</h1>

<div class="container">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>
    <button>Yes</button>
    <button>No</button>
  </p>
</div>

</body>
</html>

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻥﺁ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ ﺭﺩ

Function
var() 49.0 15.0 31.0 9.1 36.0

var() CSS> ﻊﺑﺎﺗ

var()

ﺪﻨﮐ ﯽﻣ ﺝﺭﺩ ﺍﺭ CSS ﺮﯿﻐﺘﻣ ﮏﯾ ﺭﺍﺪﻘﻣ