Web Tasarım Dersleri List (Liste Biçimlendirme)

Web Tasarım Dersleri List (Liste Biçimlendirme), Web Tasarım Dersleri List, Web Tasarım Dersleri Liste Biçimlendirme, Liste Biçimlendirme, List Code, Liste Kodlama, Liste İmleme Tipi, List Style Type, Liste İmleri Konum, List Style Position, Liste imleme resmi, list style image, Liste biçimlendirme, List style, HTML web tasarım dersleri, HTML5 Web tasarım dersleri, HTML List, HTML web lesson, Liste İmleme Tipi gibi konuları bugünkü makalemizde aydınlatıyoruz, öğrenmek isteyen arkadaşlarımızla bilgilerimizi paylaşıyoruz.

Liste (List) Biçimlendirme

Liste özelliklerinin biçimlendirilmesi amacıyla kullanılır.

Liste İmleme Tipi (LIST-STYLE-TYPE)

XHTML bölümümüzden hatırlayacağınız gibi unordered list (ul) ve ordered list (ol) olmak üzere iki tip listemiz vardı. İşte bu özellikle liste tiplerinin imleme stillerini belirleyeceğiz. Bunun için unordered list (ul) ile kullanacağımız değerler, none, disc, circle, square olmaktadır.

none: İmleme kullanılmayacak anlamına gelir.

disc: İmleme olarak içi dolu daire kullanmak içindir.

square: kare şeklinde imleme kullanmak için ise bu değeri seçeceğiz.

ordered list (ol) için ise none, disc, circle, square, decimal, decimal-leading-zero, lower-latin, lower-roman, upper-latin ve upper-roman kullanılmaktadır.

none: imleme kullanılmayacak anlamına gelir.

disc: İmleme olarak içi dolu daire kullanmak içindir.

circle: Bu ise içi boş daire kullanacağımız anlamına gelir.

square: kare şeklinde imleme kullanmak için ise bu değeri seçeceğiz.

decimal: Onluk sayı sistemi kullanmak içindir.

decimal-leading-zero: her biri 0 ile başlayan (örn: 01, 02, 03….. vb.) onluk sayı sistemi.

lower-latin: Kücük latin harfleri (örn: a, b, c… vb)

lower-roman: küçük roman rakamları (örn: i, ii, iii, iv… vb) için,

upper-latin: büyük latin harfleri (örn: A,B, C, D…vb) için.

upper-roman: büyük roman rakamları (örn: ı, ıı, ııı, ıV… vb) için.

Örnek kod çalışması

<head>

<style type=”text”/css”>

ul. circle {list-style-type:circle};

ul.square {list-style-type: square};

ol.upper-roman {list-style-type:upper-roman};

ol.lower-latin {list-style-type:lower-latin};

</style>

</head>

<body>

<p> Daire:</p>

<ul class=”circle”>

<li>XHTML<li>

<li> XML</li>

</lu>

<p> Kare:</p>

<ul class=”circle”>

<li>XHTML</li>

<li>CSS</li>

<li> XML </li>

</ul>

<p> Roman Rakamları </p>

<ol class=”upper-roman”>

<li> XHTML</li>

<li>CSS</li>

<li> XML </li>

</ol>

<p> Küçük latin harfleri: </p>

<ol class=”upper-roman”>

<li> XHTML</li>

<li>CSS</li>

<li> XML </li>

</ol>

</body>

Liste İmleri Konum (List-style-position)

Bu özellik imlerin pozisyonlarını belirlemek içindir. inside imlerin daha içerden başlamasını sağlar. Varsayılan değer outside değeridir.

<head>

<style type=”text/css”>

ul.inside {list-style-position: inside};

ul.outside {list-style-position: outside};

</style>

</head>

<body>

<p> Bu liste “inside” kullanımına örnektir:</p>

<ul class=”inside”>

<li>XHTML</li>

<li>CSS</li>

<li> XML </li>

</ul>

<p> Bu liste “outside” kullanımına örnektir:</p>

<ul class=”inside”>

<li>XHTML</li>

<li>CSS</li>

<li> XML </li>

</ul>

</body>

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

Web Tasarım Dersleri List (Liste Biçimlendirme)
Bu yazıya oy ver

By | 2017-08-03T13:15:27+00:00 Aralık 9th, 2016|Categories: BLOG, Kategoriler, Web Tasarım Dersleri|0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL