Html Elemanlarına Parametre Değerlerine Göre Farklı Stil Uygulama
Html etiketlerine uygulanacak stilleri, parametrelerine göre belirleyebiliriz.
etiketAdi [parametreAdi] { … }
Yukarıdaki gibi bir kullanım ile belirtilen etiketlerden, belirtilen parametreye sahip olanlara stil uygulayabiliriz.
Örneğin title parametresine sahip olan resimlere kenarlık uygulanmasını sağlayalım.
img[title] {
border: 2px solid blue;}
Parametrenin değerinin de kontrol edilmesini, sadece belli değerlere sahip olan etiketlere stilin uygulanmasını istersek;
etiketAdi [parametreAdi = degeri] { … }
şeklinde kullanabiliriz. Örnek:
input[type="text"] {
background-color: +;}
img[title="Manzara"] {
border: 2px solid green;}
a[target=”_blank”] {
text-decoration: underline;}
Etiket adı belirtilmezse tüm etiketler içinde o parametreye sahip olanlara uygulanır.
[title="Manzara"] {
border: 2px solid green;}
Eşittir yerine farklı operatörler kullanarak kapsamı daraltabilir veya genişletebiliriz.
*=Operatörü
Parametre değeri içinde belirtilen ifadenin geçtiği tüm etiketlere stilin uygulanmasını sağlar.
Aşağıdaki örnekte class parametresi içinde “alt” ifadesi geçen tüm etiketlere stilin uygulanması sağlanmıştır.
[class*="alt"] {
Border-bottom: 2px solid gray; }
~= Operatörü
Belirtilen değerin boşluklarla ayrılacak şekilde geçtiğin etiketlere uygulanmasını sağlar.
Yukarıdaki örnekte alt parametresi içinde “doğa” kelimesi geçen resimlere stil uygulanacaktır. Ancak bu kelime tam olmalıdır. Örneğin alt=”doğal” olan etiketlere uygulanmazken, alt=”harika bir doğa” şeklindekilere uygulanır.
|= Operatörü
Bu operatör kullanıldığında parametrenin şarta uyması için belirtilen ifade ile başlamalı ve kelime tam olarak aynı olmalı ya da tire (-) işareti ile devam etmelidir.
Mesela aşağıdaki stil “sol, sol-ust, sol-alt” vb. isimdeki class’ların uygulandığı etiketler için geçerli olacaktır. Ancak “solAlt” veya “solUst” gibi isimler geçerli olmayacaktır.
[class|="sol"] {
Border-left: 2px solid gray; }
^= Opleratörü
Parametre değeri belirtilen ifade ile başlayan tüm etiketlerde geçerli olmasını sağlar.
[class^="sol"] {
Border-left: 2px solid gray; }
Bu örnekteki stil, “sol, sol-ust, sol-alt, solAlt, solUst” vb isimdeki class’ların uygulandığı tüm etiketler için geçerli olacaktır.
$= Operatörü
Parametre değeri belirtilen ifade ile biten tüm etiketlerde geçerli olmasını sağlar.
[class$="alt"] {
Border-bottom: 2px solid gray; }
Html Elemanlarına Parametre Değerlerine Göre Farklı Stil Uygulama, sadece parametresi olan etiketlere stil uygulama, parametreye göre stil verme
KONU İLE İLGİLİ ÖRNEKLER
Bu konu ile ilgili örnek bulunmamaktadır.
7344 kez okundu.