CSS HTML DERSLERİ Web Tasarım

HTML ve CSS ile Basit Bir Web Sayfası Tasarımı -3

Bu makalede   bir başlık, bir menü, bir içerik alanı ve bir alt bilgi (footer) içeren bir sayfa tasarlayacağız. Örneğimizde div yapısı ve bazı CSS özelliklerini kullanarak sayfamızı biçimlendireceğiz.

ornek.html kodlarımız:

Kodlarımızı yazarak tarayıcıda açtığımızda aşağıdaki gibi bir görüntü oluşacaktır.

Şimdi CSS kodlarımızı oluşturarak biçimlendirmemizi yapalım. styles5.css dosyamıza ait kodlar:

Ekran çıktımız aşağıdaki gibi olacaktır.

Açıklamalar:

  1. div Kullanımı:
    • Her bölüm (başlık, menü, içerik, alt bilgi) bir div içine alınmıştır.
    • div etiketi, sayfayı mantıksal bölümlere ayırmak için kullanılır.
  2. CSS Stilleri:
    • headermenucontent, ve footer sınıfları ile her bölümün stilini ayrı ayrı tanımladık.
    • float: left ile menü öğelerini yatay hizaya getirdik.
    • padding ve margin kullanarak içerikler arasında boşluklar oluşturduk.
  3. Responsive Tasarım:
    • width: 80% ve margin: 0 auto ile sayfanın ortalanmasını sağladık.
    • box-shadow ile sayfaya gölge efekti ekledik.

Şimdi CSS kodlarımızı daha detaylı açıklayalım.

1. Genel Stil (Body ve Container)

  • body:
    • font-family: Arial, sans-serif;: Sayfanın yazı tipini Arial olarak belirler. Eğer Arial yoksa, genel sans-serif yazı tipi kullanılır.
    • margin: 0; padding: 0;: Sayfanın kenar boşluklarını ve iç boşluklarını sıfırlar. Bu, sayfanın tarayıcının kenarlarına yapışmasını sağlar.
    • background-color: #f4f4f4;: Sayfanın arka plan rengini açık gri yapar.
  • .container:
    • width: 80%;: Sayfanın genişliğini ekranın %80’i olarak ayarlar.
    • margin: 0 auto;: Sayfayı yatayda ortalar. auto, sol ve sağ kenar boşluklarını eşitler.
    • background-color: #fff;: İçeriğin arka plan rengini beyaz yapar.
    • box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);: Sayfaya hafif bir gölge efekti ekler. Bu, sayfayı daha belirgin hale getirir.

2. Başlık (Header)

  • .header:
    • background-color: #4CAF50;: Başlık bölümünün arka plan rengini yeşil yapar.
    • color: white;: Başlık metninin rengini beyaz yapar.
    • padding: 20px;: Başlık bölümünün iç boşluğunu 20 piksel yapar. Bu, metnin kenarlardan uzak durmasını sağlar.
    • text-align: center;: Başlık metnini ortalar.

3. Menü (Menu)

  • .menu:
    • background-color: #333;: Menü bölümünün arka plan rengini koyu gri yapar.
    • overflow: hidden;: Menü içindeki öğelerin taşmasını engeller.
  • .menu ul:
    • list-style-type: none;: Liste işaretlerini kaldırır (madde işaretleri veya numaralar).
    • margin: 0; padding: 0;: Listenin kenar boşluklarını ve iç boşluklarını sıfırlar.
  • .menu ul li:
    • float: left;: Liste öğelerini yatay hizaya getirir. Bu, menü öğelerinin yan yana sıralanmasını sağlar.
  • .menu ul li a:
    • display: block;: Menü bağlantılarını blok öğe yapar. Bu, tüm alanın tıklanabilir olmasını sağlar.
    • color: white;: Menü bağlantılarının rengini beyaz yapar.
    • text-align: center;: Menü bağlantılarının metnini ortalar.
    • padding: 14px 20px;: Menü bağlantılarının iç boşluğunu ayarlar. Dikeyde 14 piksel, yatayda 20 piksel boşluk bırakır.
    • text-decoration: none;: Menü bağlantılarının altındaki çizgiyi kaldırır.
  • .menu ul li a:hover:
    • background-color: #575757;: Fare menü bağlantısının üzerine geldiğinde arka plan rengini değiştirir.

4. İçerik (Content)

  • .content:
    • padding: 20px;: İçerik bölümünün iç boşluğunu 20 piksel yapar. Bu, metnin kenarlardan uzak durmasını sağlar.

5. Alt Bilgi (Footer)

  • .footer:
    • background-color: #333;: Alt bilgi bölümünün arka plan rengini koyu gri yapar.
    • color: white;: Alt bilgi metninin rengini beyaz yapar.
    • text-align: center;: Alt bilgi metnini ortalar.
    • padding: 10px;: Alt bilgi bölümünün iç boşluğunu 10 piksel yapar.
    • position: relative;: Alt bilgiyi sayfanın altına sabitler.
    • bottom: 0;: Alt bilgiyi sayfanın en altına yerleştirir.
    • width: 100%;: Alt bilgi bölümünün genişliğini sayfanın tamamına yayar.

Özet:

  • div etiketleri, sayfayı mantıksal bölümlere ayırmak için kullanılır.
  • CSS, bu bölümlerin stilini belirler (renk, yazı tipi, boşluklar, hizalama vb.).
  • Responsive tasarım için widthmargin, ve padding gibi özellikler kullanılır.

Yorum yap