Renkler
Renk tanımlama işlemini daha önce anlatmıştık. Bir örnekle hatırlayalım.

body {color:black;}

A:link {color: #808080;}

A:visited {color: silver;}

A:active {color: #333333;}

Metinlerin renkleri ayarlanabildiği gibi metni çevreleyen çizgilerin de renkleri
CSS iler belirlenebilir.

p.cerceve {color: purple; border-style: solid;border-color: black;}

Renk tanımımda dikkat edilecek önemli bir nokta vardır. Bir eleman için
renk tanımı yapıldığında o elemanın içerisinde yer alan diğer elemanlarda o
renk ile gösterilecektir. Bu özelliğe “inheritance” denir. Mesela

body {color: red;}

tanımı yapıldığında aksi belirtilmediği sürece HTML dökümanı içerisinde yer
alan bütün metinlerin kırmızı olmasını zorlarsınız. < body> iminin doğal alt
üyeleri olan

< p>< h1>

gibi imler [/php]< body>[/php]iminin özelliklerini miras alırlar.

Arkaplan Rengi

Bütün elemanlar için geçerli olmasada çoğü HTML imi için bir arkaplan rengi
belirlenebilir.

<pre class="alinti">Bu yazi

pre.alinti {background-color: green;}

CSS buyruğu ile biçimlendirilmiştir.</pre>

Yukarıdaki örnekte

<pre>

imi ve “alinti”sınıfı ile tanımlanan her metinin
arkaplan rengini yeşil olarak tanımlamış bulunmaktayız.

Arkaplan Resmi

Bu özellikte arkaplan rengi gibi bütün elemanlar için uygulanamaz. Bir örnek
verelim.

body {background-image: url(meg.jpg)}

Burada urlanahtar kelimesi resimlerin yerini belirtmek için kullanılır. Resimlerin
yerel olarak makinade bulunması gerekmez. Tam URL (Uniform Resource
Locator) kullanarak resim belirtebilirsiniz.

body {background-image: url(http://www.w3c.org/background.jpg)}

Arkaplan resimleri sadece imi için kullanılmak zorunda değildir. Bazı
HTML imleri için de kullanabilirsiniz.

<p style="background-image: url(gozler.jpg);background-color: black;">Bu paragrafın arkaplanı olarak bir resim kullanılmıştır.

Bunun için

class="alinti">style="background-image: url(gozler.jpg);buyruğu kullanılmıştır.</p>

Güzel arkaplan resimleri oluşturmak için CSS’nin sağladığı birkaç özeliklen
bahsetmekte yarar var. Diyelim ki sanaldoku sayfanızın sol tarafında
dikey olarak yerleştirilmiş bir süs istiyorsunuz. bunun için normalde yapman
ız gereken şey yüksekliği az ama genişliği fazla olan bir resim dosyayı
oluşturmak, sonra da bu resim dosyayını imi içerisinde arkaplan resmi
olarak göstermenizdir. Sanaldoku tarayıcıları bur resmi dikey olarak uzatacaklar
ı için resminiz güzel duracaktır. Ancak oluşturacağınız resmin sadece
sol tafarında bir şeyler yer alacak geri kalan büyük kısım boşluktan oluşacaktır.
Bu etkiyi yaratmak için CSS’nin öngördüğü metod çok basit. Sol tarafa
koymayı istediğiniz resmi normal boyutları ile ele almak ve resmi dikey
doğrultuda tekrarlamasını sağlamak. Bunu yapmak için background-repeat
özelliği kullanılır. 4 değer alabilir; repeat, repeat-x, repeat-y ve none. Tahmin
ettiğiniz gibi repeatdeğeri resmin dikey ve yatay doğrultularda tekrarlanmas
ını sağlar. repeat-xyatay doğrultuda, repeat-yise dikey doğrultuda
aynı işi yapar. noneise resmi olduğu gibi bırakır. Bir örnek verelim.

body {background-image: url(button.png);

background-repeat: repeat;

font-family: Sans Serif, Garamond;}

Yukarıda anlatılan özelliklere ek olarak background-attachment özelliği bahsedilebilir.
iki değeri vardır; scroll ve fixed . scroll seçeneği arkaplanın
metinler kaydırıldığında onlarla beraber hareket etmesini sağlar. fixed ise
arkaplanın sabit kalmasını sağlar.

body {background-image: url(button.png);

background-repeat: repeat;

background-attachment: fixed;

font-family: Sans Serif, Garamond;}

Okan ATABAĞ

Benzer Yazılar

• CSS İle Radius (Oval) Kenarlar
• CSS ve HTML Arasındaki Fark
• CSS Giriş
• CSS | Hizalama
• CSS | Fontlar
• CSS | Metin İşlemleri
• CSS | Uzunluk Birimleri
• CSS | Birimler
• CSS | Söz Dizilimi
• CSS | Tarayıcıya css tanıtmak