Temel Web Geliştirme Sanatı: CSS Girişi ve Temel Kavramlar

Python'un Büyülü Dünyasına Adım At: Adım Adım Kurulum Rehberi

CSS Temel Yapısı:

CSS, HTML öğelerine stil uygulamak için kullanılır. Temel renkler, fontlar ve sayfa genelindeki özellikleri belirleyen basit bir CSS dosyası oluşturun veya HTML kod yapınızda ki <head></head> bölümünün içerisine <sytle></style> kod yapısını oluşturup içerisine CSS kodlarınızı yazabilirsiniz.

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
} 
article {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

Temel CSS Özellikleri ve HTML Bağlantılar:

CSS Temel Özellikler:

body: Sayfanın genel özelliklerini belirler. Font türü, arka plan rengi, metin rengi, kenar boşlukları gibi.

header: Sayfanın üst kısmındaki başlık bölgesinin stilini belirler.

article: Her makalenin stilini belirler. Kenar boşlukları, arka plan ve çerçeve eklenmiştir.

footer: Sayfanın altındaki bilgi bölgesinin stilini belirler.

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}
header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}
article {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

HTML Bağlantılar:

<a> etiketi kullanarak bağlantılar oluşturun.

Örneğin, bir makalenin başlığına bir bağlantı eklemek:

<article>
    <h2><a href="#">Makale Başlığı</a></h2>
    <img src="resim.jpg" alt="Makale Resmi">
    <p>Makale içeriği buraya...</p>
</article>

ID ve Class Kavramları:

ID ve Class Nedir?

ID ve Class HTML ve CSS'te öğelere özel tanımlayıcılar eklemek için kullanılır.

ID, bir sayfa içinde benzersiz olmalıdır. # ile başlar (örneğin: #header).

Class, bir sayfa içinde birden fazla öğe için kullanılabilir. . ile başlar (örneğin: .menu).

CSS ID ve Class Kullanımı:

ID kullanımı:

#header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

Class kullanımı:

.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Box Model:

box Model Nedir?

Box model, bir HTML öğesinin içeriğini, dolayısıyla metni veya resmi çevreleyen bir kutu olarak düşünülmesidir.

İçerir: içerik (content), dolgu (padding), kenarlık (border), boşluk (margin).

Box Model CSS Kullanımı:

article {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

Flexbox:

Flexbox Nedir?

Flexbox, öğeleri esnek bir şekilde düzenlemek ve hizalamak için kullanılan bir CSS düzen modelidir.

Öğeleri yatay veya dikey olarak hizalama, sıralama ve aralarındaki boşluğu ayarlama imkanı sunar.

Flexbox CSS Kullanımı:

.article-list {
    display: flex;
    justify-content: space-between;
}
.article {
    width: 30%;
    margin: 10px;
}

Bu adımda, Flexbox'u kullanarak öğeleri esnek bir şekilde düzenlemeyi ve hizalamayı öğrendik.

8. Temel Animasyonlar:

Temel Animasyon CSS Kullanımı:

Basit renk değişimi animasyonu eklemek için:

article:hover {
    background-color: #e0e0e0;
    transition: background-color 0.3s ease;
}

Bu CSS kodu, makaleye fare geldiğinde arka plan renginin hızlı bir şekilde değişmesini sağlar.

CSS Animasyon Eklemek İçin Class Kullanımı:

İlgili class'a sahip öğelerin animasyon eklenmiş hali:

.animate-on-hover:hover {
    background-color: #e0e0e0;
    transition: background-color 0.3s ease;
}

Bu adımda, temel animasyonları ekleyerek sayfanın daha etkileyici ve interaktif hale gelmesini sağlamayı öğrendik

Resim Galerisi Oluşturma:

CSS Galeri Stilleri:

Resimlere stil eklemek için CSS:

.image-gallery {
    display: flex;
    justify-content: space-around;
}
.image-gallery img {
    width: 30%;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin: 10px;
    transition: transform 0.3s ease;
}
.image-gallery img:hover {
    transform: scale(1.1);
}

Bu CSS kodu, resimlere galeri düzeni ve hover efekti ekler. Resimlere tıklandığında veya üzerine gelindiğinde bir büyüme efekti oluşur.

Responsive Tasarım:

Media Queries Kullanımı:

Sayfanın farklı ekran boyutlarına uyum sağlaması için media queries ekleyelim:

@media only screen and (max-width: 600px) {
    .image-gallery img {
        width: 100%;
    }
}

}

Bu CSS kodu, ekran genişliği 600 pikselden küçük olduğunda resimlerin genişliğini tam ekran genişliğine ayarlar.

Bu adımda, sayfanın farklı ekran boyutlarına uyum sağlaması için basit bir "responsive design" özelliğini eklemeyi öğrendik

Google Fonts Kullanımı:

Google Fonts Eklemek İçin Link Ekleme

Sayfaya özel bir Google Fonts

CSS Font Kullanımı:

Eklenen fontu kullanmak için CSS:

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

Bu adımda, sayfanıza Google Fonts ekleyerek metinlerinizi özelleştirmeyi öğrendik. İlerleyen adımlarda farklı yazı tipleri ve stilleri ekleyerek sayfanızı daha da kişiselleştirebiliriz.

Hover Efektleri:

CSS Hover Efekti Eklemek:

Elemanlara fare üzerine gelindiğinde efekt eklemek:

.article:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

Bu CSS kodu, makalelere fare geldiğinde hafif bir büyüme efekti ekler.

Bu adımda, sayfadaki öğelere hover efekti ekleyerek kullanıcı etkileşimini artırmayı öğrendik. İlerleyen adımlarda daha fazla interaktif özellik ekleyebiliriz.

CSS Grid Sistemi:

CSS Grid Kullanımı:

Sayfayı daha karmaşık bir düzenleme yöntemi olan CSS Grid kullanarak oluşturalım:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
.article {
    width: 100%;
}

Bu CSS kodu, bir grid sistemi oluşturarak sayfadaki öğeleri sıralar.

Bu adımda, CSS Grid kullanarak sayfanın düzenini daha kontrol edilebilir ve esnek hale getirmeyi öğrendik. İlerleyen adımlarda daha fazla CSS özelliği ekleyerek sayfanın tasarımını geliştirebiliriz.

Sass :

Sass Kullanımı:

Sass, daha düzenli ve etkileşimli bir CSS yazma yöntemidir. Sass'ı kullanmak için öncelikle yükleyip, kullanmaya başlayabiliriz.

$primary-color: #3498db;
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}
header {
    background-color: $primary-color;
    color: #fff;
    text-align: center;
    padding: 10px;
}
// Diğer stiller…

Bu Sass kodu, değişken kullanımını gösterir. Sass, CSS yazımını daha modüler ve sürdürülebilir hale getirir.

Bu adımda, Sass kullanarak CSS yazma konseptini öğrendik. İlerleyen adımlarda daha fazla Sass özelliği ekleyerek stil yönetimimizi geliştirebiliriz.

Transition ve Transform Kullanımı:

CSS Transition ve Transform:

Elemanlara geçiş efektleri ve dönüşüm eklemek:

.article {
    margin: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    transition: transform 0.3s ease;
}

.article:hover {
    transform: scale(1.05);
}

Bu CSS kodu, bir makalenin üzerine gelindiğinde hafif bir büyüme efekti uygular.

Bu adımda, transition ve transform özelliklerini kullanarak sayfadaki öğelere animasyonlar eklemeyi öğrendik. İlerleyen adımlarda daha karmaşık animasyonlar ve efektler ekleyebiliriz.

Media Queries:

CSS Media Queries Kullanımı:

Ekran boyutlarına göre farklı stil uygulamak:

@media only screen and (max-width: 600px) {
    .article {
        width: 100%;
    }
}

}

Bu CSS kodu, ekran genişliği 600 pikselden küçük olduğunda makalelerin genişliğini tam ekran genişliğine ayarlar.

Bu adımda, sayfanın farklı cihazlara uyum sağlaması için media queries kullanmayı öğrendik. İlerleyen adımlarda daha fazla responsive tasarım teknikleri ekleyebiliriz.

İleri Seviye CSS Seçicileri:

CSS İleri Seviye Seçiciler:

:not, :nth-child, :first-child, :last-child gibi ileri seviye seçicileri kullanmak:

Bu CSS kodu, çift sıradaki makalelere arka plan rengi ekler, resimlere kenar yuvarlatma ve ilk başlığa renk ekler.

Bu adımda, ileri seviye CSS seçicilerini kullanarak belirli öğelere özel stil eklemeyi öğrendik. İlerleyen adımlarda daha fazla CSS özelliği ekleyerek sayfanın tasarımını daha da zenginleştirebiliriz.