CSS ile Sayfa Düzeni (Layout) Oluşturma

CSS ile sayfa düzeni oluşturmak, HTML öğelerini belirli bir düzen içinde düzenlemek ve konumlandırmak anlamına gelir. İşte sayfa düzenini oluşturmak için kullanabileceğiniz bazı temel CSS özellikleri:

1. Position Özelliği:

   • position özelliği, bir öğenin konumunu belirler. Değerler arasında static, relative, absolute, ve fixed bulunur.

   header { position: fixed; /* Sayfanın üstünde sabit bir başlık */ top: 0; left: 0; width: 100%; background-color: #333; color: #fff; padding: 10px; } section { position: relative; /* Diğer içeriklere göre konumlandırılabilir bölüm */ margin-top: 50px; /* Başlığın altına bir boşluk bırak */ } 

   Canlı Dene Kopyala

2. Display Özelliği:

   • display özelliği, bir öğenin görüntülenme şeklini belirler. Değerler arasında block, inline, ve inline-block bulunur.

   div { display: inline-block; /* Öğeleri yan yana sıralar */ width: 30%; margin: 1%; } 

   Canlı Dene Kopyala

3. Float Özelliği:

   • float özelliği, bir öğeyi sayfanın solunda veya sağına konumlandırmak için kullanılır.

   aside { float: right; /* Sayfanın sağında yan tarafta bir kenar çubuğu */ width: 25%; } 

   Canlı Dene Kopyala

4. Flexbox:

   • Flexbox, bir öğeler grubunu düzenlemenin ve hizalamanın modern bir yolunu sağlar.

   .container { display: flex; /* Öğeleri yatayda veya dikeyde sırala */ } .item { flex: 1; /* Flex öğeleri eşit genişlikte paylaştırır */ } 

   Canlı Dene Kopyala

5. Grid:

   • Grid, öğeleri bir ızgara üzerinde düzenlemenin güçlü bir yolunu sağlar.

   .container { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 sütunlu ızgara */ gap: 10px; /* Sütun ve satırlar arasındaki boşluk */ } 

   Canlı Dene Kopyala

Bu özellikler, sayfa düzeninizi oluşturmanız ve öğeleri belirli bir düzene göre konumlandırmanız için kullanışlıdır. Hangi özellikleri kullanacağınız, tasarım hedeflerinize ve ihtiyaçlarınıza bağlıdır.