CSS list-style-image Özelliği

CSS list-style-image

Css list-style-image özelliği ile liste elemanlarını gösterim ikon/resimleri özelleştirilebilir .

Örnek:

Bu örnekte liste elemanlarının başına bir resim dosyası sitili atanmıştır.

ul { list-style-image: url('simge.png'); }

CSS list-style-image nedir nasıl kullanılır

Html liste elemanlarının başındaki gösterim şekli( kare daire roma rakamları) haricinde kendi istediğimiz img resim ,ikon ekleyebiliriz.

CSS list-style-image CSS list-style-image özellikleri  
Varsayılan Değer: none  
Kalıtsallık: var  
Animasyon Özelliği: yok  
Versiyon: CSS1  
JavaScript list-style-image: object.style.listStyleImage="url('tick.gif')"

CSS list-style-image Tarayıcı Desteği

Aşağıdaki tabloda görünen sayılar bu özelliği ilk destekleyen tarayıcı sürümleridir.

CSS Kodu:
list-style-image 1.0 4.0 1.0 1.0 7.0

CSS list-style-image Değerleri

list-style-image: none|url|initial|inherit;

CSS list-style-image özelliği değerleri

CSS list-style-image değerleri CSS list-style-image değerleri tanımları CSS örnek uygulamalar
none Özellik aktif değildir.
url Eklenecek resmin url adresi girilir.
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değeri kullanır.  

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML yorum etiketi ile öğe gizleme örneği

Resim
Merhaba arkdaşlar , html işaretleme dilinde  yorum etiketini bir webmaster olarak  kulanmamız gerekebilir.Bu bize kodların karışmamasını ve disiplinli bir çalışma yapmamıza olanak sağlar. Bu örneği uygulayarak  nasıl html yorum tagını yani etiketini kullanabileceğinizi öğreneceksiniz. <!DOCTYPE html> <html> <body> <p>Kodu Çalıştır butonuna tıkladığınızda, yorum etiketleri arasındaki öğe tarayıcıda görüntülenmez. Yorum etiketlerini silerek içeriği görüntüleyebilirsiniz.</p> <!-- Aşağıdaki içeriği şimdilik gizle <img border="0" src="http://3.bp.blogspot.com/-NE-3K559zkQ/ViVybTh5YqI/AAAAAAAAAr8/fvJSe7lEA9Y/s320/cennet_papagani.jpg" alt="papagan" /> --> </body> </html> Bu bloğu yazarken html kaynak kodlarında sürekli güncellemeler ve düzenlemeler yapıyorum.Blogger kaynak görünümüne geçtiğiniz de bir çok yorum satırlarımı bulabilirsiniz. bu örneği tamam
Devamı Oku »

Linklerin Renklerini Değiştirme Örnek

<!DOCTYPE html> <html> <head> <style> a:link { color: green; background-color: transparent; text-decoration: none } a:visited { color: brown; background-color: transparent; text-decoration: none } a:hover { color: red; background-color: transparent; text-decoration: underline } a:active { color: orange; background-color: transparent; text-decoration: underline } </style> </head> <body> <p>Linklerin varsayılan renklerini değiştirebilirsiniz.</p> <a href="http://htmlvecssegitimi.blogspot.com/2016/01/html-link-rengi-degistirme-ornek.html" target="_blank">HTML Link Rengi Değiştirme Örneği</a> </body> </html>
Devamı Oku »

YouTube Reklam Engelleyici

Resim
YouTube reklam engelleyici ile internetten hem para kazan abilir hem de internetteki Google reklamlarını yani YouTube reklamlarını da engelleyebilir, kapatabilirsiniz .Nasıl mı ? Okumaya devam edin bundan sonra  kendinize daha çok zaman ayırabilecek hızlı güvenli bir internet keyfi yaşayacaksınız. Reklamları sonsuza kadar kaldıran Uygulamayı Hemen Keşfet YouTube Music gibi ücretli hizmetlere hiç girişmeyin derim. Acelem var diyorsanız hemen Brave  Mobil Uygulama | YouTube Reklam Engelleyici 'ı indirin ben de o sırada size reklamları kaldıran uygulama | tarayıcı hakkında bilgi vereyim. Ücretsiz YouTube Reklam Engelleyici  YouTube 'da dizi izlerken film izlerken sürekli yerinizden kalkıp reklamı geç butonuna bastığınız oldu mu ? Eminim bu ve benzeri bir çok anınız vardır reklamları kapatma ile ilgili.İşte artık reklamları kapatmayı veya engellemeyi öğrenmenize gerek yok. YouTube Reklam Engelleyici İndir YouTube Reklam Engelleyici Mobil Uygulama yı'ı indirmek için  sitesini
Devamı Oku »

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Resim
Merhaba arkadaşlar bu yazımda  eski tarayıcılarda çalışmayan kodları nasıl gizleyebileceğimizi ve  uzunca yazılan  javascript kod satırlarını bölme yi öğreteceğim. Web tasarım ve kodlama dersleri adı altında  başlatmış olduğum javascript dersleri makalelerimin hepsini okumanızı istiyorum ve sizler için hazırlanan uygulamaların hepsini dikkatle uygulayarak öğrenin.Bir önceki yazımda javascript ile neler yapılabilir  konusunu işledim. Js de eski tarayıcılarda çalışma ve kod satırlarını gizleme Bazen web site yapmak istediğimizde  hangi programlama dilini kullanırsak kullanalım kodlar uzayabiliyor bu gibi durumlarda javascript kodlarını bölerek alt satıra rahatlıkla geçişler yapabiliriz.Aşağıdaki örnekte javascript kodunu  ters slash (\) ile bölerek rahatça kod yazımına devam edeceğiz.Örneği inceleyiniz. <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile kod satırını bölme</title
Devamı Oku »

HTML Resimler

Resim
HTML Resimler <img> Etiketi HTML'de resimler <img> etiketi ile gösterilir. <img> etiketi boş etiket olarak tanımlanır, yani kapanış etiketi yoktur ve sadece özellikler (parametreler) içerir. src özelliği resmin URL'sini (web adresini) belirtir. alt özelliği ise, resmin görüntülenmediği durumlar için alternatif metni tanımlar: <img src="URL" alt="alternatif metin"> Örnek <!DOCTYPE html> <html> <body> <h2>HTML Resimler - Örnek</h2> <img src="cennet_papagani.jpg" alt="Papagan" width="150px" height="150px"> </body> </html> Kendiniz deneyin » Resimlerin yükseklik ve genişlik değerlerini her zaman belirtin. Yükseklik ve genişlik değerleri belirtilmediğin
Devamı Oku »

HTML bdo Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcınız bi-directional override (bdo), yani çift yönlü yazımı destekliyorsa, aşağıdaki satır right-to-left (rtl) sağdan sola doğru yazılmış olarak görüntülenecektir:</p> <bdo dir="rtl">Bu satır sağdan sola doğru yazılacak</bdo> </body> </html>
Devamı Oku »