CSS ﯼﺎﻫ ﮓﻧﺭ

فهرست مطالب

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

.ﺪﻧﻮﺷ ﯽﻣ ﺺﺨﺸﻣ RGB، HEX، HSL، RGBA، HSLA ﺮﯾﺩﺎﻘﻣ ﺎﯾ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﺶﯿﭘ ﺯﺍ ﯽﮕﻧﺭ ﯼﺎﻫ ﻡﺎ

CSS ﯼﺎﻫ ﮓﻧﺭ ﻡﺎﻧ

:ﺩﺮﮐ ﺺﺨﺸﻣ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﺶﯿﭘ ﺯﺍ ﮓﻧﺭ ﻡﺎﻧ ﮏﯾ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﮓﻧﺭ ﮏﯾ ،CSS ﺭﺩ

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

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

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

CSS/HTML ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﺩﺭﺍﺪﻧﺎﺘﺳﺍ ﮓﻧﺭ ﻡﺎﻧ 140 ﺯﺍ.

CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ HTML ﺮﺻﺎﻨﻋ ﯼﺍﺮﺑ ﺍﺭ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ﻝﺎﺜﻣ

 <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem 
  ipsum...</p>

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

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

CSS ﻦﺘﻣ ﮓﻧﺭ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﻦﺘﻣ ﮓﻧﺭ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ﻝﺎﺜﻣ

 <h1 style="color:Tomato;">Hello 
  World</h1>
<p style="color:DodgerBlue;">Lorem 
  ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi 
  enim...</p>

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

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

CSS ﻪﯿﺷﺎﺣ ﮓﻧﺭ

:ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺎﻫ ﻪﯿﺷﺎﺣ ﮓﻧﺭ ﺪﯿﻧﺍﻮﺗ ﯽﻣ

Hello World

Hello World

Hello World

ﻝﺎﺜﻣ

 <h1 style="border:2px 
  solid Tomato;">Hello 
  World</h1>
<h1 style="border:2px 
  solid DodgerBlue;">Hello 
  World</h1>
<h1 style="border:2px 
  solid Violet;">Hello 
  World</h1>

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

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

CSS ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ

ﺩﺮﮐ ﺺﺨﺸﻣ ﺰﯿﻧ HEX، HSL ﺮﯾﺩﺎﻘﻣ ،RGB ﺮﯾﺩﺎﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺎﻫ ﮓﻧﺭ ،CSS

:"ﯽﮕﻧﺮﻓ ﻪﺟﻮﮔ" ﮓﻧﺭ ﻡﺎﻧ ﻥﺎﻤﻫ

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

:ﻑﺎﻔﺷ ٪50 ﺎﻣﺍ ،"ﯽﮕﻧﺮﻓ ﻪﺟﻮﮔ" ﮓﻧﺭ ﻡﺎﻧ ﻥﺎﻤﻫ

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

ﻝﺎﺜﻣ

 <h1 style="background-color:rgb(255, 
  99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 
  100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 
  99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 
  100%, 64%, 0.5);">...</h1>

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

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

ﺪﯿﻧﺍﺪﺑ ﺮﺘﺸﯿﺑ ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ ﻩﺭﺎﺑﺭﺩ

.ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ HSL ﻭ RGB، HEX ﺎﺑ ﺮﺘﺸﯿﺑ ﯼﺪﻌﺑ ﯼﺎﻫ ﻞﺼﻓ ﺭﺩ