CSS ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻭ ﺽﺮﻋ ،ﻉﺎﻔﺗﺭﺍ

فهرست مطالب

ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ width ﻭ m

This element has a height of 50 pixels and a width of 100%.

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 50px;
  width: 100%;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS height and width properties</h2>

<div>This div element has a height of 50 pixels and a width of 100%.</div>

</body>
</html>

CSS ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ ﻢﯿﻈﻨﺗ

ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ width ﻭ

.ﺩﻮﺷ ﯽﻤﻧ ﻪﯿﺷﺎﺣ ﺎﯾ ،ﻪﯿﺷﺎﺣ ،ﮏﺘﺸﻟﺎﺑ ﻞﻣﺎﺷ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

`CSS ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ ﺮﯾﺩﺎﻘﻣ`

width ﻭ height

ﺭﺎﮐﺩﻮﺧ - ﺮﮔﺭﻭﺮﻣ .ﺖﺳﺍ ﺽﺮﻓ ﺶﯿﭘ ﻦﯾﺍ
ﻝﻮﻃ - ﺐﺴﺣ ﺮﺑ ﺍﺭ ﺽﺮﻋ/ﻉﺎﻔﺗﺭﺍ px، ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺮ
% - ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺪﺻﺭﺩ ﺐﺴﺣ ﺮﺑ ﺍﺭ ﺽﺮﻋ/ﻉﺎﻔﺗﺭﺍ
ﻪﯿﻟﻭﺍ - ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﻥﺁ ﯼﻭﺭ ﺍﺭ ﺽﺮﻋ/ﻉﺎﻔﺗﺭﺍ
ﯼﺮﺑ ﺙﺭﺍ - ﺩﻮﺑ ﺪﻫﺍﻮﺧ ﺽﺮﻋ/ﻉﺎﻔﺗﺭﺍ

`CSS ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ ﺯﺍ ﯽﯾﺎﻫ ﻪﻧﻮﻤﻧ`



This element has a height of 200 pixels and a width of 50%
                                                                          ﻝﺎﺜﻣ
                                        :ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ <div> ﺮﺼﻨﻋ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ
div {
  height: 
200px;
  width: 50%;
  background-color: powderblue;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>




This element has a height of 100 pixels and a width of 500 pixels.
                                                                          ﻝﺎﺜﻣ
                                   :ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﮕﯾﺩ <div> ﺮﺼﻨﻋ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ
div {
  
height: 
100px;
  width: 500px;
  background-color: powderblue;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 100px and a width of 500px.</div>

</body>
</html>


ﻪﺟﻮﺗ: ﯽﮔﮋﯾﻭ ﻪﮐ ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﺮﻃﺎﺧ ﻪﺑﯼﺎﻫ                                                               ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻢﯿﻈﻨﺗ
.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﺼﻨﻋ ﮏﯾ ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ max-wi
max-width ﺭﺩ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﻝﻮﻃ ﺮﯾﺩﺎﻘﻣ،
.ﺪﺷﺎﺑ ﺽﺮﻋ ﺯﺍ ﺮﺘﮑﭼﻮﮐ ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﺥﺭ ﯽﻧﺎﻣﺯ ﻻﺎﺑ 
This element has a height of 100 pixels and a max-width of 500 pixels.


ﻪﺟﻮﺗ: ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻭﺩ ﺮﻫ ﺯﺍ ﯽﻠﯾﻻﺩ ﻪﺑ ﺮﮔﺍﺪﯿﻨﮐ
                                                                          ﻝﺎﺜﻣ
                                 ﺖﺳﺍ a ﻭ ﻞﺴﮑﯿﭘ 100 ﻉﺎﻔﺗﺭﺍ ﯼﺍﺭﺍﺩ <div> ﺮﺼﻨﻋ ﻦﯾﺍ
div {
    max-width: 500px;
  
height: 
100px;
  background-color: powderblue;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width of an element</h2>

<div>This div element has a height of 100px and a max-width of 500px.</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>


                                        ﺎﻫﻝﺎﺜﻣ - ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
                                              ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺻﺎﻨﻋ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
  height: auto;
}

img.two {
  height: 200px;
  width: 200px;
}

div.three {
  height: 300px;
  width: 300px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of elements</h2>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>

<p>The height and width of this div element is 300px:</p>
<div class="three"></div>

</body>
</html>


                  .ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﻒﻠﺘﺨﻣ ﺮﺻﺎﻨﻋ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ ﻢﯿﻈﻨﺗ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ
                        ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺪﺻﺭﺩ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}

img.one {
  height: auto;
  width: auto;
}

img.two {
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>

<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">

</body>
</html>


.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺪﺻﺭﺩ ﺭﺍﺪﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﺮﯾﻮﺼﺗ ﮏﯾ ﺽﺮﻋ ﻭ ﻉﺎﻔﺗﺭﺍ ﻢﯿﻈﻨﺗ ﻩﻮﺤﻧ ﻝﺎﺜﻣ
                                  ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻭ ﺽﺮﻋ ﻞﻗﺍﺪﺣ
<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 400px;
  min-width: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>


.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﻞﺴﮑﯿﭘ ﺭﺍﺪﻘﻣ ﮏﯾ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ ﻭ ﺽﺮﻋ ﻞﻗﺍﺪﺣ ﻢﯿ
                            ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﺮﺜﮐﺍﺪﺣ ﻭ ﻉﺎﻔﺗﺭﺍ ﻞﻗﺍﺪﺣ
<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-height: 600px;
  min-height: 400px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>


.ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﻞﺴﮑﯿﭘ ﺭﺍﺪﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﺮﺜﮐﺍﺪﺣ ﻭ ﻉﺎﻔﺗﺭﺍ ﻞﻗﺍﺪﺣ
                                                      CSS ﺩﺎﻌﺑﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ
height
                                                ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ
max-height
                                         ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﺮﺜﮐﺍﺪﺣ
max-width
                                            ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺽﺮﻋ ﺮﺜﮐﺍﺪﺣ
min-height
                                          ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻉﺎﻔﺗﺭﺍ ﻞﻗﺍﺪﺣ
min-width
                                             ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺽﺮﻋ ﻞﻗﺍﺪﺣ
width
                                                   ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺽﺮﻋ

  
    
      ← صفحه قبلی
    
    
      صفحه بعد →