CSS თვისება DISPLAY და მისი მნიშვნელობები (none, block, inline-block)

7-03-2021, 11:33

CSS ერთერთი ძალიან საჭირო თვისებაა DISPLAY, რომელსაც შეუძლია ელემენტი გააქროს. ეს თვისება გამოიყენება ჩამოშლადი მენიუს დროს.
DISPLAY-ის საშუალებით შეგვიძლია ბლოკური ელემენტი გარდავქმნათ სტრიქონულ ელემენტად და პირიქით, სტრიქონული ელემენტი - ბლოკურად.
DISPLAY-ის ყველა ნმიშვნელობა იხილეთ ბმულზე
ქვემოთ მოცემულია კოდი, სადაც ერთ ფაილშია ჩაწერილი HTML-კოდი და CSS-სტილები.

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            display
        </title> 
         
   <style> 
  *{
  padding: 0;
  margin: 0;
}
body{
  background-color:burlywood ;
}
nav {
  height: 100px;
  width: 50%;
  margin: 30px auto;
}

.menu li {
  list-style: none;
  display: inline-block;
}

.menu a{
  display: block;
  margin-right: 3px;
  padding: 20px 30px;
  font-size: 28px;
  background-color: #F05121;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
.menu a:hover{
  color: #1818F0;
  border-bottom: 2px solid #1818F0;
  background-color: #fff;
  transition: all 0.5s;
}

.damaluli{
  margin: 0 auto;
  width: 600px;
  height: 200px;
  background-color: #ff2a00;
}
.meore {
  margin: 0 auto;
  width: 600px;
  height: 200px;
  background-color: #1a0a74;
}

.damaluli, .meore{
  font-size: 28px;
  color: #fff;
}

.damaluli:hover{
  display: none;
  //visibility: hidden;
}
    </style> 
 </head> 
     
    <body> 
        
    <nav>
        <ul class="menu">
            <li>
                <a href="">home</a>
            </li>
            <li>
                <a href="">about</a>
            </li>
            <li>
                <a href="">contact</a>
            </li>
        </ul>
    </nav>

    <h1>
        <pre>      display:none;  display:block;  display:inline-block;  visibility:hidden</pre>
    </h1>
    <br>

    <div class="damaluli">
        ეს ბლოკი აღარ გამოჩნდება ჰოვერის დროს<br>
        visibility: hidden-ის დროს ცარიელი ადგილი რჩება. ხოლო
        <br>
        display: none-ს დროს კი ცარიელი ადგილიც ქრება ბლოკთან ერთად
    </div>
    <div class="meore">
        display: none-ს დროს ეს ბლოკი გამქრალის ადგილს დაიკავებს
        <br>
        visibility: hidden-ის დროს კი ადგილზე რჩება
    </div>

   </body> 
</html>

CSS თვისება DISPLAY და მისი მნიშვნელობები (none, block, inline-block)

მსგავსი სიახლე