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 */
   }
   

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%;
   }
   

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%;
   }
   

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 */
   }
   

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 */
   }
   

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.