FrmSitesi.Com.TR
Üyelik İşlemleri

CSS Nedir?

admin
admin

CSS (Cascading Style Sheets) Nedir?

CSS (Cascading Style Sheets), HTML belgelerinin görünümünü ve düzenini belirlemek için kullanılan bir stil dilidir. CSS, web sayfalarının tasarımını yapılandırarak yazı tipleri, renkler, boşluklar, kenarlıklar, düzen ve diğer stil özelliklerini kontrol eder. HTML bir web sayfasının yapısını oluştururken, CSS bu yapıya estetik bir görünüm kazandırır.

CSS’in Temel Özellikleri

  1. Ayrıştırılmış Stil ve Yapı:
    • HTML içeriği ile stil tanımlamalarını birbirinden ayırır, bu da kodun daha düzenli olmasını sağlar.
  2. Yeniden Kullanılabilirlik:
    • Bir CSS dosyası birden fazla HTML sayfasında kullanılabilir, böylece kod tekrarı azalır.
  3. Hiyerarşik Yapı:
    • CSS kuralları, belirli bir sıraya göre uygulanır. Bu, “Cascading” (Katmanlı) özelliği olarak adlandırılır.
  4. Platformdan Bağımsız:
    • CSS, herhangi bir tarayıcıda ve cihazda çalışabilir.
  5. Gelişmiş Görsellik:
    • CSS, animasyonlar, geçiş efektleri ve medya sorguları gibi özelliklerle web sitelerine dinamik görsel efektler kazandırır.

CSS’in Kullanım Alanları

  1. Metin Stilleri:
    • Yazı tipi, boyut, renk, satır aralığı gibi metin özelliklerini düzenler.
  2. Sayfa Düzeni:
    • Elemanların yerleşimini belirler (örneğin, blok düzeni, esnek düzen veya ızgara düzeni).
  3. Renk ve Arka Planlar:
    • Renk paletleri, arka plan resimleri veya geçiş renkleri ekler.
  4. Kenarlıklar ve Gölgeler:
    • Elemanlara kenarlıklar ve gölge efektleri ekler.
  5. Medya Uyumlu Tasarım:
    • Farklı ekran boyutlarına uygun tasarımlar oluşturur.
  6. Animasyonlar ve Geçişler:
    • Web sayfasına dinamik ve etkileşimli özellikler kazandırır.

CSS Nasıl Kullanılır?

CSS, üç farklı şekilde HTML ile birlikte kullanılabilir:

  1. Satır İçi (Inline) CSS:
    • CSS, doğrudan HTML etiketinin içinde tanımlanır.
    <p style="color: blue; font-size: 16px;">Bu bir paragraftır.</p>
  2. Dahili (Internal) CSS:
    • CSS, HTML belgesinin <head> bölümünde bir <style> etiketi içinde tanımlanır.
    <style>
    p {
    color: blue;
    font-size: 16px;
    }
    </style>
  3. Harici (External) CSS:
    • CSS kuralları ayrı bir dosyada (.css) tanımlanır ve HTML belgesine bir <link> etiketi ile bağlanır.
    <link rel="stylesheet" href="styles.css">
    /* styles.css */
    p {
    color: blue;
    font-size: 16px;
    }

CSS Temel Yapısı

CSS kuralları, seçiciler (selectors) ve deklarasyon bloklarından oluşur.

p {
color: red; /* Yazı rengi kırmızı */
font-size: 18px; /* Yazı boyutu 18 piksel */
}
  • Seçici (Selector):
    Hangi HTML elemanının hedeflendiğini belirtir (p etiketi).
  • Özellik (Property):
    Değiştirilecek stil özelliği (color ve font-size).
  • Değer (Value):
    Özellik için atanmış değer (red ve 18px).

CSS Seçicileri

CSS’de seçiciler, hangi HTML elemanlarına stil uygulanacağını belirler:

  1. Evrensel Seçici (*):
    • Tüm elemanları seçer.
    * {
    margin: 0;
    padding: 0;
    }
  2. Etiket Seçici:
    • Belirli bir HTML etiketini hedefler.
    h1 {
    color: green;
    }
  3. Sınıf Seçici (.):
    • Belirli bir sınıfa sahip elemanları seçer.
    .kutu {
    border: 1px solid black;
    }
  4. ID Seçici (#):
    • Belirli bir ID’ye sahip elemanları seçer.
    #baslik {
    font-weight: bold;
    }
  5. Grup Seçici (,)
    • Birden fazla seçiciyi gruplayarak aynı stil kurallarını uygular.
    h1, h2, h3 {
    text-align: center;
    }
  6. Çocuk Seçici (>):
    • Belirli bir elemanın doğrudan çocuklarını hedefler.
    div > p {
    color: blue;
    }
  7. Torun Seçici (Boşluk):
    • Belirli bir elemanın tüm alt elemanlarını hedefler.
    div p {
    font-size: 14px;
    }

CSS ile Sayfa Düzeni

  1. Box Model:
    CSS’deki her eleman bir kutu olarak değerlendirilir ve bu kutu şu dört katmandan oluşur:
    • İçerik (Content): Elemanın metni veya görüntüsü.
    • Dolgu (Padding): İçerik ile kenarlık arasındaki boşluk.
    • Kenarlık (Border): Elemanın sınırı.
    • Marjin (Margin): Elemanlar arasındaki boşluk.
    div {
    margin: 10px;
    padding: 20px;
    border: 2px solid black;
    }
  2. Flexbox:
    • Elemanları bir satırda veya sütunda düzenlemek için kullanılır.
    .kapsayici {
    display: flex;
    justify-content: center;
    align-items: center;
    }
    • 2 boyutlu düzen oluşturmak için kullanılır.Grid:
  3. .kapsayici {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    }

Medya Sorguları

Medya sorguları, farklı cihaz boyutlarına göre farklı stiller tanımlamayı sağlar.

@media (max-width: 768px) {
body {
background-color: lightgray;
}
}

CSS’in Avantajları

  1. Esnek ve Güçlü:
    • Web sitelerini farklı cihazlar ve ekran boyutlarına uyumlu hale getirir.
  2. Zaman Tasarrufu:
    • Harici CSS dosyalarıyla birden fazla sayfanın tasarımı kolayca güncellenebilir.
  3. Kullanıcı Deneyimi:
    • Web sitelerine profesyonel ve modern bir görünüm kazandırır.
  4. Performans:
    • CSS, sayfa yükleme süresini optimize edebilir.

CSS’in Dezavantajları

  1. Karmaşıklık:
    • Büyük projelerde, özellikle uzun CSS dosyalarında stil yönetimi zorlaşabilir.
  2. Tarayıcı Uyumsuzlukları:
    • Bazı özellikler eski tarayıcılar tarafından desteklenmeyebilir.
  3. Kapsama Sorunları:
    • Hatalı seçici kullanımı stilin yanlış elemanlara uygulanmasına neden olabilir.

Sonuç

CSS, modern web geliştirme için vazgeçilmez bir araçtır. HTML’in yapısını görsel bir şekilde zenginleştirerek kullanıcı deneyimini geliştirir. CSS ile çalışmak, temel prensiplerin anlaşılmasından ileri düzey özelliklerin öğrenilmesine kadar geniş bir yelpaze sunar. Özellikle Flexbox, Grid ve medya sorguları gibi özellikler, CSS’i esnek ve güçlü bir araç haline getirir.

YAZARIN EKLEMİŞ OLDUĞU YAZILAR
YORUMLAR

Henüz yorum yapılmamış. İlk yorumu yukarıdaki form aracılığıyla siz yapabilirsiniz.

BlueskyBufferHacker NewsMastodonRedditTelegramWhatsApp
Your Mastodon Instance
Share to...
BlueskyBufferCopyFlipboardHacker NewsLineLinkedInMastodonMessengerMixPinterestPocketPrintRedditSMSTelegramThreadsTumblrVKWhatsAppXingYummly