CSS ﻩﺪﻧﺭﺍﺩﺯﺎﺑ ﯼﺎﻫﺮﯿﻐﺘﻣ

فهرست مطالب

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

ﯽﻠﺤﻣ ﺮﯿﻐﺘﻣ ﺎﺑ ﯽﻧﺎﻬﺟ ﺮﯿﻐﺘﻣ ﻦﺘﻓﺮﮔ ﻩﺪﯾﺩﺎﻧ

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

:ﺪﯿﻨﮐ ﻩﺎﮕﻧ ﻞﺒﻗ ﻪﺤﻔﺻ ﻝﺎﺜﻣ ﻪﺑ

ﻝﺎﺜﻣ

 :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>

.ﺪﻨﻨﮐ ﺮﯿﯿﻐﺗ ﻪﺤﻔﺻ ﺯﺍ ﯽﺻﺎﺧ ﺖﻤﺴﻗ ﺭﺩ ﻂﻘﻓ ﺎﻫﺮﯿﻐﺘﻣ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﺕﺎﻗﻭﺍ ﯽﻫﺎﮔ

ﻢﯿﻧﺍﻮﺗ ﯽﻣ ﺎﻣ ﺲﭙﺳ .ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﺕﻭﺎﻔﺘﻣ ﯽﺑﺁ ﮓﻧﺭ ﯼﺍ ﻪﻤﮐﺩ ﺮﺻﺎﻨﻋ ﯼﺍﺮﺑ ﺪﯿﻨﮐ ﺽﺮﻓ

ﺪﻨﮐ ﯽﻣ ﻪﺒﻠﻏ ﯽﻧﺎﻬﺟ blue-- ﺮﺑ ﯽﻠﺤﻣ blue-- ﺮﯿﻐﺘﻣ ﻪﮐ ﻢﯿﻨﯿﺑ ﯽﻣ

ﻝﺎﺜﻣ

 :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 {
  --blue: #0000ff; /* local variable will 
  override global */
  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 {
  --blue: #0000ff; /* local variable will override global */
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Override Global Variable With Local Variable</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>

ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺪﯾﺪﺟ ﯽﻠﺤﻣ ﺮﯿﻐﺘﻣ ﮏﯾ

:ﻦﯾﺍ ﺪﻨﻧﺎﻣ ،ﻢﯿﻨﮐ ﻡﻼﻋﺍ ﺰﯿﻧ ﺪﯾﺪﺟ ﯽﻠﺤﻣ ﺮﯿﻐﺘﻣ ﮏﯾ ﻢﯿﻧﺍﻮﺗﯽﻣ ،ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﺪﺣﺍﻭ ﻥ

ﻝﺎﺜﻣ

 :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 {
  --button-blue: #0000ff; /* new local 
  variable */
  background-color: var(--white);
  
  color: var(--button-blue);
  border: 1px solid var(--button-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 {
  --button-blue: #0000ff; /* new local variable */
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}
</style>
</head>
<body>

<h1>New Local Variable</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

.()CSS var ﻊﺑﺎﺗ

var()

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