Listeler ve Görsellerde CSS Stilleri

İsts (Listeler)

HTML’de iki ana tür liste vardır:

<ul> (unordered list - sıralanmamış listeler): Liste ögeleri imlerle işaretlenir.

<ol> (orderd list - sıralı listeler): Liste ögeleri sayılarla veya harflerle işaretlenir.

list-style-type: Sıralı ve sıralanmamış listeler için çeşitli seçenekler ve işaretçiler bulunmaktadır. List-style-type özelliği, liste ögesi işaretleyicisinin türünü belirtir.

list-style-image: Sıralanmamış listeler için liste ögesi işaretçisi olarak bir görüntü tanımlamaya olanak sağlar.

list-style-position: İşaretçilerin konumlandırılmasına olanak sağlar. Bu özellik içeride (inside) ve dışarıda (outside) değerleri bildirilerek kullanılabilir.

li:hover: Fare üzerine getirildiğinde, farenin üzerinde olduğu liste ögesini vurgulamayı sağlar.

Görüntüler (Images)

CSS, sayfalarda kullanılan görüntülerin nasıl görüntüleneceğinin ayarlanmasına olanak sağlar. Tüm görsellere stiller ayarlayarak görseller için standart bir görünüm yaratılabilir. Bu sayede, sayfalar arasında tutarlık sağlanarak sayfa ziyaretçilerine daha profesyonel bir izlenim yaratılabilir.

Border: Görüntülere kenarlık eklemek için border özelliği kullanılabilir. Border özelliği ile kenar boşlukları ve/veya dolgu özelliği kullanmak görüntülerin sayfalarda daha etkili bir şekilde yerleştirilmesi için işe yarayabilmektedir.

border-image: border-image (kenarlık resmi) özelliği ile, bir ögenin etrafındaki kenarlık olarak kullanılacak bir görüntü ayarlanabilmektedir. border-image özelliği, bir elemanın çevresindeki normal kenarlık yerine kullanılacak bir resim belirlemeye olanak sağlamaktadır.

border-radius: Yuvarlak (oval) köşeli görüntüler oluşturmak için borderradius özelliği kullanılabilir. Kenarlık yarıçapı özelliği, ögenin köşelerinin yarıçapını tanımlar. Aynı görselin farklı köşeleri için farklı yuvarlama değerleri de tanımlanabilmektedir. Border-radius özelliği bildiriminde bir, iki, üç ve dört değer de kullanılabilmektedir. border-radius özelliğinin yüzdelik değeri 100% olarak tanımlandığında, tam yuvarlak veya elips bir görüntü elde edilebilir.

0pacity: opacity özelliği kullanarak bir görüntünün saydamlık derecesi tanımlanabilir. opacity özelliği için 0.0 ile 1.0 arasında değerler tanımlanabilir. Opaklık özelliğinde kullanılan değerlerden, 1 görselin hiç şeffaf olmadığını, 0,5 görselin %50 şeffaf olduğunu ve 0 görselin tamamen şeffaf olduğunu tanımlar.

Boyutlar: Görüntülerin yüksekliğini (height) ve genişliğini (width) değiştirmek veya ayarlamak için stil tanımlanabilmektedir. İndirme hızları nedeniyle görüntü boyutlarını ayarlamak için tarayıcıyı kullanmak iyi bir fikir değildir ama yine de sayfaların düzenli görüntülenmesi için sıklıkla kullanılmaktadır.

background-image: CSS, görsellerle süslü arka planlar oluşturmayı kolaylaştırır. Tüm sayfaya veya yalnızca belirli bir ögeye arka planlar eklenebilir. background-attachment” özelliği, arka plan görüntüsünün sayfanın geri kalanıyla kaydırılmasını veya sabitlenmesini belirler. background-repeat özelliği kullanılarak belirtilen görselin yalnızca yatayda, dikeyde veya sadece bir defa döşenmesi sağlanabilir.