CSS Arkaplanlar

Bu sayfada HTML sayfanızın ya da sayfanızda bir bölümün arkaplan rengini, resmini ve özelliklerini nasıl belirleyeceğiniz ile ilgili bilgiler bulunmaktadır.

CSS arkaplan özellikleri bir HTML nesnesine arkaplan eklemenizde yardımcı olur. Bununla ilgili olarak tanıyacağımız CSS kodları:
 

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

 

CSS'de Renk İfadeleri

CSS dosyamızda yer yer renkleri belirtmemiz gerekebilir. Bunun için çeşitli yollar var. Bunlardan en çok kullanılan üç tanesi:
 

• Onaltılık (Hex) Renkler
• RGB (Kırmızı, Yeşil, Mavi) Renkler
• Tarayıcı Renk İsimleri

Onaltılık (Hex) Renkler: #000000 şeklinde önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen sembollerden oluşur. Örneğin #404040 bir rengi ifade etmektedir.

Bu renk kodlarına resim işlem programlarınız yardımıyla (photoshop, paint shop pro gibi) ulaşabilirsiniz.

RGB (Kırmızı, Yeşil, Mavi) Renkler: Bir renk oluştururken kırmızı, yeşil ve mavinin tonlarını belirterek renk oluşturmamızı sağlar. Örneğin rgb( 0, 0, 0 ) siyah rengi belirtir. Mavi bir renk elde etmek istediğimizde Red - Green - Blue üçlemesinde en sonda yer alan mavinin değerini arttırmamız yeterli olur. Yani rgb( 0, 0, 255 ) mavi rengi verir. Windows'daki Paint Brush (MS Paint) programı ve diğer resim editörleri yardımıyla RGB değerlerini alarak renk oluşturabilirsiniz.

Tarayıcı Renk İsimleri: İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz. Örneğin white beyaz, black siyah, blue mavi rengini verecektir.

Aşağıda renklerle ilgili örnek bir kullanım var:
 

      /* Koyu kırmızı */
      p { color: #CC0000; }

      /* Yeşilin bir tonu */
      div { color: line; }

      /* Mavi renk */
      code { color: rgb( 0, 0, 255 ); }

   

 

background-color: Arkaplan Rengi

Bir elementin arkaplan rengini belirlememizi sağlar.
 

      div { background-color: #EFEFEF; }

   

 

background-image: Arkaplan Resmi

Bir element içinde arkaplan resmi kullanmamızı sağlar.
 

      body { background-image: url('resim.jpg'); }

   

Yukarıdaki gibi url('') yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı resim.jpg olarak gösterilmiştir.

 

background-repeat: Arkaplan Tekrarı / Döşeli

Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi sağlar. Dört kullanımı vardır:
 

• no-repeat : Tekrar edilmeyecektir
• repeat : Tekrarlanacaktır / döşenecektir
• repeat-x : Sadece sağa doğru tekrar edecektir
• repeat-y : Sadece aşağı doğru tekrar edecektir

Aşağıdaki kullanım örneğini inceleyelim:
 

      body {

         background-image: url('resim.jpg');

         background-repeat: no-repeat;

      }

   

Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.

 

background-attachment: Arkaplan Sabitliği

Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliği kullanırız.
 

      body {

         background-image: url('resim.jpg');

         background-attachment: fixed;

      }

   

background-position: Resmin Nereye Hizalanacağı

Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.
 

      body {

         background-image: url('resim.jpg');

         background-repeat: no-repeat;

         background-position: right top;

      }

   

Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru hizalanacağını bildirir.

 

background: Arkaplan Belirlemenin Kısa Yolu

Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün. Bunun için kullanacağımız kod: background.
 

      body {

         background: #000000 url('resim.jpg') no-repeat right top;

      }

Yukarıdaki kodda belirtilenler sırasıyla: background-color, background-image, background-repeat ve background-position.

 

CSS Yazılar

Bu sayfada HTML sayfanızda kullandığınız yazıların değiştirebileceğiniz belli başlı özellikleri (renk, hiza, kalın vb) hakkında bilgi verilecektir.

Yazı biçimlendirme ile ilgili komutlardan tanıyacaklarımız:
 

• color
• text-align
• text-decoration
• text-transform
• text-indent

 

color: Yazı Rengi

Yazının rengini belirlemenizi sağlar 
 

      p { color: blue; }

   

text-align: Hizalama

Yazının yatay yönde ne şekilde hizalanacağını belirtmenizi sağlar. En çok kullanılan dört hizalama yöntemi:
 

• left : sol
• right : sağ
• center : ortalanmış
• justify : iki yana yasla

Aşağıda paragrafların iki yana yaslanacağını belirttik:
 

      p { text-align: justify; }

   

text-decoration: Yazı Biçimi

Yazının biçiminde bazı değişiklikler yapmamızı sağlar. Örneğin tarayıcı varsayılanında sürekli A elementlerindeki altı çizgili dekorasyonu kaldırmak için aşağıdaki yazılabilir.
 

      a { text-decoration: none; }

   

text-transform: Yazıda Değişiklik Yap

Yazılan bir yazıyı otomatik olarak tüm harflerini büyük harfle yazmayı ya da tamamını küçük harfle yazmayı sağlar.
 

• uppercase : tüm harfleri büyük harf yap
• lowercase : tüm harfleri küçük harf yap

      h1 { text-transform: upperline; }

   

text-indent: Soldan Boşluk

Bir yazının başında belirtilen büyüklükte boşluk bırakmanızı sağlar. Özellikle paragraflar için kullanılır.
 

      /* 50 piksel ilk satırda boşluk bırakılacak */
      p { text-indent: 50px; }

   

NOT: Piksel (px), inç (in), punto (pt), santim (cm), yüzde (%) gibi stillerin sonuna eklenen ölçüler her zaman sayıya bitişik yazılır. 50px doğru ancak 50 px yanlış.
 

Diğer Yazı Şekillendirme Komutları

line-height: Satır yüksekliğini belirtmemizi sağlar.

letter-spacing: Harfler arasında belirtilen değerde boşluk koyar.

word-spacing: Kelimeler arasında belirtilen değerde boşluk koyar.

 

CSS Yazı Tipleri

Bu sayfada HTML sayfanızda kullandığınız yazıların yazı tipi özelliklerini nasıl değiştirebileceğiniz hakkında bilgi verilecektir.

Yazı tiplerini biçimlendirirken en sık kullandığımız komutlar:
 

• font-family
• font-size
• font-style
• font-weight

 

font-family: Yazı Tipi Belirlemek

Yazı tipleri klasörümüzü açtığımızda birçok yazı tipi görürüz. Bunları HTML sayfamızda kullanmak için adını belirtmemiz gerekir. İşte bu kod yazı tipi seçmemizde bize yardımcı olacaktır.
 

      h1 { font-family: Times New Roman; }

      p { font-family: Times New Roman, Arial, Helvatica; }

      a { font-family: Sans-serif; }

   

Yukarıdaki birinci örnekte sadece tek yazı tipi adı belirttik (Times New Roman), ancak bir sonrakinde aralarına virgül koyarak daha fazla belirttik. Bu tarz kullanımlarda öncelikle dikkate alınan ilk verdiğimiz yazı tipi olacaktır. Eğer verdiğimiz yazı tipi o kullanıcıda yoksa bir sonraki ile görüntülenecektir.

 

font-size: Yazının Büyüklüğü (Puntosu)

Yazı büyüklüğünü font-size ile belirtiriz. Ölçü birimi olarak aşağıdakileri kullanabiliriz:
 

• % : yüzde olarak belirtmek
• in : inç olarak belirtmek
• cm : santim olarak belirtmek
• mm : milimetre olarak belirtmek
• em : varsayılan yazı büyüklüğüne göre oranlamak
• pt : punto olarak belirtmek
• px : piksel olarak belirtmek

Örneğin yazımızın 12 punto olması için yazmamız gereken komut:
 

      h2 { font-size: 12pt; }
   

14 piksellik bir yüksekliğe sahip yazı istiyorsak:
 

      h2 { font-size: 14px; }
   

Varsayılan yazı tipinin %150 fazlasını EM ile belirtirsek:
 

      h2 { font-size: 1.5em; }
   

Yukarıdaki örneği yüzde ile ifade etmek isteseydik:
 

      h2 { font-size: 150%; }
   

font-style: İtalik (Sağa Yatık) Yazmak

Yazımızın sağa yatık (italic) olması için aşağıdaki kodu kullanabiliriz.
 

      h2 { font-style: italic; }

   

Eğer italik bir yazıyı iptal edeceksek aşağıdaki kodu yazmalıyız:
 

      h2 { font-style: normal; }

   

font-weight: Kalın Yazmak

Yazımızın kalın (bold) olmasını istiyorsak aşağıdaki kodu kullanmalıyız.
 

      h2 { font-weight: bold; }

   

Eğer kalın bir yazıyı normal haline dönüştüreceksek aşağıdaki kodu yazmalıyız:
 

      h2 { font-weight: normal; }