Bir Önceki Dersimizde CSS'ye Giriş Yaptık Basit Bir Şekilde Temel Kodları Anlattık Şimdi İse Basit Şekilde CSS Kod Yapısını Anlatacağım. Bir Önceki Dersimize Buradan Ulaşabilirsiniz.
CSS Kod Yapısı
CSS‟nin söz dizimi aĢağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana
bölümden oluĢur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır.
- Seçici olarak tüm HTML etiketlerini kullanabileceğimiz gibi ileride göreceğimiz ID (kimlik) ve Class (sınıf) seçicilerini de kullanabiliriz.
- Bildirim bloğu süslü parantez ile açılır ve kapanır. Bildirimler arasında “;” (noktalı virgül) kullanılır. Her Bildirim, "Özellik" ve "Değer" içerir. Özellik ve değer arası “:” (iki nokta üst üste) ile ayrılır.
- Özellik, değiĢtirilmek istenen stil özniteliğidir. Örnek; color, font-size vb.
- Değer ise stil özniteliklerine verilen değerlerdir. Örnek; blue, 14px vb.
Seçiciler Class(Sınıf), ID Ve Tag(Etiket) Seçiciler Olmak Üzere 3'e Ayrılır.
Class(Sınıf)Seçicisi
Sınıf Seçiciler Birden Fazla Öğeye Kullanılabilir. Örneğin "degisken" Adında Bir Sınıf Seçicimiz Olsun Ve Bunun Özelliği Olarak da Rengini Turuncu Ve Yazı Boyutunun 15 Punto Olmasını Sağlayalım.
.degisken{
color:orange;
font-size:15pt;
}
ID Seçicisi
Sınıf (class) Seçicilerini Birden Fazla Ögeye Atayarak Kullanabiliyorduk. ID Seçicileri İse Yalnız Bir Öğeye Atanır. Örneğin "Bilgi_Tohumu" Adlı Bir Stil Oluşturalım. Özellik Olarak da Yazı Renginin Mavi Ve Ortalı Olmasını Sağlayalım.
#Bilgi_Tohumu{
text-align:center;
color:blue;
}
Etiket (Tag) Seçicisi
Etiket Seçicileri Aynı Türden Tüm Öğelere(Etiketlere), İstediğimiz Stili Uygulamak İçin Kullanılır.Örneğin Sayfamızdaki Karakterlerin Tümünün Rengini Sarı Yapalım.
body{
color:yellow;
}
Bu Kodları Denemek İstersniz Kendi HTML Ve CSS Sayfanızda Kopyalayarak Deneyebilirsiniz.CSS' de Açıklama Kullanmak
Her Programlama Dilinde Olduğu Gibi CSS'de de Açıklama Kısmı Var. Açıklama Kısmını Eklediğimiz Zaman Sadece Kod Kısmında Görünür. Kullanıcıya Bir şey Gözükmez. CSS'de Açıklama /*Açıklama Buraya Yazılır.*/ Şeklinde Kullanılmaktadır.
/*Açıklama Kısmı*/
.degisken{
/*Renk Turuncu Olacak*/
/*Renk Turuncu Olacak*/
color:orange;
/*Yazı Boyutu 15 Punto Olacak*/
font-size:15pt;
0 yorum:
Yorum Gönder
Konu Hakkındaki Yorumlarınız Ve Düşünceleriniz Bizim En Değerli Kaynağımızdır. Lütfen Bir Yorumlarınızı Ve Düşüncelerinizi Eksik Etmeyin... :)