CSS Жагсаалт /List/

Жагсаалтын item-н ялгаатай тэмдэглэгээнүүд

list-style_type шинж чанарт жагсаалтын тэмдэглэгээг зааж өгнө.

<style>
ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}
</style>

Жагсаалтын item-н тэмдэглэгээг зургаар тэмдэглэж болно

list-style-image шинж чанарт жагсаалтын тэмдэглэгээ хийх зургийг зааж өгнө.

<style>
ul {
  list-style-image: url('/static/img/html/leaf.jpg');
}
</style>

Жагсаалтын item-н тэмдэглэгээний байрлал

list-style-position шинж чанарт жагсаалтын тэмдэглэгээний байлалыг зааж өгнө.
"list-style-position: outside;" гэж зааж өгвөл тэмдэглэгээ нь жагсаалтын гадна талд байрлах бөгөөд энэ нь анхдагч утга нь юм.
"list-style-position: inside;" гэж зааж өгвөл тэмдэглэгээ нь жагсаалтын дотор талд item-тай хамт байрлах болно.

<style>
ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}
</style>

Анхны утгыг тэглэх /Remove Default Settings/

list-style-type шинж чанарт none-г зааж өгч жагсаалтын тэмдэглэгээг тэглээд margin, padding-ын утгыг 0 гэж зааж өгсөнөөр жагсаалтын анхны утгыг устгах болно.

<style>
ul.teg {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>

List-н загварыг CSS-н тусламжтай илүү гоё болгож болно.

Бие дааж өөрчилж өөрийн зохиож хийж үзээрэй.

<style>
ol {
  background: #649CF8;
  padding: 25px;
}
ul {
  background: #00D031;
  padding: 25px;
}
ol li {
  background: #C9DDFE;
  padding: 8px;
  margin-left: 40px;
  color: orange;
}
ul li {
  background: #A3FBB8;
  margin: 8px;
}
</style>

Сэтгэгдэлүүд