|
CSS 3
(Cascading Style Sheets = Yığılmalı Stil Kağıtları)
|
Sınıf ve Kimlik Seçiciler
Stillerden bahs ederken genellikle Html etiketlerine stil atadık. Değil mi? İlk dersimiz de sınıf seçicilerden bahs etmişiz ama çok kapsamlı değil. Şimdi konumuz Sınıf ve Kimlikli Seçiciler... Bunlar diğer Css kodları ile aynı yere yazılırlar.. Yani <head>..</head> etiketlerinden önce...
|
| Sınıf Seçiciler (Class Selector) |
Öncelikle Sınıf Seçicilerden söz edelim. Bir Sınıf Seçici oluşturalım:
|
|
.yesil {color: #009900}
|
Bu kadar basit. Ama bununla iş bitmiyor. Oluşturduğumuz Sınıf Seçici' yi bir Html koduna eklemeliyiz. Ekleyelim:
|
|
<font class="yesil">Bu yazı Yeşil olmalı</font>
<p class="yesil">Bu paragraf Yeşil olmalı </p>
|
Sınıf Seçici' mizi Html kodumuza eklemek için "class" deyimini kullandık. Hangi Html koduna eklediysek Sınıf Seçici' mizi o kodun kapanmasından önce ne yazdı isek o Sınıf Seçicimizin özelliklerini taşıyacak. Biz burada<font> ve <p> etiketleri için kullandık Sınıf Seçici' yi.
Yeşil ya da başka bir renk. Hangi yazının hangi renkte olmasını istiyorsak Sınıf Seçiciler bizim için bunu sağlıyorlar. Sadece renk değil. 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 yazılar kalın olmalı! </p>
Böylece o paragraftaki bütün yazılar kalın olacaktır. Biz burada sınıf seçicimizin özelliklerini belirlerken sadece kalın olsun demedik. Aynı zamanda font özelliklerinden yazı tipi ve yazı büyüklüğünü de belirledik. Ayrıca bir de yazımızın rengini de belirledik.
|
| Kimlik Seçiciler (Id Selector) |
|
Kimlik seçicilerin Sınıf Seçiciler' den pek bir farkı yoktur. Sadece Kimlik seçicileri belirlerken başına # işaretini koyarız ve bunu html kodlarına bağlarken class değil iddeyimini kullanırız.
Şimdi bir Kimlik seçici oluşturalım:
|
|
#mavi {color: #0066CC}
|
|
Şimdi bunu bir html koduna bağlayalım:
|
|
<p id="mavi"> Bu paragraf mavi olmalı! </p>
|
|
Gördüğünüz gibi bu sefer class yerine id ile html kodumuza bağladık Css stilimizi.
Kimlik seçicilerde de Sınıf seçicilerde olduğu gibi yazının bir çok özelliğini belirleyebiliriz.
|
| |
