CSS Düzenli Görüntü Özelliği

Web tasarım kursumuzun CSS derslerine display özelliğiyle devam ediyoruz. Herkese başarılar dilerim.

CSS Görüntü Özelliği

CSS’in sağladığı en önemli özelliklerden biri display özelliğidir.

display özelliğini tasarımlarımıza eklediğimiz içeriklerin sayfada nasıl görüntüleneceğini belirlemek için kullanırız.

Yani bir öğenin blok olarak mı, satır içinde mi görüneceğini ya da hiç görünmeyeceğini bu özellik sayesinde belirleriz.

Blok Seviyesindeki Öğeler

Blok seviyesindeki bir öğe her zaman yeni bir satırda başlar ve o satırdaki tüm genişliği kendisi alır (mümkün olduğunca sağa ve sola doğru yayılır).

<div> öğesi blok seviyesinde bir öğedir.

Blok seviyesindeki öğelere örnekler:

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

Satır İçi Öğeler

Bu öğeler yeni bir satıra başlamaz ve yalnızca içerikleri kadar yer kaplar.

Bu bir paragraftaki <span> etiketidir.

Gördüğünüz gibi yalnızca içeriği kadar yer kapladı, satırdaki tüm genişliği kendisi almadı.

Satır içi öğelere width ve height uygulanmaz. Böyle bir öğeye genişlik ve yükseklik vermek istediğimizde display: inline-block; ya da display: block; kullanırız.

Satır içi öğelere örnekler:

<span>
<a>
<img>

display: none;

Bu özellik sayesinde bir süre görünmesini istemediğimiz içerikleri silmeye gerek kalmadan gizleyebiliriz.

Pek kullanışlı bir yöntem olmasa da yorum satırı amacıyla da kullanılabilir. Yani silmek istemediğiniz kodlara display: none; stili verilerek kullanıcıya gösterilmeden bekletilebilir. Ancak bu içerik sayfanın kaynak kodunda kalmaya devam eder.

Varsayılan Görüntülenme Değerini Geçersiz Kılma

Her HTML öğesinin varsayılan bir display değeri vardır; çoğu öğe için bu değer block ya da inline’dır.

Bu varsayılan değeri CSS ile çok basit bir şekilde değiştirebiliriz.

Buna en iyi örnek yatay menülerdir. Menüler genellikle <li> öğeleriyle yapılır ve <li> öğeleri varsayılan olarak alt alta dizilir. Onları display: inline; ile yan yana getiririz. Açılır menülerde ise alt menüler önce display: none; ile gizlenir. Ne demek istediğimizi ilerideki derslerde çok daha rahat anlayabileceksiniz.

Şimdi bu özelliğin nasıl kullanıldığını bir örnekle görelim:

li {
    display: inline;
}

Aşağıdaki örnek <span> öğesini blok olarak göstermektedir.

span {
    display: block;
}

Aşağıdaki örnek <a> öğelerini blok öğe olarak görüntüler.

a {
    display: block;
}

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.