编程笔记 html5&css&js 049 CSS列表

发布时间:2024年01月20日

CSS设置列表样式。

一、CSS列表

<!DOCTYPE html>
<html>
<head>
<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>
<h1>列表</h1>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
</body>
</html>

二、HTML 列表和 CSS 列表属性

在 HTML 中,列表主要有两种类型:
无序列表(<ul>)- 列表项用的是项目符号标记
有序列表(<ol>)- 列表项用的是数字或字母标记
CSS 列表属性使您可以:
为有序列表设置不同的列表项标记
为无序列表设置不同的列表项标记
将图像设置为列表项标记
为列表和列表项添加背景色
不同的列表项目标记
list-style-type 属性指定列表项标记的类型。

属性值
值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是:a, i, u, e, o, ka, ki, 等。(日文平假名字符)
katakana	标记是:A, I, U, E, O, KA, KI, 等。(日文片假名字符)
hiragana-iroha	标记是:i, ro, ha, ni, ho, he, to, 等。(日文平假名序号)
katakana-iroha	标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名序号)

下例显示了一些可用的列表项标记:

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

注释:有些值用于无序列表,而有些值用于有序列表。
图像作为列表项标记
list-style-image 属性将图像指定为列表项标记:

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

三、定位列表项标记

list-style-position 属性指定列表项标记(项目符号)的位置。“list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的:
属性值

值	描述
inside	列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。
ul.a {
  list-style-position: outside;
}

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

list-style-type:none 属性也可以用于删除标记/项目符号。请注意,列表还拥有默认的外边距和内边距。要删除此内容,请在 <ul><ol> 中添加 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><ul> 标记的任何样式都会影响整个列表,而添加到 <li> 标记的属性将影响各个列表项:

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

六、练习

<!DOCTYPE html>
<html lang="zh-cn">
   <head>
      <title>css列表 编程笔记 html5&css&js</title>
      <meta charset="utf-8" />
      <style>
         body {
            color: cyan;
            background-color: teal;
         }
         ul {
            list-style-position: inside;
            padding: 0;
            border: 1px solid #ddd;
         }
         ul li {
            padding: 8px 16px;
            border-bottom: 1px solid #ddd;
         }
      </style>
   </head>
   <body>
      <div align="center">
         <p>全宽的带边框的列表:</p>
         <ul>
            <li>少年软件工程师</li>
            <li>青少年成长管理</li>
            <li>青少年时间管理</li>
         </ul>
      </div>
   </body>
</html>

小结

掌握全面的列表属性,使用列表符合需要。

文章来源:https://blog.csdn.net/qq_40071585/article/details/135719727
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。