Html Elemanlarına Parametre Değerlerine Göre Farklı Stil Uygulama


Twitter'da Paylaş Favorilerime Ekle

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.

img[alt ~= “doğa”] { … }

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.

YORUMLAR



CSS Dersine Ait Diğer Konular: