Bir önceki yazıda Css’in neden kullanıldığı ve nasıl kullanıldığı ile ilgili bir giriş yapılmıştı.Css kodlarının html sayfasına nasıl import edileceğinden bir önceki yazıda bahsetmiştik.Bu yazıda Css’in syntax’ı ve özelliklere giriş yapacağız.Css’te syntax genel hatlarıyla
selector{declaration} denilen bir yapıdadır.Selector denilen seçici kısım tag,class ismi veya id olabilir.Declaration denilen bildirim kısmında ise özellik ve alacağı değer tanımlanır.Örneklendirecek olursak;
[php] body{background-color:red;} /* Bu satırda body ile belirtilen seçici kısmının arkaplan rengi kırmızı değerini alacaktır. */[/php]
Seçici tanımlaması 3 şekilde yapılabilir.İlk olarak eğer html tagleri ile seçilen bir kısmın stil çalışması yapılacaksa sadece başlangıçta tag ismini yazmamız yeterli olacaktır.
[php] body{background-color:white;font-size:15px;} Bu şekildeki bir tanımlama body kısmındaki arka plan rengini beyaz yapıp body kısmında yazı boyutunu php olarak ayarlayacaktır. [/php]
2. olarak yazdığımız html kısmı üzerinde daha kolay işlemler yapabilmek için kodu kod parçacıklarına ayırıp bu parçalara id veya class ismi vererek tanımlayabiliriz.Bu tanımlamalara bağlı olarak css syntaxı küçük bi değişiklik gösterecektir.Eğer kod parçacığımız id ile tanımlanmışsa css kısmında
#hakkimizda{font-family:Calibri;font-size:small;} bir tanımlama yaparız.Burada hakkımızda html kısmındaki id dir.
Eğer kod parçacığı class ismi olarak tanımlanmışsa css kısmında
.linkhover {background:url(“../images/link.gif”) no-repeat center;} şeklinde bir tanımlama yapılır.
Ayrıca genelde pek kullanılmasa da bir html tagının belli bir özelliği üzerinde değişiklik yapılması istenirse
p.center{text-align:center;} şeklinde tanımlama yapılabilir.Bu şekilde p taglerinin center sınıflarında yazı sayfada ortalanır.
Özelliklere geçecek olursak ilk olarak azimuth özelliğiyle başlayacak olursak azimuth özelliği sayfada kullanıcak seslerin nereden geleceğini belirlememezi sağlar.Özellikle görme engelliler için sesin nereden geldiği önemli olan bir özelliktir.Aldığı değerler:behind,center,center-left;center-right,far-left,far-right,left,left-side,leftwards,right,right-side;rightwards,inherit olarak tanımlanmıştır.Bunlar yön belirten ifadeler olduğu için anlatma gereği duymadım.
2.özellik olarak background ile ilgili değişiklik yapabileceğimiz background özelliklerine bakacağız.Bu özellikler background,background-color,background-image;background-image,background-repeat,background-attachment ve background-position özellikleridir.
background:… özelliği arkaplanın renginden arkaplanın transpanslığına,buttonların nasıl gözükeceğinden buton yazılarına kadar arkaplan ile ilgili genel değişiklikler yapma fırsatı sunar.
background-color:Bu özellik ile arkaplan rengini düzenleriz.renk tanımlaması 3 şekilde yapılabilir.Birincisi her bir rengin hex değeri vardır.İkinci tanımlama şekli:RGB değerinin girilmesidir.3.tanımlama şekli ise renk isminin yazılmasıdır.Hepsini bir örnekte gösterecek olursak;
[php] body{background-color:#FF0000}
body{background-color:rgb(255,255,0)}
body{background-color:red}
[/php]
background-image:Arkaplana bir resim yüklememize izin verir.Resmin url yolunu göstermemiz gerekiyor.
[php] body{background-image:url(‘../images/scroll-left.gif’)} [/php]
background-repeat:Arkaplan resminin yatayda ve dikeyde tekrarlanıp tekrarlanmaması seçeneklerini düzenler.
[php] body{background-repeat:repeat-x;} yatayda tekrarlar. no-repeat denildiğinde background tekrarlanmaz.[/php]
background-position: Arkaplanın sayfadaki konumlandırılmasını sağlar.
[php] body{background-position:left;} left,right,inherit hazır seçeneklerinin yanında pixel olarak değer verip sayfanın konumunu ayarlayabiliriz. [/php]