CSS Display Özellikleri Nelerdir? Nasıl Kullanılır?

CSS’deki Temel Özellikler

Bilhassa site kodlama ayarlarında üstün kullanım opsiyonlarına sahip olan CSS daimi internet kullanıcıları için oldukça önemlidir. Nitekim içerisinde barındırdığı çeşitli özellikler ile herhangi bir sitenin sahip olabileceği temel görünüm ve tasarımdan çok daha fazlasına erişmenize şans verir. CSS’nin temel özelliklerine bakacak olursak bunları Display uygulamasının alt kategorilerine ayırmak mümkündür. CSS’deki Display özelliği ile site tasarımı ve kodlaması rahatlıkla istediğiniz şekilde yapabilmeniz mümkündür. Böylelikle elinizdeki site üzerinde yayınlamak üzere her türden çeşitli yazıları, yazıların başlıklarını, menülerini, linklerini vs. istediğiniz yerde ve şekillerde veya görünmez bir şekilde kullanmanızı kolaylaştırır. CSS’de çok sık kullanılan display özelliği inline, block , inline-block ve none olmak üzere toplamda dört alt başlık altında incelenebilir. Bu özelliği sayesinde CSS, kullanıcılarını sadece tek bir alan ve seçeneğe yöneltmez aksine çok daha fazla seçenek sunarak yaratıcı üretimde faaliyet göstermenlerine saha açar.

CSS’de Display: Inline Özelliği Nedir?

CSS’de Display özelliği içerisinde yer alan “inline” değerini açıklamak gerekirse ilk önce kelimenin Tükçe anlamından yola çıkmak çok daha anlaşılır olacaktır. Türkçe’de ‘aynı çizgi düzleminde’ anlamına gelmekte olan inline ile CSS üzerindeki linkleri yan yana dizebilmeniz mümkündür.Bir block elementi gibi davranmadığından genişlik,yükseklik, text-align vb değerleri verilsede fonksiyonel olarak bir işlev kazandırmayacaktır. Inline davranış modelini aslında Span davranış biçimine benzete biliriz.

See the Pen ZGrjro by MinimalCoding (@MinimalCoding) on CodePen.

CSS’de Display: Block Özelliği Nedir?

CSS’deki Display üzerindeki bu değer ile birlikte ise CSS üzerindeki linkleri hiçbir komut vermeden otomatik olarak dizebilmeniz mümkündür. Bunu yaparken diğer değerden farklı olarak tek yapmanız gereken komutu verirken display: inline yerine display: block yazmaktır. Gerisinde verdiğiniz komut işlerlik kazanacaktır.Block verilmiş elementlere genişlik ve yükselik gibi değerleri atayabiliriz. Block özelliği atanmış yapı bir satır gibi davranacağından kendisinden sonra gelen element otomatik olarak bir alt satıra geçicektir.

See the Pen pJaZLp by MinimalCoding (@MinimalCoding) on CodePen.

CSS’de Display: Inline-block Özelliği Nedir?

CSS’de Display “inline-block” değeri adından da anlaşılacağı gibi yapısal davranışı hem “inline” hemde “block” mantığında çalışmaktadır. Aynı çizgi düzleminde yanana dizile bilme özelliğini taşırken block davranış modelleriniden genişlik, yükseklik ve text-align vb yapıları uygulamamız mümkündür. Kısıtlamaları ortadan kaldıran bu özellik ile iki davranış modelinide tek bir çatı altında toplayabiliriz.

 

CSS’de Display: None Özelliği Nedir?

CSS’de Display üzerinden yapabileceğiniz şeyler arasında halkanın son zinciri none’dur. Display’in bu özelliği ile siteniz üzerinde eklediğiniz hiçbir link sayfanızda görünmeyecektir. Kısacası bu değer ‘hiç’ anlamına gelmektedir. Ve site üzerinde hangi uygulamayı yaparsanız yapın görünüm, tasarım ve kodlamalarınızda hiçbir şey gözükmeyecektir. Fakat bu özellik ile ilgili önemli bir noktaya parmak baskmak gerekir. Misal sitenize bir link ekliyorsunuz fakat Display’deki none özelliğini kullanıyorsunuz. Bu doğrultuda eklediğiniz link her ne kadar gözükmese de linkin sitenizin arkaplan rengine dönüştüğü fikrine asla kapılmayın. Link herhangi bir renge dönüşmez, tamamen silinir.