Inline ne demektir?

Web tasarımında sık sık karşınıza çıkabilecek bir diğer tabir de inline olacaktır. Inline 2 anlama sahiptir. Her ikisi de benzer özellikler gösterir.

CSS‘de display:inline şeklinde atanabilen özellik, öğenin block yapısından çıkmasına, bağlı olduğu kod satırındaki diğer öğelerle beraber gözükmesine sebep olur.

HTML‘de ise <style> ve <script> gibi elemanlar sayfa-içi tanımlamalar da inline CSS ve JS olarak gösterilirler.

Şimdi konuyu biraz detaylandıralım.

Inline’ın yukarıda bahsettiğimiz gibi iki anlamı vardır. Fakat HTML içerisindeki style ve script tanımlamaları iyi bir web taslağı için tavsiye edilmez. Örneklerle devam edelim.

Inline CSS

CSS’in display özelliğine inline veya block ifadelerini atayabiliyoruz. Ayrıca bazı elemanlar bu özelliği varsayılan değer olarak taşırlar.

• Block elemanlar : Bu elemanlar display:block özelliğine sahiptir ve ayrı bir satır olarak gözükürler. Örneğin h1 veya div gibi…
• Inline elemanlar : Bu elemanlar display:inline özelliğine sahiptir ve eklendikleri satırda yapıyı bozmadan gözükürler. Örneğin b veya a gibi…

Inline HTML

HTML ismi sizi yanıltmasın. Üzerine konuştuğumuz .html, .htm, .php, veya .asp gibi tüm sayfa yapıları. Bu dosya tiplerinin içerisinde aşağıdaki benzer gördüğünüz kodlar inline olarak tanımlanır.

CSS örneği

<h1 style="color:red;">Kırmızı başlık</h1>

veya

<style>h1{color:red;}</style>

JS örneği

<script>document.getElementById(aw).style.display = "none";</script>

Bu tip sayfa-içi tanımlamalara da inline denilmektedir ve kullanımları önerilmemektedir.

Doğru kullanım

Inline HTML sayfa-içi işlemlerini .js ve .css uzantılı dosyalarda yapmamız gerekiyor.

<h1 style="color:red;">Kırmızı başlık</h1>

yerine

style.css dosyası oluşturup içerisine

h1{color:red;}

yazmalısınız.