.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ ﻩﺪﺷ ﺺﺨﺸﻣ ﯼﺎﻫ ﺶﺨﺑ ﻪﺑ ﻥﺩﺍﺩ ﻞﯾﺎﺘﺳﺍ ﯼﺍﺮﺑ CSS ﺮﺼﻨﻋ ﻪﺒﺷ ﮏ
:ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺯ ﺩﺭﺍﻮﻣ ﯼﺍﺮﺑ ﻥﺁ ﺯﺍ ﻥﺍﻮﺗ ﯽﻣ ،ﻝﺎﺜﻣ ﻥﺍﻮﻨﻋ ﻪﺑ
ﺪﯿﻨﮐ ﻞﯾﺎﺘﺳﺍ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻂﺧ ﺎﯾ ﻑﺮﺣ ﻦﯿﻟﻭﺍ
ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﻮﺘﺤﻣ ﺯﺍ ﺪﻌﺑ ﺎﯾ ﻞﺒﻗ ﺍﻮﺘﺤﻣ ﺝﺭﺩ
:ﻪﺒﺷ ﺮﺻﺎﻨﻋ ﻮﺤﻧ
selector::pseudo-element {
property: value;
}ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺹﺎﺧ ﮏﺒﺳ ﮏﯾ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ ﺪﻨﮐ ﯽﻣ ﯼﺪﻨﺑ ﺐﻟﺎﻗ <p> ﻪﻤﻫ ﺭﺩ ﺍﺭ ﻦﺘﻣ ﻝﻭﺍ ﻂﺧ ﺮﯾﺯ ﻝﺎﺜﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﻪﺟﻮﺗ: ﺮﺼﻨﻋ ﻪﺒﺷ ﺩﻮﺷ ﯽﻣ ﻝﺎﻤﻋﺍ ﺖﻧﻮﻓ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﮓﻧﺭ ﺹﺍﻮﺧ ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺕﺎﻤﻠﮐ ﻪﻠﺻﺎﻓ ﻑﻭﺮﺣ ﻦﯿﺑ ﻪﻠﺻﺎﻓ ﻦﯿﯾﺰﺗ-ﻦﺘﻣ ﯼﺩﻮﻤﻋ ﺯﺍﺮﺗ ﻦﺘﻣ ﻞﯾﺪﺒﺗ ﻂﺧ ﻉﺎﻔﺗﺭﺍ ﻦﺷﻭﺭ ﺪﯿﻨﮐ ﻪﺟﻮﺗ ﯼﺍ ﻪﻄﻘﻧ ﻭﺩ ﺩﺎﻤﻧ ﻪﺑ - .ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯽﻟﻭﺍ ﻪﺑ ﺹﺎﺧ ﮏﺒﺳ ﮏﯾ ﻥﺩﻭﺰﻓﺍ ﯼﺍﺮﺑ ﺪﻨﮐ ﯽﻣ ﺖﻣﺮﻓ <p> ﻪﻤﻫ ﺭﺩ ﺍﺭ ﻦﺘﻣ ﻝﻭﺍ ﻑﺮﺣ ﺮﯾﺯ ﻝﺎﺜﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﻪﺟﻮﺗ: ﺮﺼﻨﻋ ﻪﺒﺷ :ﺩﻮﺷ ﯽﻣ ﻝﺎﻤﻋﺍ ﻪﺒﺷ ﻝﻭﺍ ﻑﺮﺣ :: ﺮﺼﻨﻋ ﯼﺍﺮﺑ ﺮﯾﺯ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺖﻧﻮﻓ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﮓﻧﺭ ﺹﺍﻮﺧ ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻪﯿﺷﺎﺣ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﯽﮑﺘﺸﻟﺎﺑ ﺹﺍﻮﺧ ﯼﺯﺮﻣ ﺹﺍﻮﺧ ﻦﯿﯾﺰﺗ-ﻦﺘﻣ (ﺪﺷﺎﺑ "ﭻﯿﻫ" "float" ﺮﮔﺍ ﻂﻘﻓ) ﻥﺩﺮﮐ ﺯﺍﺮﺗ-ﯼﺩﻮﻤﻋ ﻦﺘﻣ ﻞﯾﺪﺒﺗ ﻂﺧ ﻉﺎﻔﺗﺭﺍ ﺭﻭﺎﻨﺷ ﻦﺷﻭﺭ :ﺩﺮﮐ ﺐﯿﮐﺮﺗ HTML ﯼﺎﻫ ﺱﻼﮐ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﺒﺷ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﺭﺩ ،"class="intro ﺎﺑ ﺍﺭ ﺎﻫ ﻑﺍﺮﮔﺍﺭﺎﭘ ﻝﻭﺍ ﻑﺮﺣ ﻻﺎﺑ ﻝﺎﺜﻣ .ﺩﺮﮐ ﺐﯿﮐﺮﺗ ﻢﻫ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺰﯿﻧ ﺍﺭ ﺮﺼﻨﻋ ﻪﺒﺷ ﻦﯾﺪﻨﭼ ﺩﻮﺑ ﺪﻫﺍﻮﺧ in ،ﺰﻣﺮﻗ ﻑﺍﺮﮔﺍﺭﺎﭘ ﮏﯾ ﻝﻭﺍ ﻑﺮﺣ ،ﺮﯾﺯ ﻝﺎﺜﻣ ﺭﺩ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ .ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﻮﺘﺤﻣ ﺯﺍ ﻞﺒﻗ ﺍﻮﺘﺤﻣ ﯽﺧﺮﺑ ﺝﺭﺩ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ :ﺪﻨﮐ ﯽﻣ ﺝﺭﺩ <h1> ﺮﺼﻨﻋ ﺮﻫ ﯼﺍﻮﺘﺤﻣ ﺯﺍ ﻞﺒﻗ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ .ﺩﺮﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﻮﺘﺤﻣ ﺯﺍ ﺲﭘ ﺎﻫﺍﻮﺘﺤﻣ ﺯﺍ ﯽﺧﺮﺑ ﺝﺭﺩ ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ :ﺪﻨﮐ ﯽﻣ ﺝﺭﺩ <h1> ﺮﺼﻨﻋ ﺮﻫ ﯼﺍﻮﺘﺤﻣ ﺯﺍ ﺪﻌﺑ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﻨﮐ ﯽﻣ ﮏﺒﺳ ﺍﺭ ﺖﺴﯿﻟ ﯼﺎﻫ ﻢﺘﯾﺁ ﯼﺎﻫﺮﮕﻧﺎﺸﻧ ﺮﯾﺯ ﻝﺎﺜﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﺩﺭﺍﺩ ﺖﻘﺑﺎﻄﻣ ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ ﯽﺸﺨﺑ ﺎﺑ :ﺩﺮﮐ ﻝﺎﻤﻋﺍ :ﺪﻨﮐ ﯽﻣ ﺰﻣﺮﻗ ﺩﺭﺯ ﻪﻨﯿﻣﺯ ﺲﭘ ﯼﻭﺭ ﺍﺭ ﻩﺪﺷ ﺏﺎﺨﺘﻧﺍ ﻦﺘﻣ ﺮﯾﺯ ﻝﺎﺜﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﯿﻨﮐ ﺝﺭﺩ ﯼﺰﯿﭼ <p> ﺮﺼﻨﻋ ﺮﻫ ﯼﺍﻮﺘﺤﻣ ﺯﺍ ﺪﻌﺑ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﯿﻨﮐ ﺩﺭﺍﻭ ﺍﺭ ﯼﺰﯿﭼ <p> ﺮﺼﻨﻋ ﺮﻫ ﯼﺍﻮﺘﺤﻣ ﺯﺍ ﻞﺒﻗ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﻭﺍ ﻑﺮﺣ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﻭﺍ ﻂﺧ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺖﺳﺮﻬﻓ ﺩﺭﺍﻮﻣ ﯼﺎﻫﺮﮕﻧﺎﺸﻧ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺖﺳﺍ ﻩﺪﺷ ﺏﺎﺨﺘﻧﺍ ﺮﺑﺭﺎﮐ ﻂﺳﻮﺗ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺯﺍ ﯽﺸﺨﺑ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻝﺎﻌﻓ ﮏﻨﯿﻟ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻩﺩﺯ ﺖﻣﻼﻋ <ﯼﺩﻭﺭﻭ> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻝﺎﻌﻓﺮﯿﻏ <ﯼﺩﻭﺭﻭ> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺩﺭﺍﺪﻧ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻝﺎﻌﻓ <ﯼﺩﻭﺭﻭ> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﻝﻭﺍ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯿﻟﻭﺍ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺩﺭﺍﺩ ﺱﻮﮐﻮﻓ ﻪﮐ ﺍﺭ <input> ﺮﺼﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺱﻭﺎﻣ ﯼﻭﺭ ﺍﺭ ﺎﻫﺪﻧﻮﯿﭘ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺺﺨﺸﻣ ﻩﺩﻭﺪﺤﻣ ﺭﺩ ﯼﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺮﺒﺘﻌﻣﺎﻧ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ .ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ "it" ﺎﺑ ﻪﮐ lang ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﺪﻧﺯﺮﻓ ﻦﯾﺮﺧﺁ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯾﺮﺧﺁ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻩﺪﺸﻧ ﺪﯾﺩﺯﺎﺑ ﯼﺎﻫﺪﻧﻮﯿﭘ ﻪﻤﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺴﯿﻧ <p> ﺮﺼﻨﻋ ﻪﮐ ﺍﺭ ﯼﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﻡﻭﺩ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐﯽﻣ ﺵﺭﺎﻤﺷ ﺪﻧﺯﺮﻓ ﻦﯾﺮﺧﺁ ﺯﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﻡﻭﺩ ﺪﻧﺯﺮﻓ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐﯽﻣ ﺵﺭﺎﻤﺷ ﺪﻧﺯﺮﻓ ﻦﯾﺮﺧﺁ ﺯﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯿﻣﻭﺩ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﻦﯿﻣﻭﺩ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ،ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ <p> ﺮﺼﻨﻋ ﺎﻬﻨﺗ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺖﺳﺍ ﻥﺁ ﺪﻟﺍﻭ ﺪﻧﺯﺮﻓ ﺎﻬﻨﺗ ﻪﮐ ﺍﺭ <p> ﺮﺼﻨﻋ ﺮﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ "ﯽﻣﺍﺰﻟﺍ" ﯽﮔﮋﯾﻭ ﻥﻭﺪﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺺﺨﺸﻣ ﻩﺩﻭﺪﺤﻣ ﺯﺍ ﺝﺭﺎﺧ ﯼﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﻩﺪﺷ ﺺﺨﺸﻣ "readonly" ﻪﺼﺨﺸﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ "readonly" ﯽﮔﮋﯾﻭ ﻥﻭﺪﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﻩﺪﺷ ﺺﺨﺸﻣ "ﻡﺯﻻ" ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺪﻨﺳ ﻪﺸﯾﺭ ﺮﺼﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ (ﺪﯿﻨﮐ ﮏﯿﻠﮐ ﺮﮕﻨﻟ ﻡﺎﻧ ﻥﺁ ﯼﻭﺎﺣ URL ﯼﻭﺭ) ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﯽﻠﻌﻓ ﻝﺎﻌﻓ news# ﺮﺼﻨﻋ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺮﺒﺘﻌﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <input> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﻝﺎﺜﻣ ﻝﺎﺜﻣ ﺡﺮﺷ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻩﺪﺷ ﺪﯾﺩﺯﺎﺑ ﯼﺎﻫﺪﻧﻮﯿﭘ ﻪﻤﻫ::first-line ﻝﺎﺜﻣ
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
::first-line::first-line ﯼﺍﺮﺑ ﺮﯾﺯ ﯼﺎﻫ ﯽﮔﮋﯾﻭ::f :: ﻝﻭﺍ ﻑﺮﺣ ﻪﺒﺷ ﺮﺼﻨﻋ
::fir ﻝﺎﺜﻣ
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
::first-letter HTML ﯼﺎﻫ ﺱﻼﮐ ﻭ ﺮﺻﺎﻨﻋ ﻪﺒﺷ
ﻝﺎﺜﻣ
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
} <!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
ﻪﻧﺎﮔﺪﻨﭼ ﺮﺻﺎﻨﻋ ﻪﺒﺷ
ﻝﺎﺜﻣ
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>
CSS - ﺮﺼﻨﻋ ::before ﻪﺒﺷ
ﻝﺎﺜﻣ
h1::before
{
content: url(smiley.gif);
}<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
CSS - ﺮﺼﻨﻋ ::after Pseudo-element
ﻝﺎﺜﻣ
h1::after
{
content: url(smiley.gif);
}<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
CSS - ﺮﮕﻧﺎﺸﻧ ﻪﺒﺷ ﺮﺼﻨﻋ ::
::marker ﺮﺼﻨﻋ ﻪﺒﺷ ﻝﺎﺜﻣ
::marker {
color: red;
font-size: 23px;
}<!DOCTYPE html>
<html>
<head>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
CSS - :: ﺮﺼﻨﻋ ﻪﺒﺷ ﺏﺎﺨﺘﻧﺍ
::selection ﺮﺼ::selection ﯼﺍﺮﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺮﯾﺯ CS ﻝﺎﺜﻣ
::selection {
color: red;
background: yellow;
}<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
CSS ﻪﺒﺷ ﺮﺻﺎﻨﻋ ﻪﻤﻫ
::after
p::after
::before
p::before
::first-letter
p::first-letter
::first-line
p::first-line
::marker
::marker
::selection
p::selection
CSS ﻪﺒﺷ ﯼﺎﻫ ﺱﻼﮐ ﻡﺎﻤﺗ
:active
a:active
:checked
input:checked
:disabled
input:disabled
:empty
p:empty
:enabled
input:enabled
:first-child
p:first-child
:first-of-type
p:first-of-type
:focus
input:focus
:hover
a:hover
:in-range
input:in-range
:invalid
input:invalid
:lang(language)
p:lang(it)
:last-child
p:last-child
:last-of-type
p:last-of-type
:link
a:link
:not(selector)
:not(p)
:nth-child(n)
p:nth-child(2)
:nth-last-child(n)
p:nth-last-child(2)
:nth-last-of-type(n)
p:nth-last-of-type(2)
:nth-of-type(n)
p:nth-of-type(2)
:only-of-type
p:only-of-type
:only-child
p:only-child
:optional
input:optional
:out-of-range
input:out-of-range
:read-only
input:read-only
:read-write
input:read-write
:required
input:required
:root
root
:target
#news:target
:valid
input:valid
:visited
a:visited