Bu video dersinde, CSS’de Conditional Comments(şarta bağlı yorum) konusunu örneklendirmeye çalıştım. Derste yer alan şarta bağlı yorum tanımlamaları aşağıdaki gibidir: /* Conditional Comments Belirtilen tarayıcı ve versiyonlarını hedef alan, bu tarayıcı ve versiyonlarında işetilen, bunlar dışında kalan tarayıcı ve versiyonlarında yorum satırı muamelesi gören kod bloklarıdır. */ /* Aşağıdaki kod bloğu, IE’ın versiyon 9 ve öncesi versiyonlarında işetilecek, diğer tarayıcı ve versiyonlarda ise yorum bloğu muamelesi görecektir. */

Bu video dersinde, CSS’de kalıtım/inheritance konusunu örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir: /* KALITIM XHTML/HTML sayfa hiyerarşisi içinde bir sayfa elemanı kalıtım yoluyla aktarılan özellikleri, kendisini sarmalamış yani ebeveyni konumunda bulunan sayfa elemanından miras alır. Miras alım, kalıtım yolu ile aktarılan özellik, sayfa elemanı için özel olarak tanımlanmamış ise gerçekleşir. */ /* body etiketinin aşağıdaki özellikleri için yapılan stil tanımlamaları, belirtilen özelliklere kendileri özel değer atamadıkça body etiketi ebeveyni olan sayfa elemanlarınca [...]

Bu video dersinde, bir önceki dersin devamı mahiyetinde, stil önceliği konusunda important deyiminin kullanılışını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir: /* important deyimi: Tanımlanmış bir stil özelliğinin, stil önceliğine bakılmaksızın uygulanmasını sağlar ve sadece, uygulandığı özelliği öncelikli yapar. */ /* Aşağıda, important deyiminin kullanıldığı stil atamaları, sayfa içinde yer alan p etiketlerinin tamamına, stil önceliğine bakılmaksızın uygulanacaktır */ p { color: blue !important; font-size: 14px; font-weight: bold; padding: 0px 0px 0px 15px; [...]

Bazen, bir sayfa elemanı için birden fazla seçici kullanılabilir. Yani aynı sayfa elemanı için birden fazla stil tanımı yapmış olabiliriz. Bu durumda da bu stil tanımlarının önceliği konusu gündeme gelir. Web tarayıcılarının stil önceliğini tespit etmek için kullandıkları bir yöntem vardır. Eğer bir sayfa elemanını hedef alan birden fazla seçici, stil tanımı söz konusuysa tarayıcılar, her bir stil için 4 basamaklı bir değer oluştururlar ve stil önceliğini, bu değerler içerisinde en büyük değere sahip olan [...]

Video dersinde kullanılan sayfanın kodunda yer alan, css bağlantısı ve font-family tanımı aşağıdadır… font-family: ‘Open Sans’, sans-serif;

Bu video dersinde CSS’te Pseudo/Sözde Sınıflar‘ın kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir: /* Sözde Sınıflar: Sayfa elemanlarının dinamik olayları için yazılmış, sayfa elemanlarına etkileşim kazandırmak adına kullanılan sınıflardır. */ /* Aşağıdaki atamayla sayfa içinde yer alan ziyaret edilmemiş anchor etiketleri seçilecek, tanımlanan stil tercihleri uygulanacaktır */ a:link { color:blue; text-decoration:none; font-weight: bold;} /* Aşağıdaki atamayla sayfa içinde yer alan ziyaret edilmiş anchor etiketleri seçilecek, tanımlanan stil tercihleri uygulanacaktır */ a:visited { [...]

Bu video dersinde CSS’te Pseudo/Sözde Elemanlar‘ın kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir: /* Sözde Elemanlar: HTML/XHTML elemanı olmasalar da, HTML/XHTML elemanı gibi davranabilen elemanlardır. */ /* Aşağıdaki atamayla sayfa içinde class özelliğine “tanim” değerini almış paragraf etiketleri seçilecek ve etiketin barındırdığı metnin ilk harfine tanımlanan stil tercihleri uygulanacaktır */ p.tanim:first-letter{ color: gray; font-weight: bold; font-size: 40px; font-style: italic; } /* Aşağıdaki atamayla sayfa içinde class özelliğine “tanim” değerini almış paragraf etiketleri [...]

Bu video dersinde CSS’te Attribute/Özellik seçicilerin kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir: /* Özellik Seçici: HTML/XHTML etiketlerini özelliklerine, bu özelliklerin aldığı değerlere göre seçmek için kullanılırlar. */ /* Aşağıdaki atamayla sayfa içinde title özelliğine değer almış/onu kullanmış dt eleman(lar)ı seçilecek ve tanımlanan stil tercihleri bu etiket(ler)e uygulanacaktır */ dt[title]{ font-weight: bold; padding: 5px 0px; } /* Aşağıdaki atamayla sayfa içinde title özelliğine “basit” değeri almış dt eleman(lar)ı seçilecek ve tanımlanan stil [...]

Bu video dersinde CSS’te Sibling/Kardeş seçicilerin kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir: /* Kardeş Seçici: Aynı ebeveyne sahip sayfa elemanlarını seçmek için kullanılırlar. */ /* Aşağıdaki atamayla sayfa içinde aynı ebeveyne sahip p elemanından sonra gelen kardeş div sayfa eleman(lar)ı seçilecek ve tanımlanan stil tercihleri bu etiket(ler)e uygulanacaktır */ p + div { border: #000000 1px solid; font-size: 14px; font-weight: bold; text-decoration: underline; color: #cc0000; padding: 10px; width: 500px; } /* [...]

Bu video dersinde CSS’te descendant/torun seçicilerin kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlaması ve çalışma zamanında oluşturduğu çıktı aşağıdaki gibidir: /* Torun Seçici: Bir sayfa elemanının soyundan gelen sayfa elemanlarını seçmek için kullanılırlar. */ /* Aşağıdaki atamayla sayfa içinde yer alan ul sayfa elemanlarının torunu konumunda bulunan bütün em etiketleri seçilecek ve tanımlanan stil tercihleri bu etiketlere uygulanacaktır */ ul em { color: red; font-weight: bold; } Çalışma zamanı çıktısı: Kodcu.Com CSS Dersleri Yayınlanmış [...]