CSS 3
(Cascading Style Sheets = Yigilmali Stil Kagitlari) |
Sinif ve Kimlik Seçiciler
Stillerden bahs ederken genellikle Html etiketlerine stil atadik. Degil mi? Ilk dersimiz de sinif seçicilerden bahs etmisiz ama çok kapsamli degil. Simdi konumuz Sinif ve Kimlikli Seçiciler... Bunlar diger Css kodlari ile ayni yere yazilirlar.. Yani <head>..</head> etiketlerinden önce...
|
| Sinif Seçiciler (Class Selector) |
Öncelikle Sinif Seçicilerden söz edelim. Bir Sinif Seçici olusturalim: |
| .yesil {color: #009900} |
Bu kadar basit. Ama bununla is bitmiyor. Olusturdugumuz Sinif Seçici' yi bir Html koduna eklemeliyiz. Ekleyelim: |
<font class="yesil"> Bu yazi Yesil olmali </font>
<p class="yesil"> Bu paragraf Yesil olmali </p> |
Sinif Seçici' mizi Html kodumuza eklemek için "class" deyimini kullandik. Hangi Html koduna eklediysek Sinif Seçici' mizi o kodun kapanmasindan önce ne yazdi isek o Sinif Seçicimizin özelliklerini tasiyacak. Biz burada <font> ve <p> etiketleri için kullandik Sinif Seçici' yi.
Yesil ya da baska bir renk. Hangi yazinin hangi renkte olmasini istiyorsak Sinif Seçiciler bizim için bunu sagliyorlar. Sadece renk degil. Font özelliklerini de belirleyebiliriz. |
.kalin { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt;
font-weight: bold; color: #000000} |
kalin isimli CSS Stilimizi bir paragrafa ekleyelim.
<p class="kalin">Bu paragraftaki yazilar kalin olmali! </p>
Böylece o paragraftaki bütün yazilar kalin olacaktir. Biz burada sinif seçicimizin özelliklerini belirlerken sadece kalin olsun demedik. Ayni zamanda font özelliklerinden yazi tipi ve yazi büyüklügünü de belirledik. Ayrica bir de yazimizin rengini de belirledik.
|
| Kimlik Seçiciler (Id Selector) |
Kimlik seçicilerin Sinif Seçiciler' den pek bir farki yoktur. Sadece Kimlik seçicileri belirlerken basina # isaretini koyariz ve bunu html kodlarina baglarken class degil id deyimini kullaniriz.
Simdi bir Kimlik seçici olusturalim: |
| #mavi {color: #0066CC} |
Simdi bunu bir html koduna baglayalim: |
<p id="mavi"> Bu paragraf mavi olmali! </p> |
Gördügünüz gibi bu sefer class yerine id ile html kodumuza bagladik Css stilimizi.
Kimlik seçicilerde de Sinif seçicilerde oldugu gibi yazinin bir çok özelligini belirleyebiliriz. |
|
