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ı.

ValueDescription
discDefault value. The marker is a filled circle
armenianThe marker is traditional Armenian numbering
circleThe marker is a circle
cjk-ideographicThe marker is plain ideographic numbers
decimalThe marker is a number
decimal-leading-zeroThe marker is a number with leading zeros (01, 02, 03, etc.)
georgianThe marker is traditional Georgian numbering
hebrewThe marker is traditional Hebrew numbering
hiraganaThe marker is traditional Hiragana numbering
hiragana-irohaThe marker is traditional Hiragana iroha numbering
katakanaThe marker is traditional Katakana numbering
katakana-irohaThe marker is traditional Katakana iroha numbering
lower-alphaThe marker is lower-alpha (a, b, c, d, e, etc.)
lower-greekThe marker is lower-greek
lower-latinThe marker is lower-latin (a, b, c, d, e, etc.)
lower-romanThe marker is lower-roman (i, ii, iii, iv, v, etc.)
noneNo marker is shown
squareThe marker is a square
upper-alphaThe marker is upper-alpha (A, B, C, D, E, etc.) 
upper-greekThe marker is upper-greek
upper-latinThe marker is upper-latin (A, B, C, D, E, etc.)
upper-romanThe marker is upper-roman (I, II, III, IV, V, etc.)
initialSets this property to its default value. Read about initial
inheritInherits 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>

Bir sonraki yazımda görüşmek üzere.


Murat Bilginer
21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.