Bu dersimizde başta <div> olmak üzere HTML etiketlere CSS özelliklerinin nasıl uygulanacağını göreceğiz.

div Etiketi

Tablosuz tasarımların gereklilik kazandığı günümüzde, <div>  etiketi önem kazanmıştır. <div> etiketinin vazgeçilmez özelliklerini sırayla incelemeye başlayalım.

margin Özellikleri

margin:25px 50px 75px 100px; üst 25px, sağ 50px, alt 75px, sol 100px

margin:25px 50px; üst ve alt 25px, sağ ve sol 50px

margin:25px; Tüm kenar dışı boşlukları 25px

padding Özellikleri

padding:25px 50px 75px 100px; üst 25px, sağ 50px, alt 75px, sol 100px

padding:25px 50px; üst ve alt 25px, sağ ve sol 50px

padding:25px; Tüm kenar dışı boşlukları 25px

border Özellikleri

border-style : kenar çizgisi biçemi

         border-style: dotted;           noktalı

         border-style: dashed;          kesik

         border-style: solid;               düz

         border-style: double;          çift

border-style: groove;           içi kabarık

border-style: ringe;              dışı kabarık

border-style: inset;               içe gömülü

border-style: outset;            dışa gömülü

border-width         : kenar çizgisi genişliği-kalınlığı

border-width: thin;              ince

border-width: medium;     orta

border-width: thick;            kalın

border-width:2px 4px 5px 8px; Üst 2px, sağ 4px, alt 4px, sol 8px

border-width:2px 5px; Üst ve alt 2px, sağ ve sol 5px

border-width:2px; Tüm kenar çizgisi genişlikleri 2px

border-color          : kenar çizgisi rengi

         border-color: #F60 #060 #CCC #0F0; Üst #F60, sağ #060, alt #CCC, sol #0F0

border-color: #F60 #060 #CCC; Üst #F60, sağ ve sol #060, alt #CCC

border-color: #F60 #060; Üst ve alt #F60, sağ ve sol #060

border-color: #F60; Tüm kenar çizgi renkleri #F60

border             : kısaltma işlemleri için kullanılır.

         border 1px solid #F60 ;

Float Özelliği

Float özelliğini şu örnekle açıklayabiliriz: Bir su birikintisi üzerindeki kâğıt parçasının rüzgarla sağa sola doğru kaydığını (floating) düşünün, işte bu kâğıt parçasının sağa sola kayması gibi biz de nesnelerimizi float özelliğini kullanarak; sağa (float:right) ve sola (float:left) kaydırma işlemine tabi tutabiliriz.

Clear Özelliği

Float özelliğinin etkisinden kurtulmak, yani kaydırma işine son vermek için kullanılır. Dört farklı değer alabilir.

None       : Değişiklik yapma.
Right       : Sağa kaydırma işine son ver
Left          : Sola kaydırma işine son ver.
Both        : Her iki yönde de kaydırma işine son ver.

display Özelliği

Normal olarak bir web sayfasındaki nesnelerin akışı, o elemanın seviye (level) türüne göre değişir. Seviye (level) türüne göre iki tip eleman vardır; Bu elemanların başlangıç değerlerini display özelliği ile değiştirebiliriz.

display:inline;  elemanlar aynı satırda işlenirler.

display:block; blok şeklinde alt alta işlenirler.

position Özellikleri

Konumlandırma (position) özelliği ilk başta belirtilmelidir; aksi takdirde çalışmayacaktır. Dört farklı konumlandırmadan bahsedebiliriz.

position:static;     ögeler sayfanın normal akışına göre (soldan sağa-yukarıdan aşağıya) konumlandırılır.

position:fixed; elemanı sayfada sabitler ve kaydırma çubuğu aşağı yukarı hareket ettirildiğinde eleman sabit kalır.

position:relative; normal konumlamalara bağlı olarak konumlandırma sağlar.

position:absolute; ögeler bizim vereceğimiz konum özelliklerine (yatay‟da right, left; dikey‟de top, bottom) göre sayfada istediğimiz yere konumlandırılır.

z-index Özellikleri

z-index değeri en yüksek olan öge en üstte yer alır, z-index değeri en küçük olan öge ise en altta yer alır.

background Özellikleri

Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile onların nasıl davranış göstereceğini kapsar. Background, arka plân olarak da adlandırılabilir.

background-color

Bu özellik etiket zeminine renk vermek için kullanılır.

h1 {background-color: #ff2143;}

background-image

Bu özellik etiketlere zemin resmi eklemek için kullanılır.

body { background-image:url( ‘images/bg.jpg’); }

background-repeat

Bu özellik zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. Dört ayrı değer alır:

background-repeat:repeat; Görselin hem yatay olarak hem de dikey olarak tekrar etmesini istiyorsak bu özelliği kullanırız.

background-repeat:no-repeat; Eklediğimiz görselin hiçbir Ģekilde tekrar etmesini istemiyorsak bu özelliği kullanırız.

background-repeat:repeat-x; Eklediğimiz görsel yatay olarak yani x ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.

background-repeat:repeat-y; klediğimiz görsel dikey olarak yani y ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.

.logo {
background-image:url( ‘images/logo.png’);
background-repeat : no-repeat;
}

background-position

Bu özellik görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır. Bu özellik için 11 ayrı değer bulunmaktadır.

background-position:top left; Bu bildirimi kullandığımızda görselimiz üstün solunda yer alacak.

background-position:top center; Bu bildirimi kullandığımızda görselimiz üstün ortasında yer alacak.

background-position:top right; Bu bildirimi kullandığımızda görselimiz üstün sağında yer alacak.

background-position:center left; Bu bildirimi kullandığımızda görselimiz ortanın solunda yer alacak.

background-position:center center; Bu bildirimi kullandığımızda görselimiz ortanın ortasında yer alacak.

background-position:center right; Bu bildirimi kullandığımızda görselimiz ortanın sağında yer alacak.

background-position:bottom left; Bu bildirimi kullandığımızda görselimiz altın solunda yer alacak.

background-position:bottom center; Bu bildirimi kullandığımızda görselimiz altın ortasında yer alacak.

background-position:bottom right; Bu bildirimi kullandığımızda görselimiz altın sağında yer alacak.

background-position:x% y%; Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar.

background-position:xpos ypos; Görselimize yatay ve dikey olarak px bakımından pozisyon vermemizi sağlar.

.logo {
background-image:url( ‘images/logo.png’);
background-repeat : no-repeat ;
background-position: center center ;
}

veya

.logo { background: url( ‘images/logo.png’) no-repeat center center;}

.logo { background: url( ‘images/logo.png’) no-repeat bottom right;}

.logo { background: url( ‘images/logo.png’) no-repeat 60% 75%;}

.logo { background: url( ‘images/logo.png’) no-repeat 100px 40px;}

background-attachment

Bu özellik zemine yerleştirdiğimiz görselin kaydırma çubuğu ile birlikte hareket edip etmeyeceğinin kontrolünü sağlar.

Görselin kaydırma çubukları ile birlikte hareket etmesini istiyorsak değer olarak “scroll” kullanırız.

Görselin kaydırma çubukları ile birlikte hareket etmemesini, sabit kalmasını istiyorsak değer olarak “fixed” kullanırız.

.logo {
background-image:url( ‘images/logo.png’);
background-repeat : no-repeat ;
background-position: center center ;
background-attachment: fixed ;
}

​​​​​​​.logo { background: url( ‘images/logo.png’) no-repeat center center fixed;}