Neler yeni

CSS Display Kullanımı (Detaylı Anlatım)

Full Nvme SSD Disk Desteği Sayesinde Çok Daha Hızlı Web Siteleri! 7/24 Destek. Ücretsiz Antispam Koruma. Ücretsiz Domain. Anında Aktivasyon
Ad
ZEKİ
Soyad
AYGÜN
Katılım
18 Ocak 2019
Konum
Yalova
Konular
777
Mesajlar
2,933
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Webmaster & SEO
Detay  
Meslek
Webmaster & SEO
Tecrübe
12 Yıl
Uzmanlık alanları
Web tasarım, PHP, SEO, Seslendirme, Video montaj
İş referanslarım
youtube.com/channel/UC0EKnd0EWBefw9Wrqw_wrAA
Üyelik tipi
  1. Bireysel
Enpara   Hesap
ZEKİ AYGÜN
HESAP NO; 1237-0056746
ŞUBE: DOSAB BURSA
İBAN: TR69 0004 6012 3788 8000 0567 46
Enpara   Hesap
ZEKİ AYGÜN
HESAP NO: 497-6640783
ŞUBE: GEMLİK
İBAN: TR60 0006 2000 4970 0006 6407 83
Photoshop   Photoshop
  1. Orta düzey
    50%
İllüstratör   İllüstratör
  1. Başlangıç düzeyi
    30%
İllüstratör   UI / UX tasarım
  1. İleri düzey
    90%
PHP   PHP
  1. Orta düzey
    50%
PHP   CSS3
  1. İleri düzey
    90%
PHP   JavaScript
  1. Orta düzey
    50%
Web sitelerini oluşturmaya başlamak için, belge içinde yer alan farklı içerik öğelerini, sayfa akışını oluşturabilmek içinse hangi HTML öğelerinin ne şekilde görüntülendiği hakkında biraz bilgi sahibi olmamız gerekir.

Web tarayıcıları her HTML öğesini bir kutu gibi ele almaktadır. Ancak bu tarayıcılar öğelerin anlam doğası gereği, tüm kutuları aynı şekilde sayfanıza yerleştirmezler. Her HTML öğesinin, kendi türüne bağlı olarak varsayılan bir görüntüleme değeri vardır.

Çoğu öğenin varsayılan görüntü değeri block veya inline şeklindedir:

  • Block Level : Blok Seviyesi Etiketler
  • Inline Level : Satır İçi Etiketler
Blok Seviyesi Etiketler
Bir blok düzeyi eleman her zaman yeni bir satıra başlar ve mevcut olan tüm satır genişliği alır. (mümkün olduğunca sola ve sağa doğru uzanır) Bir blok, diğerinin üstünde istiflenir ve mevcut genişliği tamamen işgal eder. Blok düzeyindeki öğeler birbirinin içine yerleştirilebilir ve satır içi düzeydeki öğeleri sarabilir. Çoğu zaman, paragraflar gibi daha büyük içerik parçaları için kullanılan blok düzeyinde öğeler görürüz.

div-1.png


Blok Seviyeli öğelerden bazıları aşağıda listelenmiştir.

  • <div>
  • <hx>
  • <p>
  • <table>
  • <ul>,<ol>,<dl>,<li>
  • <form>
  • <header>
  • <footer>
  • <section>
Satır İçi Etiketler
Satıriçi bir öğe yeni bir satıra başlamaz. Bir belgenin normal akışına girer, birbiri ardına sıralanırlar ve yalnızca kendi içeriğinin genişliğini korurlar. Satıriçi düzeydeki öğeler birbirinin içine yerleştirilebilir; Ancak, blok düzeyindeki öğeleri kaydıramazlar.

1581548303367.png

Satır içi öğelerden bazıları aşağıda listelenmiştir.

  • <a>
  • <img>
  • <span>
  • <strong>
  • <em>
display Özelliği
CSS display özelliği bir öğenin nasıl görüntüleneceğini belirtir. Sayfanın akışı HTML öğelerinin yerleşimi ile olur. Belirtildiği gibi, her öğenin varsayılan görüntü değeri vardır. Ancak özgün tasarımlarımızı yapabilmek için öğelerin bu varsayılan görüntü değerlerini değiştirmemiz gerektiği durumlar olabilir. Böyle durumlarda display özelliği kullanılarak örneğin satır içi bir öğeyi bir blok öğesine veya tersine değiştirme, sayfayı belirli bir şekilde görünmesi için yararlı olabilir. display özelliğinin alabileceği değerler aşağıda verilmiştir.

  • none
  • inline
  • block
  • inline-block
display : inline;
Blok seviyeli öğelere uyguladığınızda satır içi davranışı gösterirler.

Örnek;

En yaygın örnek, <li>ile yatay menüler için satır içi öğeler hazırlamaktır; Aşağıdaki gibi bir CSS ile <li> öğeleri kullanarak basit bir menü yapabilirsiniz.

Kod:
<!DOCTYPE html>
<html>
<head>
<style>
    li {
        display: inline;
    }
</style>
</head>
<body>

<p>CSS Display ile menü yapabilirsiniz</p>

<ul>
  <li><a href="webien.net" target="_blank">HTML</a></li>
  <li><a href="webien.net" target="_blank">CSS</a></li>
  <li><a href="webien.net" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

<li> öğeleri normal görüntüleme değeri blok yapıdadır. Bu yüzden standart olarak <li> alt alta sıralanırlar. Blok oldukları için her bir <li>öğesi yeni satırda başlar. Ancak display özelliğine inline değeri vererek <li> etiketini satır içi duruma getirebilirsiniz. Aşağıdaki ekran çıktısında görüldüğü üzere öğeler satır içi davranış gösterecek ve yan yana sıralanacaklardır.

menu.png


display : block;
Satır içi HTML öğelere uyguladığınızda sayfa akışı içinde blok seviyeli öğeler gibi davranış gösterirler.

Örnek;

Aşağıdaki örnek, <a> öğelerini blok öğeleri olarak görüntüler:

Kod:
<!DOCTYPE html>
<html>
<head>
<style>
    a {
        display: block;
    }
</style>
</head>
<body>

<p>CSS Display Kullanımı</p>

<a href="webien.net" target="_blank">HTML</a>
<a href="webien.net" target="_blank">CSS</a>
<a href="webien.net" target="_blank">JavaScript</a>

</body>
</html>

1581548401204.png


display : none;
HTML öğelerini, silinmeden veya yeniden oluşturmadan, gizlemek veya göstermek için genellikle JavaScript ile sıklıkla kullanılır. Bir öğeyi gizlemek için “display:none” CSS bildirimini kullanmanız yeterlidir. Öğe gizlenecek ve sayfanız, öğe yokmuş gibi görüntülenecektir.

Örnek;

Kod:
<!DOCTYPE html>
<html>
<head>
<style>
    h1.hidden {
        display: none;
    }
</style>
</head>
<body>

<h1>CSS display kullanımı</h1>
<h1 class="hidden">Bu Gizli Bir Başlıktır.</h1>
<p>Bu belgede bir başlık bulunmaktadır. Ancak onu görememektesiniz.</p>

</body>
</html>

1581548447022.png


Örnek;

Aşağıdaki örneğimizde display özelliğini Javascript ile kontrol ederek, tıklamayla bir öğeyi göstermek için CSS ve JavaScript’in nasıl kullanılacağını göstermektedir.

Kod:
<!DOCTYPE html>
<html>
<head>
<style>
#panel , .buton{
    font-size: 16px;
    padding: 10px;
    text-align: center;
    background-color: #33c1ff;
    color: white;
    border: solid 1px #000000;
    margin: auto;
}

#panel {
    display: none;
}
</style>
</head>
<body>

    <p class="buton" onclick="myFunction()">Panel'e Tıklayınız</p>

    <div id="panel">
        <h3>Lorem Ipsum Nedir?</h3>
      <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
    </div>

<script>
    var i=0;
    function myFunction() { 
        i++;
        if(i%2==0){
        document.getElementById("panel").style.display = "block";}
        else{
        document.getElementById("panel").style.display = "none";
        }
    }
</script>

</body>
</html>

panel.gif


display : inline-block;
Bir öğeyi hem blok hem de satır içi eleman gibi hareket ettirebilirsiniz. Satır içi blok ayarı, bir öğenin her iki şekildeki görüntülenme etkilerine sahip olduğunu ifade eder. Bu özellik aslen satır içi gibi davranması istenen bir elemanın sahip olamayacağı margin, padding, width, height gibi özelliklerin işlevsel hale gelebilmesini sağlamaktadır. Bir örnekle inceleyelim;

Örnek;

Kod:
<!DOCTYPE html>
<html>
<head>
<style>
    span.bir{
        background-color: chartreuse;
        border: 1px solid green;
        margin: 20px;     
    }
  
    span.iki{
        background-color: green;
        border: 1px solid green;
        margin: 20px;
        padding: 20px;
    } 
  
    span.uc{
        background-color: mediumaquamarine;
        border: 1px solid green;
        margin: 20px;
        padding: 20px;
        width: 100px;
        height: 100px;
    } 
  
    span.dort{
        display: inline-block;
        background-color: red;
        border: 1px solid green;
        margin: 20px;
        padding: 20px;
      
    } 
  
</style>
</head>
<body>
  
    <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. <span class="bir">Beşyüz yıl boyunca</span>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
  
    <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. <span class="iki">Beşyüz yıl boyunca</span>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
  
    <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. <span class="uc">Beşyüz yıl boyunca</span>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
  
    <p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. <span class="dort">Beşyüz yıl boyunca</span>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
  
</body>
</html>

1581548591764.png


Yukarıdaki örnek incelendiğinde, bir paragrafın içinde satır içi olarak bilinen <span> öğesine margin, padding, width, height özelliklerini CSS ile değiştirmeye çalıştığımızda uygun davranışlarda bulunmadığı, ancak bu durumun son paragrafta display özelliğine inline-block değeri verilerek, hem satır içi kalması hem de bir blok öğesi gibi stilden etkilenmesi sağlanmıştır.

Örnek;

display Özelliği kullanarak sayfa düzeni yapmak mümkündür.

Kod:
<!DOCTYPE html>
<html>
<head>
<style>
    code {
      background: #2db34a;
      border-radius: 6px;
      color: #fff;
      display: block;
      font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
      padding: 24px 15px;
      text-align: center;
    }
    header,
    section,
    aside,
    footer {
      margin: 0 1.5% 24px 1.5%;
    }
    section {
      display: inline-block;
      width: 30%;
    }
    footer {
      margin-bottom: 0;
    }
  
</style>
</head>
<body>
  
    <header>
        <code>&#60;header&#62;</code>
    </header>

    <section>
      <code>&#60;section&#62; <br> display: <br> inline-block;</code>
    </section><section>
      <code>&#60;section&#62; <br> display: <br> inline-block;</code>
    </section><section>
      <code>&#60;section&#62; <br> display: <br> inline-block;</code>
    </section>

    <footer>
      <code>&#60;footer&#62;</code>
    </footer>
</body>
</html>

1581548654644.png


alıntı
 

Ekli dosyalar

  • 1581547744437.png
    1581547744437.png
    3.8 KB · Görüntüleme: 162
  • 1581548496897.png
    1581548496897.png
    4.7 KB · Görüntüleme: 168
Son düzenleme:

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.