ﺮﮕﺸﯾﺎﻤﻧ ﯽﮔﮋﯾﻭ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ

فهرست مطالب

.ﺖﺳﺍ ﯼﺪﻨﺑﺡﺮﻃ ﻝﺮﺘﻨﮐ ﯼﺍﺮﺑ CSS ﯽﮔﮋﯾﻭ ﻦﯾﺮﺘﻤﻬﻣ displ
`ﺮﮕﺸﯾﺎﻤﻧ ﯽﮔﮋﯾﻭ`

.ﻪﻧ ﺎﯾ ﺩﻮﺷ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﺮﺼﻨﻋ ﮏﯾ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ dis
ﺩﺭﺍﺩ ﺽﺮﻓ ﺶﯿﭘ ﺶﯾﺎﻤﻧ ﺭﺍﺪﻘﻣ ﮏﯾ ﻉﻮﻧ ﻪﺑ ﻪﺘﺴﺑ HTML ﺮﺼﻨﻋ ﺮﻫ







Click to show panel


  This panel contains a <div> element, which is hidden by default (display: none).
  It is styled with CSS, and we use JavaScript to show it (change it to (display: block).



                                                             ﮎﻮﻠﺑ ﺢﻄﺳ ﺭﺩ ﺮﺻﺎﻨﻋ
ﺪﻨﮐ ﯽﻣ ﻝﺎﻐﺷﺍ ﺍﺭ ﺩﻮﺟﻮﻣ ﺽﺮﻋ ﻡﺎﻤﺗ ﻭ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ ﺪﯾﺪﺟ ﻂﺧ ﮏﯾ ﺯﺍ ﻪﺸﯿﻤﻫ ﮎﻮﻠﺑ ﺢﻄﺳ ﺭﺩ ﺮ

The <div> element is a block-level element.
                                                 :ﮎﻮﻠﺑ ﺢﻄﺳ ﺮﺻﺎﻨﻋ ﺯﺍ ﯽﯾﺎﻫ ﻪﻧﻮﻤﻧ
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
                                                                ﯽﻄﺧ ﻥﻭﺭﺩ ﺮﺻﺎﻨﻋ
 .ﺩﺮﯿﮔ ﯽﻣ ﺽﺮﻋ ﻡﺯﻻ ﻩﺯﺍﺪﻧﺍ ﻪﺑ ﻂﻘﻓ ﻭ ﺩﻮﺷ ﯽﻤﻧ ﻉﻭﺮﺷ ﺪﯾﺪﺟ ﻂﺧ ﮏﯾ ﯼﻭﺭ ﯽﻄﺧ ﻥﻭﺭﺩ ﺮﺼﻨﻋ ﮏﯾ
ﺖﺳﺍ ﯽﻄﺧ ﻥﻭﺭﺩ <span> ﺮﺼﻨﻋ ﮏﯾ<";span class="w3-theme-border" style="border-width
                                                 :ﯽﻄﺧ ﻥﻭﺭﺩ ﺮﺻﺎﻨﻋ ﺯﺍ ﯽﯾﺎﻫ ﻪﻧﻮﻤﻧ
<span>
<a>
<img>
                                           ؛ﭻﯿﻫ :ﺶﯾﺎﻤﻧdisplay: none; ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺩﺮﮐ ﻥﺎﻬﻨﭘ ﯼﺍﺮﺑ
ﺪﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ display: none; ﺯﺍ 
                                             ﺪﯿﻨﮐ ﻮﻐﻟ ﺍﺭ ﺽﺮﻓ ﺶﯿﭘ ﺮﮕﺸﯾﺎﻤﻧ ﺭﺍﺪﻘﻣ
ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﺎﻤﺷ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ .ﺩﺭﺍﺩ ﺽﺮﻓ ﺶﯿﭘ ﺶﯾﺎﻤﻧ ﺭﺍﺪﻘﻣ ﮏﯾ ﺮﺼﻨﻋ ﺮﻫ ،ﺪﺷ ﻪﺘﻔﮔ ﻪﮐ ﺭﻮﻄ
          ﺪﺷﺎﺑ ﺪﯿﻔﻣ ﺪﻧﺍﻮﺗ ﯽﻣ ،ﺲﮑﻋﺮﺑ ﺎﯾ ،ﮎﻮﻠﺑ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﯽﻄﺧ ﻥﻭﺭﺩ ﺮﺼﻨﻋ ﮏﯾ ﺮﯿﯿﻐﺗ
:ﺖﺳﺍ ﯽﻘﻓﺍ ﯼﺎﻫﻮﻨﻣ ﯼﺍﺮﺑ <li> ﯽﻄﺧ ﻥﻭﺭﺩ ﺮﺻﺎﻨﻋ ﻦﺘﺧ
                                                                          ﻝﺎﺜﻣ
li {
  display: inline;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>


ﻪﺟﻮﺗ: ﻂﻘﻓ ﺮﺼﻨﻋ ﮏﯾ ﺶﯾﺎﻤﻧ ﯽﮔﮋﯾﻭ ﻢﯿﻈﻨﺗ ﺮﺼﻨﻋ ﺶﯾﺎﻤﻧ ﻩﻮﺤﻧ
                    :ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﮎﻮﻠﺑ ﺮﺻﺎﻨﻋ ﻥﺍﻮﻨﻋ ﻪﺑ ﺍﺭ <span> ﺮﺻﺎﻨﻋ ﺮﯾﺯ ﻝﺎﺜﻣ
                                                                          ﻝﺎﺜﻣ
span {
  display: block;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<h1>Display span elements as block elements</h1>

<span>A display property with</span> <span>a value of "block" results in</span> <span>a line break between each span elements.</span>

</body>
</html>


                       :ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﮎﻮﻠﺑ ﺮﺻﺎﻨﻋ ﻥﺍﻮﻨﻋ ﻪﺑ ﺍﺭ <a> ﺮﺻﺎﻨﻋ ﺮﯾﺯ ﻝﺎﺜﻣ
                                                                          ﻝﺎﺜﻣ
a {
  display: block;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<h1>Display links as block elements</h1>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>


                        ؟visibility:hidden ﺎﯾ display:none - ﺩﻮﺷ ﻥﺎﻬﻨﭘ ﺮﺼﻨﻋ ﮏﯾ




style="wrap">display:none
  
  

visibility:hidden
  
  

Reset
  
  




ﯼﻭﺭ display ﯽﮔﮋﯾﻭ ﻢﯿﻈﻨﺗ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ
                                                                          ﻝﺎﺜﻣ
h1.hidden {
  display: none;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>


visibility:hidden; ﺪﻨﮐ ﯽﻣ ﻥﺎﻬﻨﭘ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﻦﯿ
                           ﺩﺮﮐ ﺪﻫﺍﻮﺧ ﻝﺎﻐﺷﺍ ﺍﺭ ﺎﻀﻓ ﻥﺎﻤﻫ ﻥﺎﻨﭽﻤﻫ ﺮﺼﻨﻋ ،ﻝﺎﺣ ﻦﯾﺍ ﺎﺑ
                                                                          ﻝﺎﺜﻣ
h1.hidden {
  visibility: hidden;
}
                                                    → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>


                                                               ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
                   ؛ﻥﺎﻬﻨﭘ :ﺪﯾﺩ ﻞﺑﺎﻘﻣ ﺭﺩ ;none :ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺮﮕﺸﯾﺎﻤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ
                                           .ﻥﺎﻬﻨﭘ :ﺪﯾﺩ ﻭ .ﭻﯿﻫ :ﺶﯾﺎﻤﻧ ﻦﯿﺑ ﺕﻭﺎﻔﺗ
<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
  float: left;
  text-align: center;
  width: 120px;
  border: 1px solid gray;
  margin: 4px;
  padding: 6px;
}

button {
  width: 100%;
}
</style>
</head>
<body>

<h3>Difference between display:none and visiblity: hidden</h3>
<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the layout.</p>
<p><strong>display:none</strong> removes the element from the document. It does not take up any space.</p>

<div class="imgbox" id="imgbox1">Box 1<br>
  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
  <button onclick="removeElement()">Remove</button>
</div>

<div class="imgbox" id="imgbox2">Box 2<br>
  <img src="img_lights.jpg" alt="Lights" style="width:100%">
  <button onclick="changeVisibility()">Hide</button>
</div>

<div class="imgbox">Box 3<br>
  <img src="img_forest.jpg" alt="Forest" style="width:100%">
  <button onclick="resetElement()">Reset All</button>
</div>

<script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>


 ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺶﯾﺎﻤﻧ ﯼﺍﺮﺑ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻭ CSS ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻩﻮﺤﻧ ﻝﺎﺜﻣ ﻦﯾﺍ
                         ﺍﻮﺘﺤﻣ ﺶﯾﺎﻤﻧ ﯼﺍﺮﺑ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺎﺑ ﻩﺍﺮﻤﻫ CSS ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>


CSS Display/Visibility Properties
display
                                             ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ ﺶﯾﺎﻤﻧ ﻩﻮﺤﻧ
visibility
                       ﺮﯿﺧ ﺎﯾ ﺪﺷﺎﺑ ﻩﺪﻫﺎﺸﻣ ﻞﺑﺎﻗ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ

  
    
      ← صفحه قبلی
    
    
      صفحه بعد →
ﺮﮕﺸﯾﺎﻤﻧ ﯽﮔﮋﯾﻭ - CSS ﯼﺪﻨﺑ ﺡﺮﻃ

فهرست مطالب

`ﺮﮕﺸﯾﺎﻤﻧ ﯽﮔﮋﯾﻭ`

ﮎﻮﻠﺑ ﺢﻄﺳ ﺭﺩ ﺮﺻﺎﻨﻋ

ﯽﻄﺧ ﻥﻭﺭﺩ ﺮﺻﺎﻨﻋ

`ﺪﯿﻨﮐ ﻮﻐﻟ ﺍﺭ ﺽﺮﻓ ﺶﯿﭘ ﺮﮕﺸﯾﺎﻤﻧ ﺭﺍﺪﻘﻣ`

`ﻝﺎﺜﻣ`

`ﻝﺎﺜﻣ`

`ﻝﺎﺜﻣ`

`؟visibility:hidden ﺎﯾ display:none - ﺩﻮﺷ ﻥﺎﻬﻨﭘ ﺮﺼﻨﻋ ﮏﯾ`

ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ

CSS Display/Visibility Properties
