STİL ŞABLONU ÇEŞİTLERİ
3. Seçiciler (Selectors):
Bir etikete genel css uyguladığımızda, o etiket kullanıldığı her yerde verilen özelliklere sahip olur.
Stil Şablonu seçicileri sayesinde aynı etikete farklı yerlerde farklı stiller uygulayabiliriz.
Yani oluşturduğumuz css seçicisini bir etikete istediğimiz yerde uygulayıp, istemediğimiz yerde uygulamayabiliriz. Hatta aynı etikete farklı yerlerde, farklı biçimlendirmeler de uygulayabiliriz.
İki tür seçici bulunmaktadır:
a. id Seçiciler:
-
Tanımlanırken isminin önüne “#” konur.
-
Herhangi bir etikete uygularken ise “id” parametresi kullanılır.
-
id parametresi kullanıldığı elemanın aynı zamanda kimliğini belirttiği için, aynı id seçici birden fazla etikete uygulandığında sorun yaşanabilir. Örneğin aşağıdaki örnekte buyuk isimli stil şablonu hem b etiketine, hem de u etiketine uygulanmıştır. Biçimlendirme konusunda sıkıntı yaşanmayacak ve iki etikete de belirtilen özellikler uygulanacaktır. Ancak sayfada bu id'leri kullanan bir programlama dili (Asp.Net, Php, Javascript gibi) varsa, sayfada aynı isimde iki eleman olacağı için sorun yaşanacaktır.
-
Uygulanmadığı etiketlerde bir değişiklik meydana getirmez. Örneğin aşağıdaki örnekte birinci b etiketine buyuk isimli stil seçici, ikinci b etiketine kucuk isimli stil seçici uygulanmışken, üçüncü b etiketine herhangi bir css şablonu uygulanmamıştır.
<head><style type=”text/css”>
#buyuk
{
Font-size:24pt;
}
#kucuk
{
Font-size:9pt;
}
</style></head>
<body>
<b id=”buyuk”>Bilgisayar</b> <br/>
<b id=”kucuk”>Bilgisayar</b> <br/>
<b>Bilgisayar</b> <br/>
<u id="buyuk">Bilgisayar</u>
</body>
Yukarıdaki sayfa tarayıcıda çalıştırıldığında aşağıdaki gibi görünecektir:
Bilgisayar
Bilgisayar
Bilgisayar
Bilgisayar
b. Sınıf Seçiciler:
-
Tanımlarken isminin önüne “.” konur.
-
Uygularken ise “class” parametresi kullanılır.
-
Birden fazla etikete uygulanabilir, uygulanmadığı etiketleri etkilemez.
<head><style type=”text/css”>
.buyuk
{
Font-size:24pt;
}
.kucuk
{
Font-size:11pt;
}
</style></head>
<body>
<b class=”buyuk”>Bilgisayar</b> <br/>
<b class=”kucuk”>Bilgisayar</b> <br/>
<p class="kucuk">Gördüğünüz gibi oluşturduğum sınıf seçicisini istediğim etikete uygulayabiliyorum.</p>
<b>Buraya ise hiç bir stil uygulamadık.</b>
</body>
Bir Etikete Özgü Class Oluşturma
.classAdi şeklinde oluşturduğumuz sınıf seçicilerini tüm etiketler için kullanabiliriz. Bununla birlikte eğer istersek sadece bir etikete özgü class oluşturabiliriz. Örneğin;
Bu örnekte yazılacak olan özellikler sadece buyuk class'ı uygulanan p etiketlerine uygulanacaktır. Diğer etiketlerde buyuk class'ı işe yaramayacaktır.
Bir Etikete Birden Fazla Class Uygulama
<p class="class1 class2">...</p>
Yukarıda gösterildiği gibi bir html etiketine birden fazla class, aralarında bir boşluk bırakarak uygulanabilir.
Not: Bir etiket hem genel stil şablonu ile biçimlendirilmiş, hem de id veya class seçici uygulanmış ise iki şablondaki özellikler de etikete uygulanır. Bazı özellikler hem genel şablonda, hem de seçici içerisinde belirtilmiş ise, class veya id içindeki değerler geçerli olur.
css class ve id kullanımı, sınıf seçiciler, id seçiciler, css class ile id farkı, css class ve id örnekleri
KONU İLE İLGİLİ ÖRNEKLER
Kendin dene butonuna tıklayarak kodları görebilir, değiştirebilir ve inceleyebilirsin.
Örnekte de göreceğin gibi id ile class kullanım şekilleri aynı olup fark id'nin tek bir etikete, class'ın ise çok sayıda etikete uygulanabilmesidir.
|
Tablo ve kutular için yuvarlak köşeli kenarlık oluşturma
|
Kendin Dene
|
(Bu örnekte bazı özellikler, her tarayıcı için farklı şekilde yazılmıştır.)
#tablo1
{
background-color:#ffffff;
color: #696969;
width: 360px;
/* radius özelliği ile köşelerin yuvarlaklığını ayarlayabiliriz */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 7px;
/* shadow özelliği de gölge efekti sağlar */
-moz-box-shadow: 0 0 5px #779900;
-webkit-box-shadow: 0 0 5px #779900;
box-shadow: 0 0 5px #779900;
}
13741 kez okundu.