İlginizi Çekebilir
  1. Ana Sayfa
  2. Nasıl Yapılır?

CSS Display Nedir ve Nasıl Kullanılır?

CSS Display Nedir ve Nasıl Kullanılır?
css-display
+ - 0

CSS Display Nedir ve Nasıl Kullanılır?

CSS display, elemanın yerleşimini kontrol etmek için kullanılan CSS’nin en önemli özelliğidir. Elemanın nasıl görüntüleneceğini belirtir.

Her elemanın doğasına göre varsayılan bir gösterim değeri vardır. Web sayfasındaki her öğe dikdörtgen bir kutudur ve CSS özellik, o dikdörtgen kutunun davranışını tanımlar.

css display

CSS Display Default Properties

default valueinline
inheritedno
animation supportingno
versioncss1
javascript syntaxobject.style.display=”none”

CSS Display Values

Yaygın olarak kullanılan aşağıdaki CSS görüntüleme değerleri vardır.

  1. display: inline;
  2. display: inline-block;
  3. display: block;
  4. display: none;

1) CSS display inline

Satır içi öğe yalnızca gerekli genişliği alır. Satır sonunu zorlamaz, böylece metin akışı satır içi örnekte kırılmaz.

Satır içi öğeler şunlardır:

  • <span>
  • <a>
  • <em>
  • <b> etc.

Satır içi bir CSS görüntüleme örneği görelim.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: inline;   
}  
</style>  
</head>  
<body>  
<p>Hello webolog.net</p>  
<p>CSS Tutorial.</p>  
<p>SQL Tutorial.</p>  
<p>HTML Tutorial.</p>  
<p>CSS Tutorial.</p>  
</body>  
</html>   

Kodun Çıktısı:

Hello webolog.net CSS Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

2) CSS display inline-block

CSS ekranı satır içi blok öğesi, satır içi öğeye çok benzer, ancak fark, genişliği ve yüksekliği ayarlayabilmenizdir.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: inline-block;   
}  
</style>  
</head>  
<body>  
<p>Hello webolog.net</p>  
<p>CSS Tutorial.</p>  
<p>SQL Tutorial.</p>  
<p>HTML Tutorial.</p>  
<p>CSS Tutorial.</p>  
</body>  
</html>  

Kodun Çıktısı:

Hello webolog.net CSS Tutorial

. SQL Tutorial

. HTML Tutorial

. CSS Tutorial.

3) CSS display block

CSS görüntüleme bloğu öğesi, alabilecekleri kadar yatay yer kaplar. Blok öğesinin mevcut tüm genişliği aldığı anlamına gelir. Kendilerinden önce ve sonra bir satır sonu yaparlar.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: block;   
}  
</style>  
</head>  
<body>  
<p>Hello webolog.net</p>  
<p>CSS Tutorial.</p>  
<p>SQL Tutorial.</p>  
<p>HTML Tutorial.</p>  
<p>CSS Tutorial.</p>  
</body>  
</html>  

Kodun Çıktısı:

Hello webolog.net

CSS Tutorial.

SQL Tutorial.

HTML Tutorial.

4) CSS display none

“none” değeri, öğeyi sayfadan tamamen kaldırır. Herhangi bir yer kaplamayacaktır.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.hidden {  
    display: none;  
}  
</style>  
</head>  
<body>  
<h1>This heading is visible.</h1>  
<h1 class="hidden">This is not visible.</h1>  
<p>You can see that the hidden heading does not contain any space.</p>  
</body>  
</html>  

Kodun Çıktısı:

This heading is visible.

You can see that the hidden heading does not contain any space.

Yazar Hakkında

Bu Yazıyı Yorumla