Altın Konu CSS Görüntüleme Özelliği

Nizam-ı Alem · 27 Kas 2025

CSS görüntüleme özelliği, bir öğenin bir web sayfasında nasıl görüntüleneceğini, düzen davranışını ve diğer öğelerle nasıl etkileşime gireceğini belirler.

Bir öğenin oluşturduğu görüntüleme kutusu türünü belirtir.
Bir öğenin blok, satır içi, esnek, ızgara vb. olarak gösterilip gösterilmeyeceğini kontrol eder.
Düzen yapısını ve genel sayfa akışını etkiler.

Sözdizimi (Syntax)

display: value;

Örnek : Bu örnekte CSS görüntüleme özelliğini göstermek için 3 div kullanılmıştır.

HTML:

<html>
<head>
<!--Driver Code Ends-->
    <style>
        #geeks1 {
            height: 100px;
            width: 200px;
            background: teal;
            display: block;
        }

        #geeks2 {
            height: 100px;
            width: 200px;
            background: cyan;
            display: block;
        }

        #geeks3 {
            height: 100px;
            width: 200px;
            background: green;
            display: block;
        }

        .gfg {
            margin-left: 20px;
            font-size: 42px;
            font-weight: bold;
            color: #009900;
        }

        .geeks {
            font-size: 25px;
            margin-left: 30px;
        }

        .main {
            margin: 50px;
            text-align: center;
        }
    </style>
<!--Driver Code Starts-->
</head>
<body>
    <div class="gfg">Turkmmo</div>
    <div class="geeks">Turkmmo NoxVortex</div>
    <div class="main">
        <div id="geeks1">Web Geliştirme</div>
        <div id="geeks2">Web Geliştirme</div>
        <div id="geeks3">Web Geliştirme</div>
    </div>
</body>
</html>

Görüntüleme Özelliğini Anlama
Görüntüleme özelliği, bir HTML öğesinin nasıl görüntüleneceğini tanımlar. Bir öğe tarafından oluşturulan kutu türünü kontrol ederek, belge akışı içindeki konumunu ve davranışını etkiler. Temel değerleri inceleyelim:

1. Görüntüleme Bloğunu Kullanma
Bu, <div> öğeleri için varsayılan özelliktir. Öğeleri dikey olarak, birbiri ardına yerleştirir. Blok düzeyindeki bir öğenin yüksekliğini ve genişliğini ayarlayabilirsiniz.

Örnek: Yukarıdaki örnekte verilen CSS'yi kullanın.

CSS:

#geeks1 {
       background: teal;
       display: block;
}
#geeks2 {
       background: cyan;
       display: block;
}
#geeks3 {
       background: green;
       display: block;
}

2. Satır İçi Görüntülemeyi Kullanma
Bu özelliği, bir öğeyi satır içi görüntülemek için kullanın. Yeni bir satır başlatmaz ve içerik akışına saygı gösterir.

Örnek: Yukarıdaki örnekte verilen CSS'yi kullanın.

CSS:

#geeks1 {
       background: teal;
       display: inline;
}
#geeks2 {
       background: cyan;
       display: inline;
}
#geeks3 {
       background: green;
       display: inline;
}

3. Satır İçi Blok Görüntülemeyi Kullanma
Hem blok hem de satır içi özelliklerini birleştiren bu değer, öğelerin blok düzeyinde özelliklere sahipken satır içi olarak akmasını sağlar. Duyarlı düzenler oluşturmak için kullanışlıdır.

Örnek: Yukarıdaki örnekte verilen CSS'yi kullanın.

CSS:

#geeks1
{
        background: teal;
        display: inline-block;
}
#geeks2 {
        background: cyan;
        display: inline-block;
}
#geeks3 {
        background: green;
        display: inline-block;
}

4. Display None Kullanımı
Bu özellik, bu özelliği kullanan div öğesini veya kapsayıcıyı gizler. Div öğelerinden birinde kullanılması, çalışmayı daha anlaşılır hale getirecektir.

Örnek: Yukarıdaki örnekte verilen CSS'yi kullanın.

CSS:

#geeks2 {
         background: cyan;
         display: none;
}

Çıktı: Blok 2'de hiçbir özelliği görüntüleme

5. Display Flex ve Display Grid Kullanımı
Bu değerler, güçlü düzen seçenekleri sunar. Flexbox (display: flex), esnek ve tek boyutlu düzenlere olanak tanırken, CSS Grid (display: grid) iki boyutlu, ızgara tabanlı düzenler sunar.

Görüntüleme Özelliği Değerleri

inline Bir öğeyi satır içi öğe olarak görüntülemek için kullanılır.
block Bir öğeyi blok öğesi olarak görüntülemek için kullanılır.
contents Kapsayıcıyı gizlemek için kullanılır.
flex Bir öğeyi blok düzeyinde esnek kapsayıcı olarak görüntülemek için kullanılır.
grid Bir öğeyi blok düzeyinde ızgara kapsayıcısı olarak görüntüler.
inline-block Bir öğeyi satır içi düzey blok kapsayıcısı olarak görüntüler.
inline-flex Bir öğeyi satır içi düzey esnek kapsayıcısı olarak görüntüler.
inline-grid Bir öğeyi satır içi düzey ızgara kapsayıcısı olarak görüntüler.
inline-table Bir satır içi düzey tabloyu görüntülemek için kullanılır.
list-item <li> öğesindeki tüm öğeleri görüntülemek için kullanılır.
run-in Bir öğeyi bağlama bağlı olarak satır içi veya blok düzeyinde görüntülemek için kullanılır.
table Tüm öğeler için davranışı <table> olarak ayarlamak için kullanılır.
table-caption Tüm öğeler için davranışı <caption> olarak ayarlamak için kullanılır. table-column-group Davranışı tüm öğeler için <column> olarak ayarlayın.
table-header-group Davranışı tüm öğeler için <header> olarak ayarlayın.
table-footer-group Davranışı tüm öğeler için <footer> olarak ayarlayın.
table-row-group Davranışı tüm öğeler için <row> olarak ayarlamak için kullanılır.
table-cell Davranışı tüm öğeler için <td> olarak ayarlamak için kullanılır.
table-column Davranışı tüm öğeler için <col> olarak ayarlamak için kullanılır.
table-row Davranışı tüm öğeler için <tr> olarak ayarlamak için kullanılır.
none Öğeyi kaldırmak için kullanılır.
initial Varsayılan değeri ayarlamak için kullanılır.
inherit Özelliği üst öğelerinin öğelerinden devralmak için kullanılır.