CSS ﻪﯿﺷﺎﺣ ﮓﻧﺭ


فهرست مطالب

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


CSS ﻪﯿﺷﺎﺣ ﮓﻧﺭ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻪﯿﺷﺎﺣ ﺭﺎﻬﭼ ﮓﻧﺭ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ class="w3-

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

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

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

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

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

  • ﻑﺎﻔﺷ

ﻪﺟﻮﺗ: ﺮﮔﺍ class="w3-codespan">borde

ﻝﺎﺜﻣ

:ﻪﯿﺷﺎﺣ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﮓﻧﺭ ﺶﯾﺎﻤﻧ

p.one
{
   
border-style: solid;
   
border-color: red;
}

p.two
{
   
border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: 
  blue;
}

:ﻪﺠﯿﺘﻧ

Red border
Green border
Blue border

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

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
} 

p.three {
  border-style: dotted;
  border-color: blue;
} 
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>



ﺹﺎﺧ ﯽﺒﻧﺎﺟ ﯼﺎﻫ ﮓﻧﺭ

ﯼﺍﺮﺑ) ﺭﺍﺪﻘﻣ ﺭﺎﻬﭼ ﺎﺗ ﮏﯾ ﺯﺍ ﺪﻧﺍﻮﺗ ﯽﻣ class="w3-codespa

ﻝﺎﺜﻣ

 p.one {
  border-style: solid;
  border-color: red green blue yellow; 
  /* red top, green right, blue bottom and yellow left */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border):</p>

<p class="one">A solid multicolor border</p>

</body>
</html>




HEX ﺮﯾﺩﺎﻘﻣ

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

ﻝﺎﺜﻣ

 p.one {
  border-style: solid;
  border-color: #ff0000; /* red 
  */
}

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

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

p.two {
  border-style: solid;
  border-color: #0000ff; /* blue */
}

p.three {
  border-style: solid;
  border-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

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

<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>

</body>
</html>



RGB ﺮﯾﺩﺎﻘﻣ

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

ﻝﺎﺜﻣ

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

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

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

p.two {
  border-style: solid;
  border-color: rgb(0, 0, 255); /* blue */
}

p.three {
  border-style: solid;
  border-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

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

<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>

</body>
</html>



HSL ﺮﯾﺩﺎﻘﻣ

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

ﻝﺎﺜﻣ

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

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

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

p.two {
  border-style: solid;
  border-color: hsl(240, 100%, 50%); /* blue */
}

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

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

<p class="one">A solid red border</p>
<p class="two">A solid blue border</p>
<p class="three">A solid grey border</p>

</body>
</html>


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

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024