CSS Görüntü Özellikleri (Display)

CSS Görüntü Özellikleri Nelerdir? CSS Görüntü Özellikleri Nasıl Kullanılır? gibi soruların cevaplarını bu konumuzda bulabilirsiniz.

CSS Şubat 6, 2022 0 580 Okuma Listesine Ekle

CSS Görüntü Özelliği (The Display Property)

Görüntü özelliği, düzeni kontrol etmek için en önemli CSS özelliğidir.

Her HTML öğesinin, ne tür bir öğe olduğuna bağlı olarak varsayılan bir görüntüleme değeri vardır. Çoğu öğe için varsayılan görüntüleme değeri blok veya satır içidir.

Blok Öğeler (Block-level Elements)

Blok düzeyinde bir öğe her zaman yeni bir satırda başlar ve mevcut tüm genişliği kaplar (mümkün olduğunca sola ve sağa doğru uzanır).

<div> öğesi, blok düzeyinde bir öğedir.

Blok düzeyinde öğelere örnekler şunlardır:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Satır İçin Öğeler (Inline Elements)

Satır içi öğe yeni bir satırda başlamaz. Yalnızca gerektiği kadar genişlikte yer kaplar.

Bu bir paragraf içindeki satır içi öğesidir.

Satır içi öğelere örnek olarak şunlar verilebilir:

<span>
<a>
<img>

Display: none; Özelliği

display: none; JavaScript ile, öğeleri silmeden ve yeniden oluşturmadan gizlemek ve göstermek için yaygın olarak kullanılır.

<script> öğesi display: none; varsayılan olarak kullanılır.

Varsayılan Görüntü Değerini Devre Dışı Bırakma

Belirtildiği gibi, her öğenin varsayılan bir görüntüleme değeri vardır. Ancak, bunu devre dışı bırakabilirsiniz.

Satır içi bir öğeyi bir blok öğesiyle değiştirmek veya tam tersi yapabilirsiniz.

Yaygın bir örnek, yatay menüler için satır içi <li> öğeleri kullanmaktır.

Örnek:

li {
  display: inline;
}

Not: Bir elemanın gösterim özelliğinin ayarlanması, ne tür bir eleman olduğunu DEĞİL, sadece elemanın nasıl görüntüleneceğini değiştirir. Böylece, display:block; içinde başka blok elemanların bulunmasına izin verilmez.

Aşağıdaki örnek, <span> öğelesinin blok öğesi olarak görüntülenmesini sağlar.

Örnek: