CSS ﺐﻟﺎﻄﻣ ﺱﻮﺋﺭ ﮓﻧﺭ

فهرست مطالب

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

CSS ﺐﻟﺎﻄﻣ ﺱﻮﺋﺭ ﮓﻧﺭ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻠﮐ ﺡﺮﻃ ﮓﻧﺭ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ outline-color

:ﺩﺮﮐ ﻢﯿﻈﻨﺗ ﺮﯾﺯ ﺩﺭﺍﻮﻣ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﮓﻧﺭ

  • ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ "ﺰﻣﺮﻗ" ﺪﻨﻧﺎﻣ ﯽﮕﻧﺭ ﻡﺎﻧ - ﻡﺎﻧ

  • HEX - ﺪﻨﻧﺎﻣ ،ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﺰﮕﻫ ﺭﺍﺪﻘﻣ ﮏﯾ "#ff0000"

  • RGB - ﺭﺍﺪﻘﻣ ﮏﯾ RGB ﺪﻨﻧﺎﻣ ،ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ "rgb(255,0,0)"

  • HSL - ﺭﺍﺪﻘﻣ ﮏﯾ HSL ﺪﻨﻧﺎﻣ ،ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ "hsl(0, 100%, 50%)

  • (ﺖﺳﺍ ﻩﺪﻫﺎﺸﻣ ﻞﺑﺎﻗ ﮓﻧﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﻦﺘﻓﺮﮔ ﺮﻈﻧ ﺭﺩ ﻥﻭﺪﺑ ﯽﻠﮐ ﺡﺮﻃ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻦﯿﻤﻀﺗ ﻪﮐ) ﺪﻫ

.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﮓﻧﺭ ﺎﺑ ﯽﻠﮐ ﺡﺮﻃ ﺪﻨﭼ ﺮﯾﺯ ﻝﺎﺜﻣ

A solid red outline.

A dotted blue outline.

An outset grey outline.

ﻝﺎﺜﻣ

p.ex1
{
    border: 2px solid black;	outline-style: solid;
  outline-color: red;
}
p.ex2
{
  border: 2px solid black;	outline-style: dotted;
   
outline-color: blue;
}
p.ex3
{
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>

</body>
</html>

HEX ﺮﯾﺩﺎﻘﻣ

:ﺩﺮﮐ ﺺﺨﺸﻣ ﺰﯿﻧ (HEX) ﻝﺎﻤﯿﺳﺩ ﺍﺰﮕﻫ ﺭﺍﺪﻘﻣ ﮏﯾ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﯽﻠﮐ ﺡﺮﻃ ﮓﻧﺭ

ﻝﺎﺜﻣ

 p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; 
  /* red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: #0000ff; /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

RGB ﺮﯾﺩﺎﻘﻣ

:RGB ﺮﯾﺩﺎﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺎﯾ

ﻝﺎﺜﻣ

 p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* 
  red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: rgb(0, 0, 255); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using RGB values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

HSL ﺮﯾﺩﺎﻘﻣ

:ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ HSL ﺮﯾﺩﺎﻘﻣ ﺯﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ

ﻝﺎﺜﻣ

 p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); 
  /* red */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: hsl(240, 100%, 50%); /* blue */
}

p.ex3 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using HSL values:</p>

<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">A solid grey outline.</p>

</body>
</html>

.ﺪﯿﻨﮐ ﺐﺴﮐ ﯼﺮﺘﺸﯿﺑ ﺕﺎﻋﻼﻃﺍ HSL ﻭ HEX، RGB ﺮﯾﺩﺎﻘﻣ ﻩﺭﺎﺑﺭﺩ CSS Colors ﯼﺎﻫﻞﺼﻓ ﺭﺩ