FrontEnd Developer RoadMap - CSS3 Tutorial 32 List-Style-Type Kavramı - Liste Biçimlendirme

Merhabalar bu yazımda liste biçimlendirme CSS kodlarına bakacağız.

list-style-type: none; /* Bu liste elamanlarının yanında çıkan styleri belirler. None yapılması kaldırılması anlamına gelir.*/

list-style-type’ın alabileceği value’ler ve açıklamaları.

Value	Description
disc	Default value. The marker is a filled circle
armenian	The marker is traditional Armenian numbering
circle	The marker is a circle
cjk-ideographic	The marker is plain ideographic numbers
decimal	The marker is a number
decimal-leading-zero	The marker is a number with leading zeros (01, 02, 03, etc.)
georgian	The marker is traditional Georgian numbering
hebrew	The marker is traditional Hebrew numbering
hiragana	The marker is traditional Hiragana numbering
hiragana-iroha	The marker is traditional Hiragana iroha numbering
katakana	The marker is traditional Katakana numbering
katakana-iroha	The marker is traditional Katakana iroha numbering
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
none	No marker is shown
square	The marker is a square
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek	The marker is upper-greek
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}

ul li:last-child /* ul altındaki li’nin son elemanına css uygula */

border-bottom: none; /* bottom border’ı kaldırıldı.*/

Şimdi bunları aşağıdaki örnek kod içinde inceleyelim.

<html>
 
<head>
    <title>Inline Css</title>

    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Patrick+Hand+SC" rel="stylesheet">
 
    <style type="text/css">
        ul {
            list-style-type: none; /* Bu liste elamanlarının yanında çıkan styleri belirler. None yapılması kaldırılması anlamına gelir.*/
            border: 1px solid #ddd;
            padding: 0px;
        }
 
        ul li {
            border-bottom: 1px solid #ddd;
            padding: 7px 12px;
        }
 
        ul li:last-child { /* ul altındaki li'nin son elemanına css uygula */
            border-bottom: none; /* bottom border'ı kaldırıldı.*/
        }
 
        ol {
            background-color: #f1f1f1;
            list-style-type: none;
            padding: 10px 20px;
            border-left: 5px solid red;
        }
 
    </style>
 
</head>
 
<body>
 
    <ol>
 
        <li>Web Developer Eğitimi</li>
        <li>Asp.net Mvc Eğitimi</li>
        <li>Asp.net Webform Eğitimi</li>
    </ol>
 
    <ul>
 
        <li>Web Developer Eğitimi</li>
        <li>Asp.net Mvc Eğitimi</li>
        <li>Asp.net Webform Eğitimi</li>
    </ul>
 
</body>
 
</html>