5-border-color(kenarlık rengi)
Kutunun Kenarlık çizgilerine renk atamak için kullanılınır.
4 views
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.
Örnek:
2 views
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
