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
4-Arka plan resmi konumu (Background-position)
Arka planın konumunu ayarlamak için kullanılınır.Yani resmin başlangıç noktasını ayarlamak için kullanılınır.
Burada background-repeat özelliği önemlidir.Çünkü eğer background-repeat:no-repeat ise resim tekrarlanmaz ve background-position ile sayfada gösterilecek resmin nerde olacağını ayarlarız.Ama resim tekrarlanıyorsa backround-position ile resmin başlangıç noktası ayarlanır.
Yataydaki ve dikeydeki konumlandırma için left , right , top , bottom,center ifadeleri kullanılınır
Background –position : 2 değer alır yataydaki konumlandırma ve dikeydeki konumlandırma için , Yataydaki konumlandırma left,right, center ile dikeydeki konumlandırma top, center , bottom ile yapılır.Bu iki değerin yazılış sırası önemli değildir.
Background-position: left top ;
Görüldüğü gibi 2 değer almış burada değerler arasında boşluk bırakılmış.
Resim için En üst soldan başlasın komutu verilmiş bunun terside doğru olacaktır.
Background-position: top left ;
Alabileceği değerler ;
Top left : en üst sol
Top center : üst ortada
Top right: üst sağ
Center left : dikeyde orta yatayda soldan başla yani sol orta
Center center : tam orta
Center right: orta sağ
Bottom left : alt sağdan
Bottom center: alt orta
Bottom left : alt sol
Bu değerlerin dışında backround-position özelliği % ve px değerler alabilir. px değerleri kullanmanızı önermiyorum.% değerlere bakalım;
Eğer yatay ve dikey hizalama için % değer verilecekse bu durumda mutlaka ilk değer yatay ikinci değer dikey konumlandırma için yazılmalıdır.
Örneğin
Background-position:50% 0% ;
Yatay konumlandırma 50% aslında yatayda sayfanın tam ortasında olması demek dikey konumlandırma için 0% dikeyde başlangıç noktasında yani top da olması demektir.
15 views
3-Arka plan Resmi yinelenmesi (Background-repeat)
Sayfaya yada bir xhtml elemanına eklemiş olduğunuz arka plan resminin kendisini tekrar edip etmeyeceğini ayarlamak için kullanılınır.
| Aldığı değer | Açıklama |
| repeat | Hem yatay hemde dikey ekseninde tekrarlasın |
| Repeat -x | Sadece yatay ekseninde resim tekrarlansın |
| Repeat-y | Sadece dikey ekseninde resim tekrarlansın |
| no-repeat | Arka plan resmi kendini tekrarlamasın |
| inherit | Ata elemandan miras alır. |
15 views
