CSS Eğitimi

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

CSS Text Decoration

Text Decoration Bu bölümde aşağıdaki özellikler hakkında bilgi vermeye çalışacağım. CSS Çizgili Metin Text-decoration-line özelliği metne çizgi eklemek için kullanılır. İpucu: Metnin hem üstünde hem de altında satırları görüntülemek için üst çizgi ve alt çizgi gibi birden fazla değeri birleştirebilirsiniz. Çizgiye Renk Verme Text-decoration-color özelliği dekorasyon çizgisinin rengini ayarlamak için kullanılır. CSS Çizgiye Stil Verme…

CSS Sözdizimi (Syntax)

Bir CSS kuralı bir seçici ve bir bildirim bloğundan oluşur. CSS Sözdizimi Seçici, stil vermek istediğiniz HTML öğesini işaret eder. Bildirim bloğu, noktalı virgülle ayrılmış bir veya daha fazla bildirim içerir. Her bildirim, iki nokta üst üste ile ayrılmış bir CSS özellik adı ve bir değer içerir. Birden çok CSS bildirimi noktalı virgülle ayrılır ve…

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…