Mobil Menü

Osman BAYRAK ile CSS Dersleri

Konu Başlıkları

1. CSS’e Giriş ve Yapı Taşları

CSS (Cascading Style Sheets), HTML ile oluşturduğumuz içeriklerin görsel olarak düzenlenmesini sağlayan bir stil dilidir. HTML yapısı ile web sayfalarının içeriği oluşturulurken, CSS sayesinde bu içeriklerin renkleri, yazı tipleri, boyutları, konumlandırmaları ve daha birçok özelliği düzenlenir. CSS kullanarak web sitelerini daha ilgi çekici, kullanıcı dostu ve mobil uyumlu hale getirebiliriz.

1.1. CSS’in Temel Yapısı

CSS kuralları “seçici” ve “bildirim bloğu” olmak üzere iki temel bileşenden oluşur. CSS’in temel yapısını şöyle gösterebiliriz:

seçici {
    özellik: değer;
}
body {
    background-color: #f0f0f0;
    color: #333;
}

Yukarıdaki örnekte body bir seçicidir ve arka plan rengi ile metin rengi belirtilmiştir. Her özellik, özellik: değer; formatında tanımlanır.

1.2. CSS Dosyasının HTML’e Eklenmesi

CSS’i HTML dosyalarına üç farklı şekilde dahil edebiliriz:

  1. Satır içi (Inline) CSS: Tek bir HTML elemanına özel stil tanımlamak için kullanılır. style özniteliği ile eklenir.
<h1 style="color: blue;">Merhaba Dünya</h1>

2. Dahili (Internal) CSS: HTML dosyasının <head> bölümüne <style> etiketi ile eklenir. Küçük ölçekli projelerde veya sadece bir sayfada geçerli stiller için uygundur.

<style>
    p {
        color: white;
        font-size: 20px;
    }
</style>

3. Harici (External) CSS: Büyük projelerde tavsiye edilen yöntemdir. Stil kodları ayrı bir .css dosyasında saklanır ve HTML’e <link> etiketi ile eklenir.

<link rel="stylesheet" href="styles.css">

styles.css dosyasının içeriği şöyle olabilir:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

1.3. CSS Seçiciler

Seçiciler, HTML’deki elemanları hedefleyerek bunlara stil uygulamamızı sağlar. En sık kullanılan CSS seçicileri şöyle sıralanabilir:

  • Evrensel Seçici (*): Tüm HTML elemanlarını hedef alır.
* {
    margin: 0;
    padding: 0;
}

Element Seçici: Belirli bir HTML elementini hedefler.

p {
    font-size: 16px;
}

Sınıf Seçici (.sınıf-adı): Birden fazla elemente uygulanabilen seçicidir.

.ana-baslik {
    color: blue;
}

ID Seçici (#id-adı): Benzersiz bir elemanı hedefler.

#footer {
    background-color: #333;
    color: white;
}

Ayrıntılı Seçiciler: Belirli bir hiyerarşiye sahip elemanları hedefleyebiliriz.

  • Çocuk Seçici (>): Doğrudan çocuk elemanları seçer.
div > p {
    color: purple;
}

Genel Çocuk Seçici (): Belirtilen tüm alt elemanları seçer.

div p {
    font-style: italic;
}

Komşu Seçici (+): Belirli bir elemanın hemen sonrasındaki elemanı seçer.

h1 + p {
    color: gray;
}

1.4. CSS Özellikleri ve Değerleri

Her CSS özelliği, belirli bir HTML elemanına farklı bir özellik eklemek için kullanılır. En çok kullanılan bazı CSS özellikleri şunlardır:

  • color: Metin rengini belirler.
  • background-color: Arka plan rengini ayarlar.
  • font-size: Yazı tipi boyutunu ayarlar.
  • margin: Elemanın dış boşluğunu ayarlar.
  • padding: Elemanın iç boşluğunu ayarlar.
  • border: Elemanın kenarını tanımlar.

Örnek:

p {
    color: #555;
    font-size: 18px;
    margin: 10px 0;
    padding: 5px;
    border: 1px solid #ddd;
}

Bu örnekte, tüm <p> elemanları için bir metin rengi, yazı tipi boyutu, dış boşluk, iç boşluk ve kenarlık belirlenmiştir.

2. Renkler ve Yazı Tipleri

Web sitelerinin görünümünde renkler ve yazı tipleri oldukça önemlidir. CSS, metin ve arka plan renklerinden yazı tipi stillerine kadar görsel öğelerin kişiselleştirilmesine olanak tanır.

2.1. Renkler

CSS’de renkleri belirlemenin birkaç farklı yolu vardır. Renkler isim, RGB, HEX, HSL değerleri veya rgba, hsla gibi şeffaflık (alpha) seçenekleri ile tanımlanabilir.

  • Renk İsimleri: CSS, kullanımı kolay renk isimleri sunar. Örneğin, red, blue, green.
h1 {
    color: blue;
}

HEX Kodları: Renklerin onaltılık değerle tanımlanmasıdır. #RRGGBB formatında yazılır.

body {
    background-color: #f0f0f0;
}

RGB ve RGBA: RGB, renkleri kırmızı, yeşil ve mavi bileşenleriyle tanımlar. RGBA, renk şeffaflığını da içerir (0 tamamen şeffaf, 1 tamamen opak).

p {
    color: rgba(255, 0, 0, 0.5); /* Yarı saydam kırmızı */
}

HSL ve HSLA: HSL renkleri ton, doygunluk ve aydınlıkla tanımlar. HSLA’da şeffaflık da eklenir.

div {
    background-color: hsla(120, 60%, 70%, 0.8); /* Yarı saydam yeşil ton */
}

2.2. Yazı Tipleri

CSS ile yazı tipi ailesi, boyutu, kalınlığı ve stili gibi özellikler kolayca düzenlenebilir.

  • Font-Family: Yazı tipi ailesini belirler. Sistem yazı tipleri veya Google Fonts gibi harici yazı tipleri kullanılabilir.
p {
    font-family: Arial, sans-serif;
}

Font-Size: Yazı tipi boyutunu belirler. px, em, rem, % gibi birimler kullanılabilir.

h2 {
    font-size: 24px;
}
  • em ve rem kullanımı: em birimi, mevcut yazı tipi boyutunun katlarını temsil ederken, rem kök (root) boyutu temel alır.

Font-Weight: Yazının kalınlığını belirler (normal, bold, lighter, bolder veya sayı değeri olarak 100 ile 900 arasında).

strong {
    font-weight: bold;
}

Font-Style: Yazının stilini tanımlar (normal, italic, oblique).

em {
    font-style: italic;
}

Line-Height ve Letter-Spacing: Satır yüksekliği (line-height) ve harf aralığını (letter-spacing) belirler.

body {
    line-height: 1.6;
    letter-spacing: 0.05em;
}

2.3. Yazı Tiplerini Harici Kaynaklardan Eklemek

Google Fonts gibi harici kaynaklardan yazı tipi eklemek için <link> etiketini HTML’e ekleyip font-family özelliği ile kullanabiliriz.

Örneğin, “Roboto” yazı tipini kullanmak için HTML’e şu bağlantıyı ekleriz:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

CSS’de yazı tipi ailesi olarak tanımlayabiliriz:

body {
    font-family: 'Roboto', sans-serif;
}

3. Kutu Modeli

CSS Kutu Modeli (Box Model), HTML elemanlarının ekran üzerindeki yerleşim ve boyutlandırma kurallarını içerir. Her HTML öğesi bir kutu olarak kabul edilir ve bu kutunun bileşenleri margin, border, padding ve content alanıdır.

3.1. Kutu Modeli Bileşenleri

  • Content (İçerik): Asıl içeriğin bulunduğu alandır.
  • Padding (Dolgu): İçerik ile kenarlık arasındaki boşluktur. Arka plan rengi padding ile birlikte genişler.
  • Border (Kenarlık): Kutunun etrafındaki çizgidir. Kalınlık, renk ve stil ayarlanabilir.
  • Margin (Dış Boşluk): Kutuyu çevresindeki diğer elemanlardan ayırır.

Örnek: Kutu Modeli

.box {
    width: 200px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
    background-color: lightblue;
}

Bu örnek, aşağıdaki bileşenleri içerir:

  • İçerik alanı genişliği: 200px
  • Dolgu: 10px (her yönden)
  • Kenarlık kalınlığı: 2px
  • Dış boşluk: 20px

3.2. box-sizing Özelliği

Varsayılan olarak, width ve height yalnızca içerik alanını kapsar. Ancak box-sizing: border-box; kullanıldığında, dolgu ve kenarlık dahil olur. Bu özellik, karmaşık düzenlerde daha tutarlı sonuçlar elde etmek için sıklıkla kullanılır.

.box {
    box-sizing: border-box;
    width: 200px;
    padding: 10px;
    border: 2px solid black;
}

box-sizing: border-box; kullanarak kutu genişliği 200px olarak sabit kalırken, dolgu ve kenarlık da bu alana dahil olur.

4. Yerleşim Düzenleri ve Pozisyonlandırma

CSS ile web sayfalarındaki öğelerin konumlandırılması oldukça önemlidir. Web tasarımında farklı elemanları ekran üzerinde düzenlemek için çeşitli CSS pozisyonlandırma yöntemleri bulunur.

4.1. Pozisyonlandırma Yöntemleri

  • Static (Statik): Varsayılan pozisyonlandırmadır. Elemanlar belgedeki akışa göre sıralanır.
div {
    position: static;
}

Relative (Göreli): Eleman, normal akışında kalır ancak kendisine göre kaydırılabilir.

div {
    position: relative;
    top: 10px;
    left: 20px;
}

Absolute (Mutlak): Eleman normal akıştan çıkar, en yakın relative konumlu üst elemana göre yerleşir.

div {
    position: absolute;
    top: 50px;
    right: 30px;
}

Fixed (Sabit): Eleman, pencere görünümüne göre sabitlenir. Kaydırma ile yer değiştirmez.

div {
    position: fixed;
    bottom: 0;
    right: 0;
}

Sticky (Yapışkan): Eleman, belirli bir noktada ekrana yapışır ve kaydırıldığında konumunu korur.

div {
    position: sticky;
    top: 0;
}

4.2. Flexbox ve Grid Düzenleri

Modern CSS düzenleme teknikleridir. Flexbox tek boyutlu (satır veya sütun) düzenler için kullanılırken, Grid iki boyutlu (satır ve sütun) düzenler sağlar.

  • Flexbox: Esnek bir yapıya sahip olduğundan elemanların yerleşimlerini ekran boyutuna göre otomatik olarak düzenler.
.container {
    display: flex;
    justify-content: space-between;
}

Grid: Satır ve sütunlar üzerinde detaylı düzenlemeler yapmamızı sağlar.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

Flexbox ve Grid, daha duyarlı ve esnek düzenler oluşturmak için güçlü araçlardır. İlerleyen bölümlerde bu konuları daha ayrıntılı inceleyeceğiz.

5. Flexbox Düzeni

Özellikle karmaşık düzenlerde kullanılabilen ve kutu modelini esnek bir şekilde düzenlemeye olanak tanıyan bir CSS modülüdür. Flexbox, elemanların bir konteyner içinde esnek bir biçimde hizalanmasını ve aralarındaki boşluğun dinamik olarak ayarlanmasını sağlar. Flexbox ile, düzenlerin ekrana duyarlı (responsive) olmasını sağlamak oldukça kolaydır.

5.1. Flex Container ve Flex Items

Bir Flexbox düzeni oluşturmak için önce bir flex container (esnek kapsayıcı) tanımlarız. Kapsayıcıya display: flex; özelliği uygulandığında, içindeki elemanlar flex item olarak davranmaya başlar.

.container {
    display: flex;
}

5.2. Flexbox Özellikleri

Flexbox kullanarak elemanları düzenlemek için birkaç temel özellik vardır. Bunlar:

  • flex-direction: Flex öğelerinin kapsayıcı içinde nasıl sıralanacağını belirler. Dört değeri vardır:
    • row: Varsayılan. Elemanlar yatay olarak sıralanır.
    • row-reverse: Elemanlar ters yönde yatay olarak sıralanır.
    • column: Elemanlar dikey olarak sıralanır.
    • column-reverse: Elemanlar ters yönde dikey olarak sıralanır.
.container {
    flex-direction: row;
}

justify-content: Ana eksende (main axis) elemanların hizalanmasını belirler. Örneğin:

  • flex-start: Başlangıçta hizalar.
  • flex-end: Sonda hizalar.
  • center: Ortada hizalar.
  • space-between: Elemanlar arasında boşluk bırakır.
  • space-around: Elemanların çevresinde eşit boşluk bırakır.
.container {
    justify-content: space-between;
}

align-items: Çapraz eksende (cross axis) elemanların hizalanmasını belirler. Kullanılan değerler:

  • flex-start: Üstte hizalar.
  • flex-end: Altta hizalar.
  • center: Ortada hizalar.
  • stretch: Elemanları esnetir ve kapsayıcının yüksekliğine uyar.
  • baseline: Elemanları metin taban çizgisine hizalar.
.container {
    align-items: center;
}

flex-wrap: Flex elemanların tek satır yerine birden fazla satırda sıralanmasını sağlar. nowrap, wrap, ve wrap-reverse gibi değerleri alabilir.

.container {
    flex-wrap: wrap;
}

5.3. Flex Item Özellikleri

Flex container içindeki her elemanın (flex item) kendine özel özellikleri de vardır:

  • flex-grow: Elemanın, kapsayıcı içinde ne kadar genişleyeceğini belirtir. 0 değeriyle eleman sabit kalır, 1 ve üstü değerlerle genişler.
.item {
    flex-grow: 1;
}

flex-shrink: Elemanın kapsayıcıda daralma oranını belirtir. 0 değeriyle eleman daralmaz, 1 ve üstü değerlerle daralır.

.item {
    flex-shrink: 1;
}

flex-basis: Elemanın başlangıç genişliğini belirler. width özelliğine benzer, ancak flex düzenlerinde daha kullanışlıdır.

.item {
    flex-basis: 200px;
}

5.4. Flexbox ile Örnek Düzen

Bir flex container oluşturarak içine birkaç öğe ekleyelim ve özelliklerini ayarlayalım.

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    background-color: #eee;
}

.item {
    flex-grow: 1;
    margin: 5px;
    padding: 20px;
    background-color: #ccc;
    text-align: center;
}

Bu örnekte, üç flex item kapsayıcı içinde yer alır. justify-content: space-between; özelliği sayesinde, her item arasında boşluk bırakılır.

6. Grid Düzeni

CSS Grid, daha karmaşık ve iki boyutlu (satır ve sütun) yerleşim düzenleri oluşturmak için kullanılan güçlü bir sistemdir. Flexbox gibi esnek olmasına ek olarak, satır ve sütunlarla sayfa yapısını organize etmek için idealdir.

6.1. Grid Container ve Grid Items

Grid düzeni oluşturmak için bir konteynıra display: grid; özelliği uygulanır. Bu konteynerin içinde yer alan her eleman, grid item olarak adlandırılır.

.grid-container {
    display: grid;
}

6.2. Satır ve Sütun Tanımlama

  • grid-template-columns ve grid-template-rows: Satır ve sütunların genişlik ve yüksekliklerini belirler. px, %, fr gibi birimler kullanılabilir.
    • fr (fraction) birimi, boşlukları orantılı olarak bölmek için kullanılır.
.grid-container {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 100px 200px;
}

Bu örnekte, ilk sütun toplam genişliğin 1/3’ünü, ikinci sütun ise 2/3’ünü kaplayacak şekilde ayarlanır.

grid-gap veya gap: Grid hücreleri arasındaki boşlukları ayarlamak için kullanılır.

.grid-container {
    gap: 20px;
}

6.3. Grid Item Yerleşimi

Grid item’ların belirli bir alana yerleştirilmesini sağlamak için grid-column ve grid-row özellikleri kullanılır.

  • grid-column: Grid item’ın yatayda hangi sütunları kapsayacağını belirtir.
    • grid-column: 1 / 3; ile 1. sütundan başlayıp 3. sütuna kadar uzanır.
  • grid-row: Grid item’ın dikeyde hangi satırları kapsayacağını belirtir.
.item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

6.4. Grid Alanları (Grid Areas)

Grid düzenlemede belirli alanlar tanımlamak için grid-template-areas özelliği kullanılır. Bu yöntemle, grid yapısında anlamlı alan isimleri belirleyebiliriz.

.grid-container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: lightcoral;
}

.sidebar {
    grid-area: sidebar;
    background-color: lightblue;
}

.content {
    grid-area: content;
    background-color: lightgreen;
}

.footer {
    grid-area: footer;
    background-color: lightgray;
}

HTML yapısında ise alanlar belirtilir:

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

Bu düzen, ekran genişliğine göre kolayca uyum sağlar ve esnek bir yapıya sahiptir.

7. Medya Sorguları ile Duyarlı Tasarım (Responsive Design)

Medya sorguları, cihazın ekran genişliği veya çözünürlüğüne göre CSS kurallarının uygulanmasını sağlar. Böylece mobil, tablet ve masaüstü gibi farklı ekran boyutlarında uyumlu tasarımlar elde edebiliriz.

7.1. Temel Medya Sorgusu Yapısı

Medya sorguları @media anahtar kelimesi ile başlar ve belirli koşullara bağlı olarak CSS kurallarını uygular.

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

Bu örnekte, ekran genişliği 768px veya daha az olduğunda body yazı tipi boyutu 14px olur.

7.2. Yaygın Medya Sorgusu Örnekleri

  • Mobil Cihazlar İçin (max-width: 600px)
  • Tablet Cihazlar İçin (max-width: 768px)
  • Daha Büyük Ekranlar İçin (min-width: 1024px)
/* Mobil cihazlar */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

/* Tablet cihazlar */
@media (max-width: 768px) {
    .container {
        flex-direction: row;
        justify-content: center;
    }
}

/* Masaüstü ve daha geniş ekranlar */
@media (min-width: 1024px) {
    .container {
        justify-content: space-between;
    }
}

Medya sorgularıyla web sitenizin her cihazda en iyi şekilde görüntülenmesini sağlayabilirsiniz.

8. Animasyonlar ve Geçişler

CSS ile animasyonlar ve geçiş efektleri kullanarak web sitenizde dinamik bir kullanıcı deneyimi sunabilirsiniz. Animasyonlar, belirli bir zaman aralığında görsel değişiklikler yapmak için kullanılırken, geçişler (transitions) CSS özelliklerinde gerçekleşen değişimleri yumuşak bir geçişle gösterir.

8.1. Geçişler (Transitions)

CSS geçişleri, bir CSS özelliğinde yapılan değişikliklerin yavaşça gerçekleşmesini sağlar. Böylece kullanıcı etkileşimine daha akıcı bir tepki sunulur.

  • transition: Geçiş özelliklerini tanımlar. Süre, geçiş eğrisi ve gecikme gibi parametreler içerir.
.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}
  • Bu örnekte, .button sınıfındaki buton üzerine gelindiğinde (hover), arka plan rengi 0.3s sürede yavaşça darkblue rengini alır.
  • Geçiş Parametreleri:
    • duration (süre): Geçişin ne kadar süreceğini belirtir (0.3s, 1s vb.).
    • timing-function (eğri): Geçişin hızını kontrol eder. Örneğin, ease, linear, ease-in, ease-out.
    • delay (gecikme): Geçişin ne kadar bekleyeceğini ayarlar.

8.2. Animasyonlar (Animations)

Animasyonlar, CSS ile daha karmaşık ve çok aşamalı geçişler oluşturmaya olanak tanır. Bir animasyon oluşturmak için @keyframes kullanılır.

  • @keyframes: Animasyonun her aşamasını tanımlar. % veya from ve to anahtar kelimeleri ile animasyon aşamaları belirtilebilir.
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

animation: Bir elemente animasyonu uygulamak için kullanılır. Süre, tekrarlama sayısı, animasyonun yönü gibi özellikleri içerir.

.fade-box {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    animation: fadeIn 2s ease-in-out forwards;
}
  • Animasyon Parametreleri:
    • duration (süre): Animasyonun çalışma süresi (2s, 5s vb.).
    • timing-function (eğri): Animasyonun hız eğrisi (ease, linear).
    • delay (gecikme): Animasyonun başlaması için bekleme süresi.
    • iteration-count (tekrarlama sayısı): Animasyonun kaç kez tekrarlanacağını ayarlar (infinite ile sürekli).
    • direction: Animasyonun yönünü belirler (normal, reverse, alternate).

Örnek: Bir Elemanı Döndürme ve Şeffaflaştırma

@keyframes rotateAndFade {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg);
        opacity: 0.5;
    }
    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

.animated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: rotateAndFade 3s infinite;
}

Bu örnekte, .animated-box elemanı 3 saniyede 360 derece dönerken şeffaflık değişimi de gerçekleşir. Animasyon, infinite ile sürekli olarak tekrarlanır.

9. CSS Değişkenleri (CSS Variables)

CSS değişkenleri, belirli bir değeri saklayıp bunu stil sayfasında tekrar kullanmayı sağlar. Bu özellik, büyük projelerde stil tutarlılığını korumayı ve temaya dayalı tasarımları yönetmeyi kolaylaştırır.

9.1. CSS Değişken Tanımlama ve Kullanma

CSS değişkenleri -- ile başlar ve :root seçicisiyle global olarak tanımlanabilir. Değişkenleri kullanmak için var() işlevi kullanılır.

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --padding: 10px;
}

.button {
    background-color: var(--primary-color);
    padding: var(--padding);
}

.button:hover {
    background-color: var(--secondary-color);
}

Bu örnekte, --primary-color, --secondary-color ve --padding adında üç değişken tanımlanır ve var() ile kullanılır. Bu yaklaşım, renk veya boyut değişikliklerini yalnızca bir yerden yaparak tüm stil dosyasında uygulamayı sağlar.

9.2. Değişkenlerde Varsayılan Değer Kullanımı

Bir değişken kullanılabilir olmadığında varsayılan bir değer tanımlamak için var(--değişken, varsayılan) formatı kullanılabilir.

.button {
    color: var(--text-color, black);
}

Burada --text-color değişkeni tanımlanmazsa, metin rengi otomatik olarak black olur.

10. CSS ile Duyarlı Görseller ve Arka Planlar

Görseller ve arka planlar, CSS kullanılarak duyarlı hale getirilebilir. Bu, farklı ekran boyutlarına göre görsel öğelerin uyum sağlamasına yardımcı olur.

10.1. Duyarlı Görseller

Görsellerin duyarlı olması için %, vw, veya max-width gibi değerlerle genişlik ayarlanabilir.

img {
    width: 100%;
    height: auto;
    max-width: 600px;
}

Bu kod, görselin genişliğini her zaman kapsayıcının genişliğine göre ayarlar ve 600px genişliği geçmemesini sağlar.

10.2. Arka Plan Özellikleri

  • background-size: Arka plan görüntüsünün boyutunu belirler. cover, contain gibi değerler alır.
    • cover: Arka planı tüm kapsayıcıya sığdırır, en-boy oranını korur.
    • contain: Görüntünün tamamını sığdırır, boş alan bırakabilir.
.banner {
    background-image: url('background.jpg');
    background-size: cover;
}

background-position: Arka plan görüntüsünün konumunu ayarlar (center, top, right gibi).

background-repeat: Arka planın tekrar edilip edilmeyeceğini belirler (repeat, no-repeat, repeat-x, repeat-y).

11. CSS İpuçları ve İyi Uygulamalar

CSS kullanırken kodun düzenlenebilirliğini, bakımını ve performansını artırmak için bazı iyi uygulamalara dikkat etmek önemlidir.

11.1. Sadelik

Karmaşık CSS yazmaktan kaçının. Gereksiz veya birbiriyle çelişen stil kuralları, sayfa yükleme süresini artırabilir ve tarayıcı üzerinde ek yük oluşturabilir.

11.2. Sınıf İsimlendirme

BEM (Block Element Modifier) gibi isimlendirme kurallarını kullanmak, özellikle büyük projelerde stil yönetimini kolaylaştırır. BEM yöntemi ile her sınıfın bir yapısı olur, bu sayede tekrar eden stil hataları azalır.

/* BEM yapısı örneği */
.card {
    /* Ana blok */
}

.card__title {
    /* Alt eleman */
}

.card--highlight {
    /* Durum değişikliği */
}

11.3. Sıkıştırma ve Minify İşlemleri

Canlı ortamda kullanılacak CSS dosyalarını sıkıştırarak (minify) dosya boyutunu küçültmek, sitenin performansını artırır.

11.4. Tarayıcı Uyumluluğu

Tarayıcıların CSS özelliklerini farklı yorumlayabileceğini unutmayın. -webkit-, -moz- gibi önekleri kullanarak tarayıcı uyumluluğunu artırabilirsiniz.

.button {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

11.5. Kullanıcı Deneyimini Artıran Özellikler

  • Duyarlı Tasarım: Medya sorguları ve duyarlı görüntüler ile her cihazda uygun bir görünüm sağlayın.
  • Karanlık Mod (Dark Mode): Karanlık mod sunmak için CSS değişkenlerini kullanabilir ve renkleri buna göre ayarlayabilirsiniz.
  • Erişilebilirlik: Renk kontrastları, yazı büyüklüğü, odak (focus) durumları gibi erişilebilirlik özelliklerini ihmal etmeyin.

12. CSS ile Form Tasarımı

Form tasarımı, kullanıcı etkileşimini artırmanın önemli bir parçasıdır. CSS kullanarak formların görünümünü özelleştirerek daha çekici ve kullanıcı dostu hale getirebiliriz.

12.1. Temel Form Elemanları

HTML formlarında genellikle kullanılan temel elemanlar şunlardır:

  • <input>: Metin kutuları, şifre alanları, onay kutuları ve daha fazlası için kullanılır.
  • <textarea>: Çok satırlı metin girişi için kullanılır.
  • <select>: Seçenek listesi oluşturmak için kullanılır.
  • <button>: Form gönderim butonları için kullanılır.

Örnek: Basit Bir Form

<form class="contact-form">
    <label for="name">Adınız:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">E-posta:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Mesajınız:</label>
    <textarea id="message" name="message" rows="4" required></textarea>

    <button type="submit">Gönder</button>
</form>

12.2. Form Elemanlarını Stil Verme

CSS ile form elemanlarına stil vermek, kullanıcı deneyimini artırır.

.contact-form {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.contact-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea,
.contact-form button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.contact-form button {
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #2980b9;
}

Bu stil ile form elemanları görünür ve kullanıcı dostu bir hale gelir. max-width ile formun genişliği sınırlanmış, etiketler, girdi alanları ve butonlar arasında uygun boşluk bırakılmıştır.

12.3. Form Geri Bildirimleri

Kullanıcıların formu doldururken geri bildirim alması önemlidir. CSS ile geçişler ve animasyonlar kullanarak form elemanlarının durumlarını daha etkileyici hale getirebiliriz.

input:focus,
textarea:focus {
    border-color: #3498db;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

Bu stil, kullanıcı bir girdi alanına odaklandığında kenar renginin değişmesini ve hafif bir gölge efekti eklenmesini sağlar.

13. CSS ile İkonlar ve Görsel İçerik

Görsel içerik, kullanıcı etkileşimini artırmak ve sayfanın estetiğini güçlendirmek için önemlidir. CSS kullanarak ikonlar ve diğer görsel öğelerle zenginleştirilmiş bir tasarım oluşturabilirsiniz.

13.1. Font Awesome ve Diğer İkon Kitaplıkları

Font Awesome gibi ikon kitaplıkları, web sayfalarınızda kullanabileceğiniz birçok ikon sunar. Bu ikonları kullanarak kullanıcı arayüzünü daha ilgi çekici hale getirebilirsiniz.

Örnek: Font Awesome Kullanımı
  1. Font Awesome’ı HTML belgenize dahil edin:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

İkonu sayfada kullanın:

<button>
    <i class="fas fa-paper-plane"></i> Gönder
</button>

13.2. CSS ile İkonları Stil Verme

İkonlar için CSS kullanarak boyut, renk ve konum ayarları yapabilirsiniz:

button i {
    margin-right: 5px; /* İkon ile metin arasında boşluk */
    font-size: 18px; /* İkon boyutu */
    color: white; /* İkon rengi */
}

13.3. Görsel İçerik

Resimler, web sayfalarının önemli bir parçasıdır. CSS kullanarak resimlerin görünümünü ve davranışını özelleştirebilirsiniz.

img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Yuvarlatılmış köşeler */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

Bu stil, resimlerin her zaman kapsayıcı genişliğine uyum sağlamasını, köşelerin yuvarlatılmasını ve hafif bir gölge efekti eklenmesini sağlar.

14. CSS ile Tipografi

Tipografi, web tasarımında önemli bir yer tutar. Doğru yazı tipleri ve stil kullanımı, içerik okunabilirliğini ve genel estetiği artırır.

14.1. Yazı Tipi Seçimi

Web sayfalarında yazı tiplerini ayarlamak için font-family kullanılır. Google Fonts gibi yazı tipi kütüphaneleri, farklı yazı tipleri sunar.

Örnek: Google Fonts Kullanımı
  1. Yazı tipini Google Fonts üzerinden ekleyin:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Yazı tipini CSS ile kullanın:

body {
    font-family: 'Roboto', sans-serif; /* Roboto yazı tipi */
}

14.2. Yazı Stilleri

Yazı stili ile metin görünümünü özelleştirebilirsiniz:

h1 {
    font-size: 2.5em; /* Başlık boyutu */
    font-weight: 700; /* Kalın yazı */
    color: #333; /* Metin rengi */
}

p {
    font-size: 1em; /* Paragraf boyutu */
    line-height: 1.5; /* Satır yüksekliği */
    color: #666; /* Paragraf rengi */
}

14.3. Metin Düzenleme

Metin düzenleme için birkaç önemli CSS özelliği vardır:

  • text-align: Metin hizalamasını ayarlar (left, right, center, justify).
h2 {
    text-align: center; /* Başlık ortalanmış */
}

text-transform: Metin büyük/küçük harf dönüşümünü ayarlar (uppercase, lowercase, capitalize).

h3 {
    text-transform: uppercase; /* Büyük harf dönüşümü */
}

letter-spacing: Harfler arasındaki boşluğu ayarlar.

p {
    letter-spacing: 0.5px; /* Harf arası boşluk */
}

15. CSS ile Tablo Tasarımı

Tablolar, veri sunumu için sıkça kullanılır. CSS ile tabloların stilini geliştirerek daha çekici hale getirebilirsiniz.

15.1. Temel HTML Tablosu

<table class="data-table">
    <thead>
        <tr>
            <th>Ürün</th>
            <th>Fiyat</th>
            <th>Stok</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ürün A</td>
            <td>$10</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Ürün B</td>
            <td>$20</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

15.2. Tabloya Stil Verme

.data-table {
    width: 100%;
    border-collapse: collapse; /* Kenarları birleştirir */
}

.data-table th,
.data-table td {
    border: 1px solid #ddd; /* Kenar çizgileri */
    padding: 8px; /* İç boşluk */
    text-align: left; /* Metin hizalaması */
}

.data-table th {
    background-color: #3498db; /* Başlık arka plan rengi */
    color: white; /* Başlık metin rengi */
}

.data-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Çift satır arka plan rengi */
}

Bu stil ile tablo daha okunabilir ve düzenli hale gelir. Kenar çizgileri, arka plan renkleri ve metin hizalamaları ayarlanmıştır.

16. CSS ile İleri Düzey Seçiciler

CSS, daha karmaşık stil uygulamak için birçok seçici sunar. Bunlar, stil uygulamak istediğiniz öğeleri daha spesifik bir şekilde hedeflemenizi sağlar.

16.1. Çocuk ve Torun Seçicileri

  • Çocuk Seçici (>): Sadece doğrudan çocuk öğeleri hedefler.
ul > li {
    color: red; /* Sadece doğrudan ul içinde bulunan li öğeleri kırmızı olur */
}

Torun Seçici (boşluk): Tüm torun öğelerini hedefler.

div p {
    font-size: 14px; /* div içindeki tüm p öğeleri 14px boyutunda olur */
}

16.2. İlişkili Seçiciler

  • Karmaşık Seçiciler: Birden fazla seçici bir arada kullanılabilir.
button.primary, .alert {
    background-color: green; /* Hem primary butonlar hem de alert sınıfındaki öğeler yeşil olur */
}

Pseudo-seçiciler: Belirli durumları hedeflemek için kullanılır. Örneğin, :hover, :focus, :first-child.

a:hover {
    text-decoration: underline; /* Link üzerine gelindiğinde altı çizili olur */
}

16.3. Pseudo-Elementler

Pseudo-elementler, bir öğenin belirli bölümlerini hedeflemenizi sağlar.

  • ::before ve ::after: Elemanın önüne veya arkasına içerik ekler.
h2::before {
    content: "Başlık: ";
    font-weight: bold;
    color: #3498db; /* Başlık öncesi mavi metin */
}

17. CSS ile Uygulamalar ve Öneriler

CSS öğrenirken ve uygularken dikkate almanız gereken bazı önemli noktalar vardır:

17.1. Proje Yapısı ve Düzen

  • Düzenli Klasör Yapısı: CSS dosyalarınızı ve diğer varlıklarınızı düzenli bir yapıda tutun. Örneğin, css/, img/, js/ gibi klasörler oluşturun.
  • Sass veya Less Kullanımı: CSS’inizi daha yönetilebilir hale getirmek için Sass veya Less gibi CSS ön işlemcilerini kullanmayı düşünebilirsiniz.

17.2. Tarayıcı Testi

  • Tarayıcı Uyumluluğu: Web sayfanızın farklı tarayıcılarda nasıl göründüğünü test edin. Farklı tarayıcıların CSS özelliklerini destekleme şekillerini kontrol edin.
  • Responsive Tasarım: Farklı ekran boyutlarını test ederek duyarlı tasarımın nasıl çalıştığını gözlemleyin.

17.3. Performans

  • CSS Kodu Sıkıştırma: Canlı ortamda CSS dosyalarınızı sıkıştırarak dosya boyutunu azaltın.
  • Önbellekleme: Tarayıcı önbellekleme kullanarak CSS dosyalarınızı daha hızlı yüklenir hale getirin.

18. Sonuç

CSS, web tasarımında önemli bir rol oynamaktadır. Yukarıda ele alınan konular, CSS ile etkili ve çekici tasarımlar oluşturmanıza yardımcı olacaktır. Duyarlı tasarım, animasyonlar, stil yönetimi ve form tasarımı gibi çeşitli konular sayesinde kullanıcı deneyimini iyileştirmeniz mümkün.

Uygulamalarınızı geliştirirken ve tasarımlarınızı oluştururken bu bilgileri kullanarak, daha iyi bir web deneyimi yaratabilir ve projelerinizi profesyonel bir görünümle sunabilirsiniz. CSS, öğrenilmesi ve ustalaşması gereken bir dildir, ancak doğru araçlar ve yöntemler ile etkileyici ve kullanıcı dostu web sayfaları tasarlamak mümkündür.

Osman Bayrak
Osman Bayrak

Yazılım Mühendisiyim. Teknoloji ve yazılıma meraklıyım.

Articles: 199