Koyarwa CSS list

Layi na ba a saba da kwanan na layi ba:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Layi na da kwanan na layi:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Layi na HTML da kwanan na layi na CSS

A cikin HTML, layi ke da dabi'ar daban biyu:

  • Layi na ba a saba da kwanan na layi ba (ul) - nisanin layin su ne bulama.
  • Layi na da kwanan na layi (ol) - nisanin layin su ne dabi'ar labari ko haruffa.

CSS layi da kwanan na layi ke bayyana a matsayin:

  • Tsa ta nisanin da ke a kwanan na layi a tsarin da ke kwanan na layi:
  • Tsa ta nisanin da ke a kwanan na layi na dabe-dabe a tsarin da ba a saba da kwanan na layi ba:
  • Tsa ta imaji a matsayin nisanin da ke a kwanan na layi
  • Tsa ta na nisanin da ke a kwanan na layi da ke da zane da ke cikin kai.

Duba: da suka nuna duba na nisanin da ke a kwanan na layi na dabe-dabe.

list-style-type Attribute yana tsara tsa tsa na nisanin da ke a kwanan na layi.

Tushen: da suka nuna duba da ke amfani da su a nisanin da ke a kwanan na layi:

实例

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;
}

亲自试一试

Tushen:Duba: da suka amfani da su a tsarin da ba a saba da kwanan na layi ba, kuma da suka amfani da su a tsarin da ke kwanan na layi.

Imaji a matsayin nisanin da ke a kwanan na layi

list-style-image Attribute yana ta tsara imaji a matsayin nisanin da ke a kwanan na layi:

实例

ul {
  list-style-image: url('sqpurple.gif');
}

亲自试一试

Tsa ta na nisanin da ke a kwanan na layi

list-style-position Attribute yana tsara tsa tsa na nisanin da ke a kwanan na layi (bulama).

"list-style-position: outside;" yana ce ta dace da a cikin tsaki na layi da ke na doki. Tsa tsaki na layi na kowace yau zai iya yin kaiyawa. Ta yana da yau:

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：

  • Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
  • Tea
  • Coca-cola

实例

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

亲自试一试

删除默认设置

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

    或
      中添加 margin:0 和 padding:0 ：

      实例

      ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

      亲自试一试

列表 - 简写属性

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

实例

ul {
  list-style: square inside url("sqpurple.gif");
}

亲自试一试

在使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

设置列表的颜色样式

我们还可以使用颜色设置列表样式，使它们看起来更有趣。

添加到

    或
      标记的任何样式都会影响整个列表，而添加到
    • 标记的属性将影响各个列表项：

      实例

      ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

      结果：

      1. Coffee
      2. Tea
      3. Coca Cola
      • Coffee
      • Tea
      • Coca Cola

      亲自试一试

更多实例

带红色左边框的自定义列表
本例演示如何创建带有红色左边框的列表。
rakaiciya girmuwarin
本例演示如何创建没有项目符号的带边框列表。
列表的所有不同列表项标记
本例演示了 CSS 中所有不同的列表项标记。

所有 CSS 列表属性

属性 描述
list-style 简写属性。在一条声明中设置列表的所有属性。
list-style-image 指定图像作为列表项标记。
list-style-position 规定列表项标记（项目符号）的位置。
list-style-type 规定列表项标记的类型。