2-border-top – style ,  border-bottom-style ,  border-left-style,  border-right-style

Kutunun tüm kenar çizgileri  için ayrı ayrı stil tanımlaması yapmak için kullanılınırlar.

border-top – style : kutunun üst çizgisinin  tipini ayarlamak için kullanılınır.

border-bottom-style: kutunun alt  çizgisinin  tipini ayarlamak için kullanılınır.

border-left-style : kutunun sol çizgisinin  tipini ayarlamak için kullanılınır.

border-right-style: kutunun sağ   çizgisinin  tipini ayarlamak için kullanılınır.

3-border-width(kenarlık genişliği)

Kenarlık çizgisinin genişliğini ayarlamak için kullanılınır.

Border-width özelliği var olan borderın genişliğini ayarlar yani bu özelliği kullanamanız için bir border-style tanımlaması yapmanız gerekir.

4-border-top – width ,  border-bottom-width ,  border-left-width,  border-right-width

Kenar çizgilerinin  ayrı ayrı genişliğini  ayarlamak için kullanılırlar.

border-top –width : kutunun üst çizgisinin  genişliğini  ayarlamak için kullanılınır.

border-bottom-width: kutunun alt  çizgisinin  genişliğini  ayarlamak için kullanılınır.

border-left-width: kutunun sol çizgisinin genişliğini  ayarlamak için kullanılınır.

border-right-width: kutunun sağ   çizgisinin genişliğini ayarlamak için kullanılınır.

5-border-color(kenarlık rengi)

Kutunun Kenarlık çizgilerine renk atamak için kullanılınır.

6-border-top – color ,  border-bottom-color ,  border-left-color,  border-right-color

Kutunun tüm kenarları için ayrı ayrı renk tanımlaması yapabilirsiniz.

border-top –width : kutunun üst çizgisi için renk tanımlaması

border-bottom-width: kutunun alt  çizgisi için renk tanımlaması

border-left-width: kutunun sol çizgisi için renk tanımlaması

border-right-width: kutunun sağ   çizgisi için renk tanımlaması

Hover uygulaması:

Mouse ile liste elemanları üstüne geldiğimizde liste elemanı işaretci resmi değişmektedir.Burada seçiciler kısmına bakarsanız menu isimli bir ortak sınıf seçici oluşturdum ve bunu ol etiketine atadım bu şu anlama geliyor ol elemanı içindeki li elemanları bu oluşturduğum ortak sınıf seçiciyi kullanacaklar.Bir alt satırda menu ortak seçicisini kullanan li elemanının hover durumuna bir image belirleyerek kullanıcı liste elemanı üzerine geldiğinde liste elemanı işaretçi resminin değişmesini sağlamış oldum.

Kutu Modeli

CSS  tüm xhtml elemanlarını  bir dikdörtgen kutu içerisine konulmuş gibi varsayar.Yani xhtml elemanının içeriğini sanki bir kutu içerisindeymiş gibi düşünür ,  hangi elemanı kullanırsanız kullanın bu elemanın kutu özellikleri vardır.

Border ÖZELLİKLERİ

Css xhtml elemanlarının bir kutu içinde düşündüğünden  , kutunun border yani kenarlık özelliklerini değiştirme imkanı sağlar.

1-border-style(kenarlık için stil tanımlaması)

Bu özellik kenar çizgisinin tipini ayarlamak için kullanılınır.Ayrıca kutu kenar çizgilerini kullanıma açmak için kullanılınır .Bu özelliğe atadığınız değer kutunun 4 kenarı içinde uygulanır.

6-Background özelliği

Background ile ilgili yukarıda anlatılan özelliklere  bir defada atama yapmaya yarar

Background:Background-color Background-image Background-repeat Background-attachment Background-position

Liste ÖZELLİKLERİ

Birden fazla metni alt alta koyup her bir metni  madde işaretleri ile gösterebilirsiniz.Yani içerikleri liste şeklinde göstermeniz mümkün html ‘ de bunun için ul , ol , li etiketlerini kullanarak yapmaktayız.

Temel olarak iki tür liste kullanılınır

Sıralı Listeler (ordered list ) ol etiketi ile oluşturulur , Sırasız listeler (unordere list) ul etiketi ile oluşturulur.li etiketi liste elemanlarını oluşturmak için kullanılınır.

Sıralı listeler : 1,a,A,I,i şeklinde madde işaretleri kullanılabilir.

Sırasız listeler : disc(içi dolu çember) , circle (içi boş çember), square(kare) şeklinde madde işaretleri kullanmak mümkündür.

1-list-style-type özelliği

Liste elemanının madde işaretinin şeklini  belirlemek için  yani list-item işaretinin tipini belirlemek için kullanılınır. Standart olarak tarayıcı sıralı listeleri gösterirken madde işareti olarak rakamları , sırasız listeleri gösterirken madde işareti olarak disc(içi dolu çember) şeklinde gösterilir.

Dikkat edilirse seçici olarak ul ve ol kullanılmıştır.li elemanları bu özellikleri kendilerine kalıtsal olarak alırlar

Bir liste içinde sadece bir elemana bu özelliği atamak için sınıf seçici oluşturmamız yeterli olacaktır

2-list-style-image

list elemanlarının önüne list-style-type da bulunan işaretler  yerine resim koymak için kullanılınır.

Sıralı yada sırasız listelerde  eğer liste elemanı işareti yerine resim atanmışsa liste elemanı

önünde bu resim gösterilir.

List-style-image:url(resim yolu)

Sıralı yada sırasız liste fark etmeyez. list-type-image özelliği ile liste elemanı işareti yerine resim eklenmişse bu resim gösterilir.

List-style-type özelliği ile liste elemanlarına işaret tanımlaması yapmışsanız ve aynı zamanda liste elemanları işareti olarak resim tanımlamışsanız liste elemanı işareti olarak resim gösterilir.

3-list-style-position

Liste işaretlerinin yada işaretler yerine konan resmin , metnin  içinden mi(inside) yada sol dıştan  (outside) başlayıp başlamayacağını ayarlamak için kullanılınır.

4-list-style

Yukarıda anlatılan list özelliklerine tek bir defada değerleri  atamak için kullanılınır.

Bir liste için hem type (işaretçi şekli) hemde işaretci olarak  resim atanmışsa bu durumda işaretci resmi  gösterilir.

5-Arka plan haraketliliği  (Background-attachment)

Arka planın haraketli yada sabit olmasını ayarlar.Sayfanızdaki  çubuklarını haraket ettirdiğinizde resimin sayfa içeriği ile birlikte haraket edip etmemesini ayarlamak için kullanılınır.

Aldığı değerler ;

Fixed: sabit kal

Scroll:içerik ile beraber haraket et

Body {

background-image:url(bg.gif);

background-attachment:fixed;

background-repeat:repeat-x;

}

Sayfamıza artalan resmi ekledik ve yatay eksende tekrarlanmasını sağladık . background-attachment : fixed ; atayarak kaydırma çubukları ile içerik haraket ettirildiğinde resmin sabit kalmasını sağlamış olduk .