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>
Bir sonraki yazımda görüşmek üzere.