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.
| Value | Description |
| thin | ince |
| medium | orta |
| thick | kalın |
| length | Bir uzunluk değeri (-) değer alamaz değerin sonuna (px) yazılmalıdır.(%) değer alamaz |
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ı
4 views
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.
| değer | açıklama |
| none | Herhangi bir border tanımlaması yok |
| hidden | Border gizle |
| dotted | Noktalı çizgi |
| dashed | Kesik çizgi şeklinde |
| solid | Tek çizgi |
| double | İki çizgi |
| groove | Oluk şeklinde çizgi |
| ridge | Üsten alta eğimli (sırtlı çizgi) |
| inset | İçe doğru derinlik hissi veren |
| outset | Dışa doğru derinlik hissi veren çizgi |
6 views
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
| Aldığı değer | Açıklama
Liste elemanlarını önüne aşağıdaki işaretleri koyabilirsiniz |
| none | Madde işareti koymaz |
| circle | İçi boş daire koyar |
| disc | İçi dolu daire koyar |
| square | Kare işareti koyar |
| decimal | Onlu tabandaki sayıları koyar .1 rakamından başlar |
| upper-roman | Büyük romen rakamları (I,II,III,IV,V) |
| lower-roman | Küçük romen rakamları(i,ii,iii,iv,v) |
| upper-alpha | Büyük ascii harfleri(A,B,C,D,E,…) |
| lower-alpha | Küçük ascii harfleri (a,b,c,d,e…) koyar |
| Decimal-leading-zero | Başında sıfır olan onlu tabandaki sayılar(01,02,03,04) |
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.
8 views
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 .
8 views
