Yazar: Merhaba değerli okurlarım!
Bu yazımda sizlere css’in list özelliklerinden yani lliste özelliklerinden ve kullanımından tüm detaylarıyla bahsedeceğim.
html dilinde liste yapımından bahsettik, html ile oluşturmuş olduğumuz listelerimize css kullanarak etki edebilir ve çeşitli özellikler ekleyebiliriz.
Css kullanarak listelerimize nasıl sitil görünümü kazandırabiliriz bunu birlikte inceleyeceğiz.
List özelliklerinin almış olduğu parametreleri inceleyelim ve bir örnek yaparak yazımızı sonlandıralım.
list özelliği:
list-style-type :
disk : Liste biçiminin disk (içi dolu yuvarlak) şeklinde olmasını sağlar.
circle : liste biçiminin çember görünümünde olmasını sağlar.
Square: liste görünümünün kare olmasını sağlar.
Decimal: liste görünümünün rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii, gibi roma rakamlarının küçük harfi olmasını sağlar.
upper-roman: Liste biçiminin I,II,II gibi roma rakamlarının büyük harfi olmasını sağlar.
Lower-alpha: liste biçiminin a, b, c gibi harflerden oluşmasını sağlar.
Upper-alpha: liste biçiminizin A, B, C yani büyük harflerden oluşmasını sağlar.
None: liste biçiminin imgesiz olmasını sağlar.
list-style-position :
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.
Css ile list özelliklerini kullanırken bu parametrelerden faydalanarak listemize çeşitli görünümler kazandırabiliriz.
Css özelliklerini kullanarak bir örnek yapalım ve örneğimizi inceleyelim.
örnek:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> css list özellikleri ve kullanımı </title>
<style>
li {
list-style-type : circle;
list-style-position : inside;
list-style : decimal;
list-style-image : url (“resim.jpg”);
}
</style>
</head>
<body>
<ul>
<li> html>
<li> html 5
<li> css
<li> bootstrap
</ul>
</body>
</html>
Yapmış olduğumuz bu örneği kayıtedip görüntüleyin, css ile listemize kazandırmış olduğumuz özellikleri inceleyin.
Html kodlarımızı yazdıktan sonra; <style> komutu ile css yazmaya başlıyoruz.
Sonraki satırda li özelliğimize çeşitli özellikler kazandırmak istedik ve li satırlarımaza etki etmesi için li yazıp süslü parantezimizi açtık.
list-style-type : circle;
Satırı ile liste sitilimizi belirledik. listemiz çember görünümünde olmasını istedik.
list-style-position : inside;
Listemizin ikinci satırını en soldan başlatarak position ile konumlandırdık.
list-style : decimal;
Listemize decimal özelliği kazandırarak rakamlardan oluşmasını sağladık.
list-style-image : url (“resim.jpg”);
Son olarakta listemize bir resim ekleyerek süslü parantezimizi kapatarak stil tanımlamamızı bitirdik.
<body> etiketi ile listelerimizi oluşturarak örneğimizi tamamlamış oluyoruz.
not:
Bir sonraki yazımda position yani konumlandırmayı anlatacağım.
Css ile liste özellikleri ve kullanımı ile ilgili en basit olarak sizlere anlatacaklarım bunlar, soru ve sorunlarınızı yorumlarda bana bildirebilirsiniz. iyi bloglamalar herkese.
Bir önceki yazımız olan css background kullanımı ve tüm özellikleri başlıklı makalemizde css arkaplan tanımlama, css background kullanımı ve css background özellikleri hakkında bilgiler verilmektedir.