CSS თვისება DISPLAY და მისი მნიშვნელობები (none, block, inline-block)
CSS ერთერთი ძალიან საჭირო თვისებაა DISPLAY, რომელსაც შეუძლია ელემენტი გააქროს. ეს თვისება გამოიყენება ჩამოშლადი მენიუს დროს.
DISPLAY-ის საშუალებით შეგვიძლია ბლოკური ელემენტი გარდავქმნათ სტრიქონულ ელემენტად და პირიქით, სტრიქონული ელემენტი - ბლოკურად.
DISPLAY-ის ყველა ნმიშვნელობა იხილეთ ბმულზე
ქვემოთ მოცემულია კოდი, სადაც ერთ ფაილშია ჩაწერილი HTML-კოდი და CSS-სტილები.
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>