Tweet

CSS | Renkler ve Arkaplanlar

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

CODE:
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.

CODE:
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

CODE:
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 < body>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.

CODE:
<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.

CODE:
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.

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


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

CODE:
<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ı <body>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.

CODE:
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.

CODE:
body {background-image: url(button.png);
background-repeat: repeat;
background-attachment: fixed;
font-family: Sans Serif, Garamond;}


Dia
okanatabag@gmail.com
4 Nisan 2006 15:23

İlgili Olabilecek Makaleler


Yorumlar (0)




Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg