CSS ﻪﺒﻌﺟ ﻝﺪﻣ

فهرست مطالب

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

.ﺖﻓﺮﮔ ﺮﻈﻧ ﺭﺩ ﻪﺒﻌﺟ ﻥﺍﻮﻨﻋ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ HTML ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ

CSS ﻪﺒﻌﺟ ﻝﺪﻣ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ "ﻪﺒﻌﺟ ﻝﺪﻣ" ﺡﻼﻄﺻﺍ ﺯﺍ ،ﺩﻮﺷ ﯽﻣ ﺖﺒﺤﺻ ﻥﺎﻣﺪﯿﭼ ﻭ ﯽﺣﺍﺮﻃ ﺩﺭﻮﻣ ﺭﺩ ﻪﮐ ﯽﻧﺎ

.ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ HTML ﺮﺼﻨﻋ ﺮﻫ ﻑﺍﺮﻃﺍ ﺭﺩ ﻪﮐ ﺖﺳﺍ ﯼﺍ ﻪﺒﻌﺟ ﺎًﺳﺎﺳﺍ CSS ﻪﺒﻌﺟ ﻝﺪﻣ

:ﻒﻠﺘﺨﻣ ﯼﺎﻫ ﺖﻤﺴﻗ ﺢﯿﺿﻮﺗ

  • ﺍﻮﺘﺤﻣ - ﯽﻣ ﺮﻫﺎﻇ ﺮﯾﻭﺎﺼﺗ ﻭ ﻦﺘﻣ ﻪﮐ ﯽﯾﺎﺟ ،ﺭﺩﺎﮐ ﯼﺍﻮﺘﺤﻣﺪﻧﻮﺷ

  • ﮏﺘﺸﻟﺎﺑ - ﺖﺳﺍ ﻑﺎﻔﺷ ﮏﺘﺸﻟﺎﺑ .ﺪﻨﮐ ﯽﻣ ﮎﺎﭘ ﺍﺭ ﺍﻮﺘﺤﻣ ﻑﺍﺮﻃﺍ ﻪﯿﺣﺎﻧ

  • ﻪﯿﺷﺎﺣ - ﺪﺧﺮﭼ ﯽﻣ ﺍﻮﺘﺤﻣ ﻭ ﮏﺘﺸﻟﺎﺑ ﻑﺍﺮﻃﺍ ﺭﺩ ﻪﮐ ﯼﺍ ﻪﯿﺷﺎﺣ

  • ﻪﯿﺷﺎﺣ - ﺖﺳﺍ ﻪﯿﺷﺎﺣ .ﺪﻨﮐ ﯽﻣ ﮎﺎﭘ ﺍﺭ ﺯﺮﻣ ﺯﺍ ﺝﺭﺎﺧ ﻪﯿﺣﺎﻧ

ﻢﯿﻨﮐ ﻒﯾﺮﻌﺗ ﺍﺭ ﺎﻀﻓ ﻭ ﻢﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺮﺻﺎﻨﻋ ﻑﺍﺮﻃﺍ ﺭﺩ ﻪﯿﺷﺎﺣ ﮏﯾ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺍﺭ ﻥﺎﮑﻣﺍ ﻦﯾﺍ

ﻝﺎﺜﻣ

:ﻪﺒﻌﺟ ﻝﺪﻣ ﺶﯾﺎﻤﻧ

div {
  width: 300px;
  border: 15px solid 
green;
  
padding: 50px;
  
margin: 20px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ

.ﺪﻨﮐ ﯽﻣ ﺭﺎﮐ ﻪﻧﻮﮕﭼ ﻪﺒﻌﺟ ﻝﺪﻣ ﻪﮐ ﺪﯿﻧﺍﺪﺑ ﺪﯾﺎﺑ ،ﺎﻫﺮﮔﺭﻭﺮﻣ ﻪﻤﻫ ﺭﺩ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮ

ﻢﻬﻣ: ﻉﺎﻔﺗﺭﺍ ﻭ ﺽﺮﻋ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻪﮐ ﯽﻣﺎﮕﻨﻫ an ﺪﯿﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ

ﻝﺎﺜﻣ

:ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﻞﺴﮑﯿﭘ 350 ﯽﻠﮐ ﺽﺮﻋ ﯼﺍﺭﺍﺩ <div> ﺮﺼﻨﻋ ﻦﯾﺍ

div {	width: 320px;
   
padding: 10px;
   
border: 5px solid gray;
   
margin: 0;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also 350px. The total height of this element is 80px.</div>

</body>
</html>

:ﻪﺒﺳﺎﺤﻣ ﻢﻨﯾﺍ


(ﺽﺮﻋ) ﻞﺴﮑﯿﭘ 320

:ﺩﻮﺷ ﻪﺒﺳﺎﺤﻣ ﺮﯾﺯ ﺕﺭﻮﺻ ﻪﺑ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﻞﮐ ﺽﺮﻋ

ﭗﭼ ﺖﻤﺳ + ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﯾﻻ + ﭗﭼ ﺖﻤﺳ ﻪﯾﻻ + ﺽﺮﻋ=ﺮﺼﻨﻋ ﻞﮐ ﺽﺮﻋ

:ﺩﻮﺷ ﻪﺒﺳﺎﺤﻣ ﺮﯾﺯ ﺕﺭﻮﺻ ﻪﺑ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﻞﮐ ﻉﺎﻔﺗﺭﺍ

ﻻﺎﺑ + ﻦﯿﯾﺎﭘ ﻪﯾﻻ + ﻻﺎﺑ ﻪﯾﻻ + ﻉﺎﻔﺗﺭﺍ=ﺮﺼﻨﻋ ﻞﮐ ﻉﺎﻔﺗﺭﺍ

ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ margin ﺩﺭﺍﺬﮔ ﯽﻣ ﺮﯿﺛﺄﺗ ﻪﺒﻌﺟ ﻞﮐ ﯼﺎﻀﻓ ﺮﺑ ﻦﯿﻨﭽﻤﻫ