យើងបានដឹងរួចមកហើយថា នៅក្នុងភាសា HTML មាន list ពីរប្រភេទគឺ unordered lists (<ul>) និង ordered lists (<ol>) ។ ចំពោះlist ទាំងពីរនេះ យើងអាចប្រើប្រាស់ភាសា CSS ក្នុងការកំណត់សញ្ញាឬលេខនៅពិមុខវា អោយទៅជាសញ្ញាឬលេខទាំងឡាយណាដែលចង់បាន។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Styling List</title>
    <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>
  </head>
  
  <body>
	Example of unordered lists:
	
  	  Coffee
  	  Tea
  	  Coca Cola
	

	
  	  Coffee
  	  Tea
  	  Coca Cola
	

	Example of ordered lists:
	
  	  Coffee
  	  Tea
  	  Coca Cola
	

	
  	  Coffee
  	  Tea
  	  Coca Cola
	

  </body>
</html>

Example of unordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Example of ordered lists:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

លើសពីនេះទៀត យើងអាចប្រើប្រាស់រូបភាពផ្សេងៗជំនួសអោយរូបសញ្ញាឬលេខនៅពីមុខ list បាន ដោយធ្វើដូចខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Styling List</title>
    <style>
      ul {
  		list-style-image: url('image.gif');
	  }
    </style>
  </head>
  
  <body>
	
  	  Coffee
  	  Tea
  	  Coca Cola
	
  </body>
</html>

Coffee
Tea
Coca Cola

list-style-position ត្រូវប្រើប្រាស់សំរាប់កំណត់ទីតាំងរបស់សញ្ញានៅខាងមុខ <ul> ។

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Styling List</title>
    <style>
      ul.a {
  		list-style-position: outside;
	  }

	  ul.b {
  		list-style-position: inside;
	  }
    </style>
  </head>
  
  <body>
	The list-style-position Property

	list-style-position: outside (default):
	
  	  Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
  	  Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to 						Asia
  	  Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of 			caffeine) and coca leaves
	

	list-style-position: inside:
	
  	  Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
  	  Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to 						Asia
  	  Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of 			caffeine) and coca leaves
	

  </body>
</html>

The list-style-position Property

list-style-position: outside (default):

Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves

list-style-position: inside:

Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant
Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia
Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves

មួយវិញទៀត បើសិនជាយើងចង់យកចេញនូវសញ្ញា លេខ ឬ តួអក្សរ នៅខាងមុខ <ul> ឬ <ol> យើងត្រូវធ្វើដូចខាងក្រោមនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Styling List</title>
    <style>
      ul.demo {
  		list-style-type: none;
  		margin: 0;
  		padding: 0;
	  }
    </style>
  </head>
  
  <body>
	Default list:
	
  	  Coffee
  	  Tea
  	  Coca Cola
	

	Remove bullets, margin and padding:
	
  	  Coffee
  	  Tea
  	  Coca Cola
	
  </body>
</html>

Default list:

Coffee
Tea
Coca Cola

Remove bullets, margin and padding:

Coffee
Tea
Coca Cola

list ក៏ដូចជា element ដ៏ទៃទៀតដែរ យើងអាចប្រើប្រាស់ពាក្យថា list-style ដើម្បីកំណត់តំលៃទាំងអស់របស់ list ដោយធ្វើដូចខាងក្រោនេះ៖

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>CSS Styling List</title>
    <style>
      ul {
  		list-style: square inside url("image.gif");
	  }
    </style>
  </head>
  
  <body>
	
  	  Coffee
  	  Tea
  	  Coca Cola
	

  </body>
</html>

Coffee
Tea
Coca Cola