CSS'de Seçiciler
- 1.
- 2. 2 CSS’de Seçiciler CSS’de Seçiciler CSS’yi etkili bir şekilde kullanabilmek için Seçiciler konusuna hakim olmak oldukça önemlidir. Bu sunuda CSS kurallarını oluştururken kullandığımız seçiciler çok uç örneklere ve aşırı detaya girmeden anlatılacaktır. Daha detaylı bilgiler için referans kaynaklara bakılabilir. ozguryaman.com
- 3. 3 CSS’de Seçiciler CSS Kurallarının Yapısı Seçiciler konusuna girmeden önce CSS kurallarının ne olduğunu ve nasıl yazıldığını bilmekte fayda var. CSS dosyaları CSS kurallarından oluşur ve CSS kuralları aşağıdaki yapıdadırlar: p{ color:blue; font-size:14px; } ozguryaman.com
- 4. 4 CSS’de Seçiciler CSS Kurallarının Yapısı Bu yapıya göre önce web sayfasında hangi elemanları eklemek istiyorsak onu, yani seçiciyi yazarız. Ardından süslü parantezler arasında değiştirmek istediğimiz özelliği ve iki nokta üst üste koyarak o özelliğin alacağı değeri yazarız. Son olarak noktalı virgül ile işlemi tamamlarız. Bu şekilde istediğimiz kadar özellik ve kural ekleyebiliriz. ozguryaman.com
- 5. 5 CSS’de Seçiciler CSS Kurallarının Yapısı Bu şekilde eklediğimiz özellikler seçicinin sayfada seçmiş olduğu elemanları etkiler. Seçiciler sayesinde aşağıdaki gibi seçimler yapabiliriz: • Sayfadaki tüm linkler • header alanında bulunan h1 başlıkları • Link yapılmış resimler, gibi. Şimdi seçicileri türlerine göre inceleyelim. ozguryaman.com
- 6. 6 CSS’de Seçiciler Eleman Seçicileri Bu gruptaki seçiciler ile sayfada bulunan aynı elemanların tümü seçilir. Örneğin aşağıdaki seçici sayfadaki tüm linkleri seçecektir. a{ /* CSS Özellikleri */ } ozguryaman.com
- 7. 7 CSS’de Seçiciler Eleman Seçicileri Aynı şekilde sayfada bulunan bütün paragrafların iki yana yaslı olmasını istiyorsak, aşağıdaki kuralı oluştururuz: p{ text-align:justify; } ozguryaman.com
- 8. 8 CSS’de Seçiciler İçiçe Seçiciler Bu seçiciler sayesinde belli elemanların arasında kalan elemanlar seçilebilmektedir. Örneğin sayfada bulunan tüm linkler yerine, id’si header olan div’in içindeki linkleri seçmek istersek, şu kodu yazarız: #header a { // CSS Özellikleri } ozguryaman.com
- 9. 9 CSS’de Seçiciler İçiçe Seçiciler – Örnek 1 Diyelim ki web sayfamızın yapısı şu şekilde olsun: . <div id="footer"> <a href="#">Anasayfaya Dön</a> <p>Bize ulaşmak için <a href="#">tıklayın</a> </p> </div> . ozguryaman.com
- 10. 10 CSS’de Seçiciler İçiçe Seçiciler – Örnek 1 CSS kuralımız ise şu şekilde olsun: #footer a { color:red; } Buna göre footer alanındaki iki link de id’si footer olan elemanın arasında kaldığı için kırmızı olacaktır. ozguryaman.com
- 11. 11 CSS’de Seçiciler İçiçe Seçiciler – Örnek 2 Şimdi aşağıdaki kurala bakalım. #footer p a { color:red; } Buna göre footer alanındaki paragrafların arasında kalan linkler seçilecek, dolayısıyla "tıklayın" linki kırmızı olacak, birinci link seçilmediği için değişmeyecektir. ozguryaman.com
- 12. 12 CSS’de Seçiciler * Seçicisi Web sayfasında bulunan elemanların tamamını seçmek amacıyla kullanılır. Genellikle web tarayıcılarının otomatik olarak eklediği boşlukları (margin ve padding) sıfırlamak için kullanılır. *{ margin: 0; padding: 0; } ozguryaman.com
- 13. 13 CSS’de Seçiciler ID Seçicisi HTML etiketlerinden ID verdiklerimizi bu seçiciyle seçebiliriz. Örneğin HTML kodumuz aşağıdaki gibi olsun: . <div id="header" > <h1>Site Başlığı</h1> </div> . ozguryaman.com
- 14. 14 CSS’de Seçiciler ID Seçicisi Bu koddaki ID'si header olan divin arkaplan rengini kırmızı yapmak istersek, yazmamız gereken CSS kuralı şöyle olmalıdır: #header { background:#F00; } ozguryaman.com
- 15. 15 CSS’de Seçiciler ID Seçicisi Aynı şekilde bu header'ın içinde bulunan elemanları da şu şekilde seçebiliriz: h1 { color:#F00; } #header h1 { color:#00F; } ozguryaman.com
- 16. 16 CSS’de Seçiciler ID Seçicisi Buna göre sayfadaki bütün h1 başlıkları kırmızı, sadece header alanında bulunan h1'ler ise mavi renkte olacaktır. ozguryaman.com
- 17. 17 CSS’de Seçiciler Class Seçicisi Class seçicisi ID seçicisine benzer. ID seçicisi ile ID verdiğimiz HTML elemanlarını seçerken, Class Seçicisi ile class parametresi verdiğimiz HTML elemanlarını seçebiliriz. Örneğin; <h1 class="anabaslik">Sayfa Anabaşlığı</h1> . . <h1>Diğer h1 Başlığı</h1> ozguryaman.com
- 18. 18 CSS’de Seçiciler Class Seçicisi Buradaki HTML kodu için aşağıdaki CSS kuralını yazalım: h1 { color:#F00; } .anabaslik { color:#00F; } ozguryaman.com
- 19. 19 CSS’de Seçiciler Class Seçicisi Buna göre normal h1 başlıklarımız kırmız olurken, class parametresine anabaslik verdiklerimiz mavi renkte olacaktır. Class'ı anabaslik olan elemanları .anabaslik şeklinde seçebileceğimiz gibi, h1.anabaslik şeklinde de seçebiliriz. Aradaki fark şudur: Birincide class'ı anabaslik olan tüm HTML elemanları, ikincide ise class'ı anabaslik olan sadece h1'ler seçilir. ozguryaman.com
- 20. 20 CSS’de Seçiciler ID ve Class Seçicisi - Farklar Bu iki seçici arasında bazı farklar vardır. İlk olarak HTML tarafında aynı ID sadece tek bir elemana verilebilir. Aynı class ise birden fazla elemana verilebilir. CSS tarafında class'ı seçerken nokta, ID'yi seçerken sayı işareti kullanırız. (. ve #) ozguryaman.com