ﺍﺮﮕﺸﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯼﺎﻤﻧ

---

فهرست مطالب

CSS ﺵﺯﻮﻣﺁ
CSS ﯽﻓﺮﻌﻣ
CSS ﻮﺤﻧ
CSS ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ
CSS ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ ﻩﻮﺤﻧ
CSS ﺕﺍﺮﻈﻧ
CSS ﯼﺎﻫ ﮓﻧﺭ
RGBA ﻭ CSS RGB ﯼﺎﻫ ﮓﻧﺭ
CSS HEX ﯼﺎﻫ ﮓﻧﺭ
CSS HSL ﯼﺎﻫ ﮓﻧﺭ
CSS ﯼﺎﻫ ﻪﻨﯿﻣﺯ ﺲﭘ
CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ
CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﺮﯾﻮﺼﺗ ﺭﺍﺮﮑﺗ
CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﺖﺳﻮﯿﭘ
CSS ﻪﻨﯿﻣﺯ ﺲﭘ ﻒﻔﺨﻣ
CSS ﯼﺎﻫﺯﺮﻣ
CSS ﺯﺮﻣ ﺽﺮﻋ
CSS ﻪﯿﺷﺎﺣ ﮓﻧﺭ
CSS Border Sides
ﺮﺼﺘﺨﻣ ﺕﺎﺼﺘﺨﻣ - CSS ﯼﺎﻫﺯﺮﻣ
CSS Rounded Borders
CSS ﻪﯿﺷﺎﺣ
CSS Margin Collapse
CSS Padding
CSS ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻭ ﺽﺮﻋ ،ﻉﺎﻔﺗﺭﺍ
CSS ﻪﺒﻌﺟ ﻝﺪﻣ
CSS Outline Properties
CSS ﺡﺮﻃ ﺽﺮﻋ
CSS ﺐﻟﺎﻄﻣ ﺱﻮﺋﺭ ﮓﻧﺭ
CSS Outline ﻪﺻﻼﺧ ﯽﮔﮋﯾﻭ
CSS Outline Offset
CSS ﻦﺘﻣ
ﻦﺘﻣ ﺖﻬﺟ ﻭ CSS ﻦﺘﻣ ﺯﺍﺮﺗ
CSS ﻦﺘﻣ ﻦﯿﯾﺰﺗ
CSS ﻦﺘﻣ ﻞﯾﺪﺒﺗ
CSS ﻦﺘﻣ ﻪﻠﺻﺎﻓ ﻭ ﯽﮕﺘﻓﺭﻮﺗ
CSS ﻦﺘﻣ ﻪﯾﺎﺳ
CSS ﯼﺎﻫ ﺖﻧﻮﻓ
CSS ﺏﻭ ﻦﻤﯾﺍ ﯼﺎﻫ ﺖﻧﻮﻓ
CSS ﺖﻧﻮﻓ ﯽﻨﯾﺰﮕﯾﺎﺟ
CSS ﻢﻠﻗ ﮏﺒﺳ
CSS ﻢﻠﻗ ﻩﺯﺍﺪﻧﺍ
ﻞﮔﻮﮔ CSS ﯼﺎﻫ ﺖﻧﻮﻓ
CSS ﯽﻟﺎﻋ ﺖﻧﻮﻓ ﯼﺎﻫﺖﻔﺟ
CSS ﻢﻠﻗ ﻩﺎﺗﻮﮐ ﯽﮔﮋﯾﻭ
CSS ﯼﺎﻫﺩﺎﻤﻧ
CSS ﮏﺒﺳ ﯼﺎﻫﺪﻧﻮﯿﭘ
CSS ﻞﯾﺎﺘﺳﺍ ﯼﺎﻫ ﺖﺴﯿﻟ
CSS ﻞﯾﺎﺘﺳﺍ ﻝﻭﺍﺪﺟ
(ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ) CSS ﻝﻭﺪﺟ ﻩﺯﺍﺪﻧﺍ
CSS ﻝﻭﺪﺟ ﺯﺍﺮﺗ
CSS ﻝﻭﺪﺟ ﮏﺒﺳ
CSS ﻮﮕﺨﺳﺎﭘ ﻝﻭﺪﺟ
ﺮﮕﺸﯾﺎﻤﻧ ﯽﮔﮋﯾﻭ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻭ ﺽﺮﻋ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
ﺖﯿﻌﻗﻮﻣ ﯽﮔﮋﯾﻭ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
z-index ﯽﮔﮋﯾﻭ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
CSS ﺰﯾﺭﺮﺳ
ﻑﺎﻔﺷ ﻭ ﺭﻭﺎﻨﺷ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
ﻦﺷﻭﺭ ﻭ ﺢﺿﺍﻭ - CSS ﻥﺎﻣﺪﯿﭼ
ﺭﻭﺎﻨﺷ ﯼﺎﻫ ﻪﻧﻮﻤﻧ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
ﯽﻄﺧ ﻥﻭﺭﺩ ﮎﻮﻠﺑ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ
ﯼﺩﻮﻤﻋ ﻭ ﯽﻘﻓﺍ ﺯﺍﺮﺗ - CSS ﻥﺎﻣﺪﯿﭼ
CSS Combinators
CSS ﻪﺒﺷ ﯼﺎﻫ ﺱﻼﮐ
CSS ﺮﺻﺎﻨﻋ ﻪﺒﺷ
CSS ﺮﯾﻮﺼﺗ ﺖﯿﻓﺎﻔﺷ/ﺕﺭﻭﺪﮐ
CSS ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
CSS ﯼﺩﻮﻤﻋ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
CSS ﯽﻘﻓﺍ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
CSS ﯼﺎﻫ ﻩﺮﮐﺮﮐ
CSS ﺮﯾﻭﺎﺼﺗ ﯼﺮﻟﺎﮔ
CSS Image Sprites
CSS ﯽﮔﮋﯾﻭ ﺮﮕﺑﺎﺨﺘﻧﺍ
CSS ﯼﺎﻫ ﻡﺮﻓ
CSS ﯼﺎﻫ ﻩﺪﻧﺭﺎﻤﺷ
CSS ﺖﯾﺎﺳ ﺏﻭ ﯼﺪﻨﺑ ﺡﺮﻃ
CSS ﯼﺎﻫﺪﺣﺍﻭ
CSS ﯽﮔﮋﯾﻭ
CSS !important Property
CSS ﯽﺿﺎﯾﺭ ﻊﺑﺍﻮﺗ
CSS Rounded Corners
CSS ﻪﯿﺷﺎﺣ ﺮﯾﻭﺎﺼﺗ
CSS ﺩﺪﻌﺘﻣ ﯼﺎﻫ ﻪﻨﯿﻣﺯ ﺲﭘ
CSS ﯼﺎﻫ ﮓﻧﺭ
CSS ﯽﮕﻧﺭ ﯼﺪﯿﻠﮐ ﺕﺎﻤﻠﮐ
CSS ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ
CSS ﯽﻋﺎﻌﺷ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ
CSS ﯽﻃﻭﺮﺨﻣ ﯼﺎﻫ ﻥﺎﯾﺩﺍﺮﮔ
CSS ﻪﯾﺎﺳ ﯼﺎﻫ ﻩﻮﻠﺟ
CSS ﻪﺒﻌﺟ ﻪﯾﺎﺳ
CSS ﯽﻨﺘﻣ ﯼﺎﻫ ﻩﻮﻠﺟ
CSS ﺏﻭ ﯼﺎﻫ ﺖﻧﻮﻓ
CSS 2D ﺩﻮﺷ ﯽﻣ ﻞﯾﺪﺒﺗ
CSS 3D Transforms
CSS ﻝﺎﻘﺘﻧﺍ
CSS ﯼﺎﻫ ﻦﺸﯿﻤﯿﻧﺍ
CSS ﺭﺍﺰﺑﺍ ﻪﺘﮑﻧ
CSS ﮏﺒﺳ ﺮﯾﻭﺎﺼﺗ
CSS ﺮﯾﻮﺼﺗ ﺏﺎﺗﺯﺎﺑ
CSS ﺐﺳﺎﻨﻣ ﯽﺷ ﯽﮔﮋﯾﻭ
CSS ﯽﺷ ﺖﯿﻌﻗﻮﻣ ﯽﮔﮋﯾﻭ
CSS masking - ﯽﮔﮋﯾﻭ mask-image
CSS ﯼﺎﻫ ﻪﻤﮐﺩ
CSS ﯼﺪﻨﺑ ﻪﺤﻔﺻ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
CSS ﻥﻮﺘﺳ ﺪﻨﭼ
CSS ﯼﺮﺑﺭﺎﮐ ﻂﺑﺍﺭ
.()var ﻊﺑﺎﺗ - CSS ﯼﺎﻫﺮﯿﻐﺘﻣ
CSS ﻩﺪﻧﺭﺍﺩﺯﺎﺑ ﯼﺎﻫﺮﯿﻐﺘﻣ
CSS ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺎﺑ ﺍﺭ ﺎﻫﺮﯿﻐﺘﻣ
CSS ﺶﺳﺮﭘ ﺭﺩ ﺎﻫﺮﯿﻐﺘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑﻪﻧﺎﺳﺭ ﯼﺎﻫﯼﺍ
CSS ﻪﺒﻌﺟ ﻩﺯﺍﺪﻧﺍ
CSS ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ
ﺎﻫﻝﺎﺜﻣ - CSS3 ﯼﺍﻪﻧﺎﺳﺭ ﯼﺎﻫﺶﺳﺮﭘ
CSS Flexbox (ﺮﯾﺬﭘ ﻑﺎﻄﻌﻧﺍ ﻪﺒﻌﺟ)
CSS Flexbox ﺮﻨﯿﺘﻧﺎﮐ
CSS Flexbox ﺩﺭﺍﻮﻣ
CSS Flexbox Responsive
ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯽﻓﺮﻌﻣ
ﺍﺮﮕﺸﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯼﺎﻤﻧ
ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﻪﮑﺒﺷ
ﻮﮕﺨﺳﺎﭘ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫ ﺶﺳﺮﭘ
ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﺮﯾﻭﺎﺼﺗ
ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯼﺎﻫﻮﺋﺪﯾﻭ
ﺍﺮﮔ ﺶﻨﮐﺍﻭ ﺖﯾﺎﺳ ﺏﻭ ﯽﺣﺍﺮﻃ ﯼﺎﻫ ﺏﻮﭼﺭﺎﭼ
CSS ﻪﮑﺒﺷ ﯼﺪﻨﺑ ﺡﺮﻃ
CSS Grid Container
CSS ﻪﮑﺒﺷ ﺩﺭﻮﻣ
CSS ﯼﺎﻫ ﺐﻟﺎﻗ
CSS ﯼﺎﻫ ﻪﻧﻮﻤﻧ
نمایش فهرست مطالب

---

---

Viewport ؟ﺖﺴﯿﭼ

Viewport ﺖﺳﺍ ﺏﻭ ﻪﺤﻔﺻ ﮏﯾ ﺯﺍ ﺮﺑﺭﺎﮐ ﻩﺪﻫﺎﺸﻣ ﻞﺑﺎﻗ ﻪﯿﺣﺎﻧ.

.ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﻪﻧﺎﯾﺍﺭ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﺯﺍ ﺮﺘﮑﭼﻮﮐ ﻩﺍﺮﻤﻫ ﻦﻔﻠﺗ ﺭﺩ ﻭ ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﻩﺎﮕﺘﺳﺩ ﻪﺑ ﻪﺘ

ﺩﻮﺑ ﺞﯾﺍﺭ ﺎﻫ ﻥﺁ ﯼﺍﺮﺑ ﻭ ﺪﻧﺪﺷ ﯽﻣ ﯽﺣﺍﺮﻃ ﺮﺗﻮﯿﭙﻣﺎﮐ ﺶﯾﺎﻤﻧ ﻪﺤﻔﺻ ﯼﺍﺮﺑ ﻂﻘﻓ ﺏﻭ ﺕﺎﺤﻔﺻ ،ﻩﺍﺮ

ﺪﺷ ﺖﺑﺎﺛ ،ﻢﯾﺩﺮﮐ ﻩﺍﺮﻤﻫ ﻦﻔﻠﺗ ﻭ ﺖﻠﺒﺗ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺖﻧﺮﺘﻨﯾﺍ ﺭﺩ ﺭﺍﺬﮔ ﻭ ﺖﺸﮔ ﻪﺑ ﻉﻭﺮﺷ ﻪ

ﻊﯾﺮﺳ ﻞﺣ ﻩﺍﺭ ﮏﯾ ﺎﻣﺍ !!ﺩﻮﺒﻧ ﻞﻣﺎﮐ ﻦﯾﺍ

---

Viewport ﻢﯿﻈﻨﺗ

HTML5 ﯽﻣ ﻩﺯﺎﺟﺍ ﺏﻭ ﻥﺎﺣﺍﺮﻃ ﻪﺑ ﻪﮐ ﺩﺮﮐ ﯽﻓﺮﻌﻣ ﺍﺭ ﯽﺷﻭﺭﻖﯾﺮﻃ ﺯﺍ ﺍﺭ ﺕﺭﻮﭘ ﯼﺎﻤﻧ ﻝﺮﺘﻨ

:ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺩﻮﺧ ﺏﻭ ﺕﺎﺤﻔﺻ ﻡﺎﻤﺗ ﺭﺩ ﺍﺭ ﺮﯾﺯ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ﺪﻫﺩ ﯽﻣ ﻪﺋﺍﺭﺍ ﯽﮕﻧﻮﮕﭼ ﺩﺭﻮﻣ ﺭﺩ ﺍﺭ ﯽﯾﺎﻫ ﻞﻤﻌﻟﺍﺭﻮﺘﺳﺩ ﺮﮔﺭﻭﺮﻣ ﻪﺑ ﻦﯾﺍ

.(ﺖﺳﺍ ﺕﻭﺎﻔﺘﻣ ﻩﺎﮕﺘﺳﺩ ﻪﺑ ﻪﺘﺴﺑ ﻪﮐ) ﺪﻨﮐ ﺖﯿﻌﺒﺗ ﻩﺎﮕﺘﺳﺩ ﻪﺤﻔﺻ ﺽﺮﻋ ﺯﺍ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﯼ

.ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ،ﺩﻮﺷ ﯽﻣ ﯼﺮﯿﮔﺭﺎﺑ ﺮﮔﺭﻭﺮﻣ ﻂﺳﻮﺗ ﺭﺎﺑ ﻦﯿﻟﻭﺍ ﯼﺍﺮﺑ ﻪﺤﻔﺻ ﻪﮐ ﯽﻣﺎﮕﻨﻫ ﺍﺭ ﻪﯿﻟ

:ﺖﺳﺍ ﻩﺪﻣﺁ viewport ﮓﺗ ﺎﺘﻣ ﺎﺑ ﺏﻭ ﻪﺤﻔﺻ ﻥﺎﻤﻫ ﻭ viewport ﮓﺗ ﺎﺘﻣ ﻥﻭﺪﺑ

Without the viewport meta tag

With the viewport meta tag

ﻪﺘﮑﻧ: ﯽﻣ ﺭﻭﺮﻣ ﯽﺣﻮﻟ ﻪﻧﺎﯾﺍﺭ ﺎﯾ ﻦﻔﻠﺗ ﺎﺑ ﺍﺭ ﻪﺤﻔﺻ ﻦﯾﺍ ﺮﮔﺍﯽﻣ ،

---

Viewport ﻪﺑ ﺍﻮﺘﺤﻣ ﻩﺯﺍﺪﻧﺍ

ﺪﻧﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻞﯾﺎﺑﻮﻣ ﻭ ﭖﺎﺘﮑﺳﺩ ﺭﺩ ﺎﻫ ﺖﯾﺎﺳ ﺏﻭ ﯼﺩﻮﻤﻋ ﺶﯾﺎﻤﯿﭘ ﯼﺍﺮﺑ ﻥﺍﺮﺑﺭﺎﮐ

ﺪﻨﯿﺒﺑ ﺍﺭ ﻥﺁ ﺎﺗ ﺪﻨﮐ ﯽﯾﺎﻤﻧﮏﭼﻮﮐ ﺎﯾ ،ﺪﻨﮐ ﻝﻭﺮﮑﺳﺍ ﯽﻘﻓﺍ ﺕﺭﻮﺻ ﻪﺑ ﺩﻮﺷ ﺭﻮﺒﺠﻣ ﺮﺑﺭﺎﮐ

:ﺩﻮﺷ ﺖﯾﺎﻋﺭ ﺪﯾﺎﺑ ﻪﮐ ﯽﻓﺎﺿﺍ ﻦﯿﻧﺍﻮﻗ ﺯﺍ ﯽﺧﺮﺑ

1. ﺪﯿﻨﮑﻧ ﻩﺩﺎﻔﺘﺳﺍ ﮒﺭﺰﺑ ﺖﺑﺎﺛ ﺽﺮﻋ ﺎﺑ ﺮﺻﺎﻨﻋ ﺯﺍ - ﺮﮔﺍ ،ﻝﺎﺜﻣ ﻥﺍﻮﻨﻋ

2. ﺪﻨﮐ ﻪﯿﮑﺗ ﯽﺻﺎﺧ ﺪﯾﺩ ﻩﺎﮔﺭﺩ ﺽﺮﻋ ﻪﺑ ﺍﻮﺘﺤﻣ ﻪﮐ ﺪﯿﻫﺪﻧ ﻩﺯﺎﺟﺍ

3. ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ ﺯﺍ CSS ﻭ ﮏﭼﻮﮐ ﯼﺍﺮﺑ ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﻞﯾﺎﺘﺳﺍ ﻝﺎﻤﻋﺍ ﯼﺍﺮﺑ