CSS'nin Yapısı

***Owner*** · 26-Kasım-2024, 11:30

CSS Nedir?

CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının görsel tasarımını ve düzenini kontrol etmek için kullanılan bir stil dilidir. CSS, web sayfalarına renk, yazı tipi, boşluklar, boyut ve konum gibi stil özellikleri eklemeye olanak tanır. HTML'in yapısal içeriğini ayrı tutarak, web tasarımcılarının sayfa düzenini ve görünümünü daha kolay yönetmesine yardımcı olur.

CSS Yapısı

CSS'in temel yapısı seçiciler (selectors), özellikler (properties) ve değerler (values) gibi üç ana bileşenden oluşur.

Temel CSS Sözdizimi:

HTML Kodu

seçici {          özellik1: değer1;          özellik2: değer2;          ...}

Örnek:

HTML Kodu

p {      color: blue;      font-size: 16px;}

Bu örnekte:

p (seçici): Paragraf elemanlarını hedefler.
color (özellik): Yazı rengini belirler.
blue (değer): Yazının mavi olmasını sağlar.
font-size: 16px özelliği ise paragraf metninin boyutunu 16 piksel yapar.

CSS Bileşenleri:

1. Seçiciler (Selectors)

Seçiciler, hangi HTML elementine stil uygulanacağını belirler.

Temel Seçiciler:
- Element Seçicileri: Belirli bir HTML elemanını hedef alır. (h1, p, div gibi)
- Sınıf Seçicileri: class özelliği ile tanımlanan elementlere stil uygular. (.kutu)
- ID Seçicileri: id özelliğine sahip elementleri hedefler. (#baslik)
Gelişmiş Seçiciler:
- Grup Seçicileri: Aynı stilin birden fazla elemente uygulanmasını sağlar. (h1, h2, p)
- Alt Seçiciler: Belirli bir elemanın altındaki diğer elemanları seçer. (div p)

2. Özellikler (Properties)

HTML elemanının hangi özelliğinin değiştirileceğini belirler. Bazı yaygın CSS özellikleri şunlardır:

Renk ve Yazı Tipi:
- color: Metin rengi
- font-family: Yazı tipi
- font-size: Yazı boyutu
Düzen (Layout):
- margin: Dış boşluklar
- padding: İç boşluklar
- width ve height: Genişlik ve yükseklik
Arkaplan:
- background-color: Arkaplan rengi
- background-image: Arkaplan resmi

3. Değerler (Values)

Özelliklere atanan belirli değerlerdir.

Örneğin:

HTML Kodu

color: red;      /* Renk değeri */font-size: 20px; /* Piksel değeri */

CSS Türleri

CSS stilleri sayfalara üç farklı yöntemle eklenebilir:

Inline CSS (Satır İçi CSS)
- Stil doğrudan HTML elementinin içine eklenir.
HTML Kodu
```
<p style="color: blue;">Bu bir mavi paragraf.</p>
```
Internal CSS (Dahili CSS)
- CSS kuralları <style> etiketi içinde, HTML dosyasının <head> bölümünde tanımlanır.
HTML Kodu
```
<style>    h1 {        color: green;    }</style>
```
External CSS (Harici CSS)
- Stil kuralları ayrı bir dosyada (.css) tanımlanır ve HTML dosyasına bağlanır.
HTML Kodu
```
<link rel="stylesheet" href="stil.css">
```

Cascading (Basamaklı) Yapı Nedir?

CSS, "Cascading" yani "basamaklı" adı verilen bir yapıya sahiptir. Bu, bir elemente birden fazla stil kuralı uygulandığında, hangi stilin geçerli olacağını belirleyen bir sistemdir:

Öncelik sırası:
- Inline CSS (En yüksek öncelik)
- Internal CSS
- External CSS
- Tarayıcı varsayılan stilleri

Konuyu Görüntüleyen Aktif Kullanıcılar: 1 (0 üye ve 1 misafir)

CSS'nin Yapısı

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.