CSS Eğitimi

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

CSS Tek Taraflı Kenarlıkları

Önceki yazılarda yer alan örneklerde her kenar için farklı kenarlık belirlemenin mümkün olduğunu gördünüz. CSS’de ayrıca kenarlıkların her birini (üst, sağ, alt ve sol) belirtmeye yönelik özellikler de vardır: Yukarıdaki örnek aşağıdaki kodla aynı sonucu verir. İşte şu şekilde çalışıyor: border-style özelliğinin dört değeri varsa: border-style: dotted solid double dashed; border-style özelliğinin üç değeri varsa:…

CSS Text Transformation (Metin Dönüşümü)

Text Transformation Text-transform özelliği, bir metindeki büyük ve küçük harfleri belirtmek için kullanılır. Her şeyi büyük veya küçük harflere dönüştürmek veya her kelimenin ilk harfini büyük harf yapmak için kullanılabilir:

CSS Seçiciler (Selectors)

Bir CSS seçici, stil vermek istediğiniz HTML öğelerini seçer. CSS Seçiciler CSS seçicileri, stil vermek istediğiniz HTML öğelerini “bulmak” (veya seçmek) için kullanılır. CSS seçicilerini beş kategoriye ayırabiliriz: Bu sayfada en temel CSS seçicileri anlatacağız. CSS Öge Seçici Öğe seçici, öğe adına göre HTML öğelerini seçer. CSS id Seçici id (kimlik) seçici, belirli bir öğeyi…

CSS Border Özelliğini Kısaltma

Önceki sayfada gördüğünüz gibi, kenarlıklarla uğraşırken dikkate alınması gereken birçok özellik vardır. Kodu kısaltmak için, tüm bireysel kenarlık özelliklerini tek bir özellikte belirlemek de mümkündür. Border özelliği, aşağıdaki bireysel border özellikleri için kısa bir özelliktir: Ayrıca yalnızca bir taraf için tüm kenarlık özelliklerini ayrı ayrı belirleyebilirsiniz: CSS Alt Kenarlık Oluşturma

CSS Text Spacing (Metin Aralığı)

Text Spacing Bu bölümde aşağıdaki özellikler hakkında bilgi vermeye çalışacağım. Text Indentation (Metin Girintisi) text-indent özelliği, bir metnin ilk satırının girintisini belirtmek için kullanılır: Letter Spacing (Harf Boşluğu) Letter-spacing özelliği, bir metindeki karakterler arasındaki boşluğu belirtmek için kullanılır. Aşağıdaki örnek, karakterler arasındaki boşluğun nasıl artırılacağını veya azaltılacağını gösterir: Line Height (Satır Yüksekliği) Line-height özelliği satırlar…

CSS Nasıl Eklenir?

Bir tarayıcı bir stil sayfasını okuduğunda, HTML belgesini stil sayfasındaki bilgilere göre biçimlendirir. CSS Eklemenin Üç Yolu Stil sayfası eklemenin üç yolu vardır: Harici CSS Harici bir stil sayfasıyla, tek bir dosyayı değiştirerek tüm web sitesinin görünümünü değiştirebilirsiniz! Her HTML sayfası, head bölümünün içindeki <link> öğesinin içindeki harici stil sayfası dosyasına bir referans içermelidir. Harici…

CSS Yuvarlatılmış (Rounded) Kenarlıklar

border-radius özelliği, bir öğeye yuvarlak kenarlıklar eklemek için kullanılır:

CSS Text Shadow (Metin Gölgesi)

Text Shadow text-shadow özelliği metne gölge ekler. En basit kullanımında yalnızca yatay gölgeyi (2px) ve dikey gölgeyi (2px) belirtirsiniz: Daha sonra gölgeye bir renk (kırmızı) ekleyin: Ardından gölgeye bir bulanıklık efekti yani blur (5 px) ekleyin: Daha Fazla Metin Gölgesi Örneği Beyaz bir metin üzerinde metin gölgesi: Kırmızı neon parıltılı metin gölgesi: Kırmızı ve mavi…

CSS Yorum Satırları

CSS yorumları tarayıcıda görüntülenmez ancak kaynak kodunuzu belgelemenize yardımcı olabilirler. Yorum Satırları Yorumlar kodu açıklamak için kullanılır ve daha sonraki bir tarihte kaynak kodunu düzenlediğinizde yardımcı olabilir. Yorumlar tarayıcılar tarafından dikkate alınmaz. <style> öğesinin içine bir CSS yorumu yerleştirilir ve /* ile başlayıp */ ile biter: Kodun istediğiniz yerine yorum ekleyebilirsiniz: Yorumlar birden fazla satıra…

CSS Margin Nedir?

Margin, öğelerin çevresinde tanımlanmış sınırların dışında boşluk oluşturmak için kullanılır. CSS kenar boşluğu özellikleri, öğelerin çevresinde, tanımlanmış sınırların dışında boşluk oluşturmak için kullanılır. CSS ile kenar boşlukları üzerinde tam kontrole sahip olursunuz. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) kenar boşluğunu ayarlamaya yönelik özellikler vardır. CSS, bir öğenin her bir tarafı…