Tweet

Makaleler » CSS

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 | 4 Nisan 2006 15:23 | Yorum(0) | devamı »

CSS | Fontlar

Font Aileleri

* Serif
* Sans Serif
* Monospace
* Cursive
* Fantasy

Yukarıdaki isimler genel font ailelerini tanımlarlar. Serif font ailesindeki fontlarda
karakterlerin kenarlarında küçük süslü çıkıntılar vardır. Sans Serif fontlarda
bu çıkıntılar yoktur.

CODE:
body {font-family: Sans Serif;}


Font isimlerini ise aşaçıdaki gibi belirtebilirsiniz.

CODE:
body {font-family: Sans Serif, Verdana;}


Font kullanımına güzel bir Örnek verelim. Diyelim ki sayfaların altına imzımızı
atmak istiyoruz. Bunun için bir font belirleyebiliriz.

CODE:
p.imza {font-family: Author99, ScriptTM, cursive;
text-align: left;}


Bu tanımı yaptıktan sonra HTML içerisinde

CODE:
<p class="imza">Yazar ismi</p>

buyruçu verildiçinde Yazar ismi" tümcesi belirtilen fontta ve sola bitişik
olarak yazılacaktır.

font-size

Fontun büyüklüçünü belirtir. xx-small, x-small, small, medium, large, xlarge,
xx-large seçenekleri vardır.

CODE:
<p style="font-size: xx-small;">Bu paragraf xx-small boyutunda </p>
<p style="font-size: x-small;">Bu paragraf x-small boyutunda </p>
<p style="font-size: small;">Bu paragraf small boyutunda </p>
<p style="font-size: medium;">Bu paragraf medium boyutunda </p>
<p style="font-size: large;">Bu paragraf large boyutunda </p>
<p style="font-size: x-large;">Bu paragraf x-large boyutunda </p>
<p style="font-size: xx-large;">Bu paragraf xx-large boyutunda </p>
Dia | 27 Mart 2006 14:43 | Yorum(0) | devamı »

CSS | Metin İşlemleri

Hizalama

text-indent

Yaygın olarak paragrafların ilk cümlelerin soldan içeriye kaydırılması için
kullanılan bir özelliktir.

CODE:
p {text-indent: 1in}


text-align

4 tane değeri olabilir; left, right, center ve justify. Kolaylıkla anlaşılabileceği
şekilde left sola, right sağa yaslama işlemi yapar. center ise yazıyı ortalar.
justify ise yazıyı sağ ve sol marjinlere uyacak şekilde ayarlar.

CODE:
h1,h2,h3,h4,h5 {text-align: center}


buyruğu ile bütün başlıkların ortalanmasını sağlayabilirsiniz.


white-space

Metnin içerisinde geçen başlukların tarayıcı üzerinde nasıl görüntülenecğini
belirler. üç farklı değeri olabilir; pre,nowrap, normal. Normal seçeneği extra
boşlukların ihmal edilmesini sağlar. Pre seçeneği boşlukların olduğu gibi
görüntülenmesini sağlar. Nowrap ise metnin satır atlamasını engeller. Satır
atlamak için farklı buyruklar kullanmak zorunda kalırsınız.

CODE:
<p style="white-space: nowrap;">Bu paragrafın içerisinde

"nowrap" seçeği kullanılmıştır. nowrap metnin boylu boyunca
devam etmesini sağlar.

<br>Satrı atlamak için br buyruğunu kullanmak zorundasınız.</p>


Yukarıdaki buyruğun tarayıcıda (tarayıcı) elde edeceğimiz görüntüsü aşağıdaki
gibi olacaktır.
Bu paragrafın içerisinde "nowrap" seçeği kullanılmıştır.
nowrap metnin boylu boyunca devam etmesini sağlar.
Satrı atlamak için br buyruğunu kullanmak zorundasınız.


word-spacing

Bu özellik kelimeler arasındaki boşlukları belirmeye yarar. Ornek verelim:

CODE:
<p style="word-spacing: normal;">Bu paragrafta kelimeler
arasındaki
boşluk "normal" olarak tanımlanmıştır.</p>

<p style="word-spacing: 0.5em;">Bu paragrafta kelimeler
arasındaki
boşluk "0.5em" olarak belirlenmiştir.</p>


_Ilk örnekte kelimeler arası boşluk normal olarak bırakılacak ama ikinci örnekte
boşluk yüzde 50 kadar artırılmıştır.


text-transform

Dört seçeneği vardır; uppercase, lowercase, capitalize ve none. Uppercase
bütün harfleri büyük harfe, lowercase bütün harfleri küçük harflere, capitalize
kelimelerin ilk har
erini büyük har
ere çevirir. none ise hiçbir şey yapmaz.
Dia | 25 Mart 2006 19:21 | Yorum(1) | devamı »

CSS | Uzunluk Birimleri

Mutlak Uzunluk Birimleri
 Inches (in)
 Santimetre (cm)
 Milimetre (mm)
 Points (pt)

Bu uzunluk birimleri adı üzerinde mutlak uzunluklar belirlerler. Bu yüzden
sanaldoku tasarımında çok kullanışlı değillerdir çünkü bilgisayardan bilgisayara
bir çok özellik değişmektedir. Özellikler monitörlerin değişik ebatlarda
ve özelliklerde olması bu birimlerin kullanılmasını zorlaştırmaktır. 14 inch lik
bir monitörde güzel uygun görünen bir resim 17 inch'lik monitörde kötü görünebilmektedir.

Bağıl Uzunluk Birimleri

Bu kavramı bir örnekler açıklayalım.

CODE:
h1 {font-size: 24px;}
h1 {margin-left: 1em}


Burada ilk önce h1 için 24 piksellik bir font büyüklüğü öngördük. Sonra soldan
içeriye doğru 1em'lik girmesini sağladık. em birimi önceden tanımlanmış
font'un büyüklüğüne eşit olacak sekilde belirlenmiştir. Bu durumda h1 soldan
içeriye 24 piksel kaydırılacaktır.
Fakat bu aşamada ince bir nokta devreye giriyor. Aşağıdaki örneği inceleyelim.

CODE:
<p>Bu paragraf içerisinde <small>küçük</small>
bir kelime var</p>
small {font-size: 0.8em}


Normalde small imi içerisinde yer alan küçük" kelimesi içerisinde bulunduğu
cümleden %20 oranında kücük yazılacaktır. tarayıcılar bu işlemi gerçekleştirirken
fontun etki etttiği cümledeki x" harini referans alırlar. Ne yazık ki
her font için x" harfinin büyüklüğü değişik olacaktır. Bu sebeple kücük"
kelimesi her font için farklı büyüklüklerde gösterilecektir.
Dia | 24 Mart 2006 17:23 | Yorum(0) | devamı »

CSS | Birimler

Tanımlı Renkler

Isimleri ile cagrılabilecek ve yaygın tarayıcıların desteklediği 16 ana renk
vardır. Bu 16 renk Windows isletim sisteminden geliyor. Windows'un ilk
zamanlarında VGA monitörlerde kullanılabilen renkler bu 16 renk idi. Bu
standart 16 renk haricinde bazı tarayıcı'ların tanıdığı renkler de mevcuttur.
Mesela orange" 16 renk icerisinde olmamasına rağmen bazı tarayıcı'larda
kullanabilirsiniz.

RGB Kullanarak Renk Tanımı
RGB kelimesi Red, Green ve Blue kelimelerinin baş harflerinde olusturlmuştur.
Kırmızı, Yesil ve Mavi renkleri karıştırarak bütün renkleri ifade etmek mümkü
ndür gerçegine dayanır. Bu sistemde hangi renkten ne kadar katkı yapılacağı
belirlenir ve buna göre renk oluşturulur.

CODE:
rgb(100%, 100%, 100%)


Yukarıdaki örnekte 3 ana renkten 100%'lük katkılar sağlanarak bir renk
oluşturuluyor. Bu beyaz renge karşılık gelmektedir. Aşağıdaki örnekte gri
rengin tonlarını nasıl elde edebileceğimizi görüyoruz.
CODE:
<h1 class="bir">H1 class="bir" tipinde bir başlık<h1>
<h1 class="iki">H1 class="iki" tipinde bir başlık<h1>
<h1 class="uc">H1 class="uc" tipinde bir başlık<h1>
<h1 class="dort">H1 class="dort" tipinde bir başlık<h1>
<h1 class="bes">H1 class="bes" tipinde bir başlık<h1>
<h1 class="alti">H1 class="alti" tipinde bir başlık<h1>

h1.bir {color: rgb(0%,0%,0%);}
h1.iki {color: rgb(20%,20%,20%);}
h1.uc {color: rgb(40%,40%,40%);}
h1.dort {color: rgb(60%,60%,60%);}
h1.bes {color: rgb(80%,80%,80%);}
h1.alti {color: rgb(100%,100%,100%);}


Sayılar Kullanarak Renk Tanımı

Yüzdelik ifade yerine sayı kullanarak da renkleri ifade edebiliriz. Bu sayılar
0 ile 255 rakamları arasında olmak zorundadır.

CODE:
rgb(255,255,255)


Yukarıdaki örnekte beyaz reng tanımlanmıştır.
Hexadecimal Kullanarak Renk Tanımı
Bu yöntemde belirli bir renge karşılık gelen hexadecimal sayılar kullanılır.

CODE:
h1 {color: #FFFFFF;}


Dikkat etmesi gereken nokta sayıdan önce #simgesinin kullanılmasıdır.
Dia | 20 Mart 2006 15:23 | Yorum(0) | devamı »


Online Coders
  Online (0)
  Ziyaretçi (0)

Desteklediklerimiz

Teknoloji


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