CSS Özellik Seçicileri
Merhaba Arkadaşlar,
Bu makalede sizlere ismine baktığımızda biraz belirsiz duran tam olarak isimden tanınamayan bir CSS özelliği olan Özellik Seçiciliğini anlatacağım. Bu işlemi uygularken tag ‘leri arasındaki link yazılarını baz alarak bir uygulama yapacağız. Bu özelliğin mantığına inerek bir açıklama yapmak gerekirse ;
Örneğin web sayfamız içerisinde 20 adet kimisi aynı kimisi farklı olmak üzere link içerikli yazılar bulunmaktadır. Bu linklerden bazılarına ” font-size: 20px ” özelliği ile font değişikliği , bazılarına ” color: red ” ile yazı rengi değişikliği uygulamak istiyoruz. Eğertag ‘leri içerisine tek tek ” style ” özelliği vererek bu işlemi uzatırsak herhangi bir değişiklik yapmak gerektiğinde tek tek hepsini düzenlemek zor gelecektir. İşte tamda burda CSS ‘in özellik seçiciliği yani belirtilen özelliğe göre işlem yapma hizmetini devreye sokacağız. İçeriğinde belli kelime , uzantı vb. olanları grup olarak işleme sokabileceğiz.
Artık ön giriş yaptığımıza göre bir uygulama ile bu özelliği daha da pekişir hale getirebiliriz. Öncelikle iki adet sayfa oluşturuyoruz. Bunların isimlerini ” index.html ” ve ” stil.css ” veriyoruz. İlk olarak index sayfamızı kodluyoruz ve içeriğine üç adet farklı link vererek işlemlerimizi yapacağımıztag ‘lerini belirlemiş oluyoruz.
<html>
<head>
<title>BilgiSayaci.Org - CSS Özellik Seçicileri Uygulaması</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<a href="www.google.com">Google.Com</a><br />
<a href="www.facebook.com">FaceBook.Com</a><br />
<a href="www.bilgisayaci.org">BilgiSayaci.Org</a><br />
</body>
</html>
Gördüğünüz üzere alt alta sıralanmış 3 adet linkimiz artık sayfamızdaki yerini almıştır. Şimdi sıra stil sayfamıza geldi. Burada şu şekilde bir satır ile ilk olarak tüm link yazılarımızın bazı özelliklerini belirliyoruz.
a {text-decoration: none; color: #000; font-weight: bold; cursor: pointer;}
Bu tek satırlık css kodumuzda index sayfamıza şu şekilde bir konuşma yapmış olduk :
Sayfada bulunan TÜM link yazılarının altı çizili görünmesini engelle , rengini siyah yap , kalın bir punto ile yazılsın ve :hover edilince mouse imleci pointer özelliğini alsın..
Bu özelliklerin sayfaya uygulandığını gördükten sonra makaleye isim veren özelliğe geçiyoruz. Bunun içinde tek bir satır ile açıklama yapabiliriz. Bir çok değişkeni bulunan bu özellik seçicinin ben ” * ” bileşenli olanını kullanarak linkler içerisinde belirttiğim şarta uygun kelimenin bulunmasını , bulunduğu takdirde de arka plan renginin ” #ddd ” olmasını isteyerek şöyle bir kod yazıyorum :
a[href*="bilgi"]{background-color: #ddd;}
Stil sayfamıza bu kodu ekledikten sonra kaydedip index sayfamızı çalıştırdığımızda göreceğiz ki içerisinde ” bilgi ” kelimesini geçiren link olan ” BilgiSayaci.Org ” yazısının arka planı belirttiğimiz renge büründü.
Bir çok bileşeni bulunan seçicisinin diğer bileşenleri tablo halinde açıklamalarıyla birlikte belirtmek gerekirse şu şekilde olmaktadır :
| a[href] | href özelliği olan herşeyi kapsayarak işlem yapar.. |
| a[href=”www.bilgisayaci.org”] | içeriğinde www.bilgisayaci.org linki bulunan herşeyi kapsayarak işlem yapar.. |
| a[href^=”www”] | Linklerden www ile başlayan herşeyi kapsayarak işlem yapar.. |
| a[href$=”com”] | Linklerden com ile biten herşeyi kapsayarak işlem yapar.. |
| a[href!=”www.bilgisayaci.org”] | Linklerden href özelliği www.bilgisayaci.org olmayan herşeyi kapsayarak işlem yapar.. |
| a[href*=”bilgi”] | Örnek uygulamada da anlatıldığı gibi içeriğinde bilgi yazan tüm linkeri kapsayarak işlem yapar.. |
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 14 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar