CSS Eğitimi

Temel CSS eğitimini örneklerle, görsel bir şekilde ve tamamen ücretsiz öğrenebilirsiniz.

CSS HSL Renkleri

HSL, renk tonu, doygunluk ve açıklık anlamına gelir. (hue, saturation,lightness) HSL Değeri CSS’de bir renk, ton, doygunluk ve açıklık (HSL) kullanılarak şu biçimde belirtilebilir: hsl(hue, saturation, lightness) Ton, renk tekerleğinde 0 ile 360 arasında bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir. Doygunluk bir yüzde değeridir. %0 grinin bir tonu, %100 ise tam renk anlamına gelir….

CSS Box Model

Tüm HTML öğeleri kutular olarak düşünülebilir. CSS’de tasarım ve düzenden bahsederken “kutu modeli” yani “Box Model” terimi kullanılır. CSS kutu modeli aslında her HTML öğesinin etrafını saran bir kutudur. Şunlardan oluşur: kenar boşlukları, kenarlıklar, dolgu ve gerçek içerik. Aşağıdaki resim kutu modelini göstermektedir: Yukarıdaki örneğin açıklaması da aşağıdaki gibidir. İçerik – Metin ve resimlerin göründüğü…

CSS Google Fonts (Google Yazı Tipleri)

Google Fonts HTML’deki standart yazı tiplerinden herhangi birini kullanmak istemiyorsanız Google Fonts’u kullanabilirsiniz. Google Fonts’un kullanımı ücretsizdir ve aralarından seçim yapabileceğiniz 1000’den fazla yazı tipi vardır. Google Yazı Tipleri Nasıl Kullanılır? <head> bölümüne özel bir stil sayfası bağlantısı eklemeniz ve ardından CSS’deki yazı tipine başvurmanız yeterlidir. Burada Google Fonts’tan “Sofia” isimli bir font kullanmak istiyoruz:…

CSS Arka Plan (Background)

CSS arka plan özellikleri, öğelere arka plan efektleri eklemek için kullanılır. Bu bölümlerde aşağıdaki CSS arka plan özelliklerini öğreneceğiz. CSS background-color background-color özelliği, bir öğenin arka plan rengini belirtir. CSS’de bir renk çoğunlukla şu şekilde belirtilir: Herhangi bir HTML öğesinin arka plan rengini ayarlayabilirsiniz: Burada <h1>,<p> ve <div> öğeleri farklı arka plan renklerine sahip olacaktır:…

CSS Outline (Anahat)

Anahat, öğenin sınırının dışına çizilen bir çizgidir. CSS Outline Anahat, öğenin “öne çıkmasını” sağlamak için öğelerin etrafına, sınırların DIŞINA çizilen bir çizgidir. CSS aşağıdaki anahat özelliklerine sahiptir: Not: Anahat kenarlıklardan farklıdır! Kenarlığın aksine, ana hat öğenin kenarlığının dışına çizilir ve diğer içerikle örtüşebilir. Ayrıca dış hat, öğenin boyutlarının bir parçası DEĞİLDİR; öğenin toplam genişliği ve…

CSS Yazı Tipi Eşleştirme

Yazı tipi eşleştirmeleri yapacağınız tasarımın kalitesi için çok önemlidir. Yazı Tipi Eşleştirme Kuralları Yazı tipi eşleştirmeleri oluşturmak için bazı temel kurallar şunlardır: Tamamlayıcı Birbirini tamamlayan yazı tipi eşleşmelerini bulmak her zaman güvenlidir. Harika bir yazı tipi kombinasyonu, çok benzer veya çok farklı olmadan uyumlu olmalıdır. Süper Font Ailelerini Kullanın Yazı tipi ailesi, birlikte iyi çalışacak…

CSS Arka Plan Resmi (Background Image)

arka plan resmi özelliği, bir öğenin arka planı olarak kullanılacak resmi belirtir. Varsayılan olarak görüntü, öğenin tamamını kaplayacak şekilde tekrarlanır. Arka plan resmi belirlerken, sayfa üzerindeki metinlerin okunabilir olduğundan emin olmanızda fayda var. Arka plan resmi ayrıca <p> öğesi gibi belirli öğeler için de ayarlanabilir:

CSS Outline Width (Anahat Genişliği)

Outline-width özelliği, anahattın genişliğini belirtir ve aşağıdaki değerlerden birine sahip olabilir: Aşağıdaki örnekte farklı genişliklere sahip bazı ana hatlar gösterilmektedir:

CSS Font Property (Yazı Tipi Özelliği)

Kodu kısaltmak için, tüm ayrı yazı tipi özelliklerini tek bir özellikte belirlemek de mümkündür. Font özelliği aşağıdakiler için kısa bir özelliktir: Not: font-size ve font-family değerleri gereklidir. Diğer değerlerden biri eksikse varsayılan değerler kullanılır. Tüm CSS Yazı Tipi Özellikleri Özellik Açıklama font Tüm yazı tipi özelliklerini tek bir satırda ayarlar font-family Metin için yazı tipi…

CSS Görsel Tekrarı (Background Image Repeat)

Varsayılan olarak, arka plan görüntüsü özelliği görüntüyü hem yatay hem de dikey olarak tekrarlar. Bazı görsellerin yalnızca yatay veya dikey olarak tekrarlanması gerekir, aksi takdirde aşağıdaki gibi tuhaf görünebilirler: Yukarıdaki görüntü yalnızca yatay olarak tekrarlanırsa (background-repeat: repeat-x;), arka plan daha iyi görünecektir: Açık mavi yerine beyaz renk olsaydı daha güzel görünecekti 🙂 İpucu: Bir görüntüyü…