Your Ad Here

Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

CSS Renk (Color) ve Art Alan(Background) Özellikler

Renk (Color) özelliği öğelerdeki yazı renklerini tanımlamakta kullanılır (Çoğu kez bu renkler ön alan renkleri -foreground color- denir).

CSS art alan (background) özellikleri bir öğenin art alan renklerini belirtir. Art alan için art alan resimleri tanımlanabilir. Düşey ya da yatay resim yinelenmesi belirtilebilir.
ÖzellikAçıklamaDeğerlerIEFNW3C
color Bir öğedeki yazıların renklerini tanımlamakta kullanılırrenk-hex
renk-adı
renk-rgb		4161
background Bir yöndeki tüm art alan tanımlarının hepsini atamak için kullanılan kısaltmabackground-color
background-image
background-repeat
background-attachment
background-position		4161
background-attachmentBir art alan resmi değişmez mi yoksa sayfayla birlikte kayar mı olduğunu belirtirscroll
fixed		4161
background-colorBir öğenin art alan rengini atarrenk-rgb
renk-hex
renk-adi
transparent		4141
background-imageBir resmi art alan resmi olarak belirlerurl(URL)
none		4141
background-positionArt alan resminin başlangıç noktasını tanımlartop left top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos		4161
background-repeatArt alan resminin nasıl yineleneceğini belirtirrepeat repeat-x
repeat-y
no-repeat		4141

Renk (color) Özelliği

Burada renk tanımı yapılır. Tüm öğeler için kullanılabilir.
Bu özellik öğelerdeki yazı rengini beliritir. Burada kırmızı renk aşağıda tanımlanmıştır:
 
em { color: red }              /* renk adı  */
em { color: #ff0000 }          /* hex değer */
em { color: rgb(255,0,0) }     /* RGB değerleri */

Art Alan (background) Özelliği

Bu özellik tüm art alan özelliklerinin bir arada kullanılabildiği kısa tanımdır. 
body
{ 
background: #FF0000
}

body
{ 
background: url(stars.gif) no-repeat top
}

body
{ 
background: #00FF00 url(stars.gif) no-repeat fixed top
}
Olası değerler:
background-color
background-image
background-repeat
background-attachment
background-position		birden beşe kadar değişik art alan özelliklerini tanımlayabilirsiniz

Varsayılan değer: Yok

Art Alan Rengi (background-color) 

p
{ 
background-color: #00FF00
}

Olası değerler:
renk : Renk değeri ("red" ya da "blue" gibi İngilizce adı) rgb değeri (rgb(255,0,0) gibi) ya da hex değeri (#FF0000 gibi) olabilir.
transparent: Varsayılan değer. Art Alan rengi renksizdir...

Art Alan Resmi (background-image)

Bir resmi art alan resmi olarak atar/tanımlar. Resim bulunamazsa ya da yüklenemezse diye mutlaka art alan rengi tanımlanmalıdır.

body
{ 
background-image: url(stars.gif); 
background-color: #000000
}
Olası değerler:
url(URL): Resmin bulunduğu adres.
none: Varsayılan değer. Art Alan Resmi yok.

Art Alan Yeri (background-position)

Bir art alan resminin başlangıç noktasını belirlemekte kullanılır.
Örnek:
body
{ 
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: top left
}

body
{ 
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: 0% 0%
}
Olası değerler:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right 		Varsayılan değer 0% 0%. Eğer bu değerlerden yalnız birini belirtirseniz ikinci değer center sözcüğüdür.
x% y% İlk değer yatay yönü ve ikinci değer düşey yönü gösterir. En üst sol köşe 0% 0% biçimindedir. En alt sağ köşe ise 100% 100% diye adlandırılır. Eğer yalnız bir değeri tanımlarsanız diğer değer 50% olarak varsayılır.
xpos ypos İlk değer yatay yönü ve ikinci değer düşey yönü belirtir. En üst sol köşe 0 0 noktasıdır. Birim pixel olabilir (0px 0px) ya da CSS birimi. Eğer bir değer tanımlarsanız diğer değer 50% olarak varsayılır. Her zaman yer bildirme ve yüzde değerlerini karışık kullanabilirisiniz.

Art Alan Yineleme (background-repeat) Özelliği

Art alan yineleme özelliği (background-repeat) nasıl art alan resminin yineleneceğini belirtmek için kullanılır.
body
{ 
background-image: url(stars.gif);
background-repeat: repeat-x
}
Olası değerler:

repeat: Varsayılan değer. Resim yatay ya da düşey yinelenir.
repeat-x: Resim yatay yinelenir.
repeat-y: Resim düşey yinelenir.
no-repeat: Art alan resmi yinelenmez.

Art Alan eklentisi (Background-attachment)

Art Alan eklenti özelliği durağan mı yoksa sayfaya beraber kayar mı olduğunu tanımlamakta kullanılır.
Örnek: 
body 
{ 
background-image: url(stars.gif); 
background-attachment: fixed
}
Olası değerler:
scroll : Varsayılan değer. Art Alan resmi sayfayla beraber kayar.
fixed : Art Alan resmi sayfa kaysa bile değişmeden kalır.