三、列表样式¶

TIP

深入浅出 CSS 列表样式（list-style）属性详解

1、list-style-type¶

TIP

list-style-type 属性设置列表项标记的类型

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0 开头的数字标记。（01, 02, 03, 等。）
lower-alpha	小写英文字母 The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母 The marker is upper-alpha (A, B, C, D, E, 等。)

最佳实践：

标记的类型多在 20 多项，以上只列出了部分，但实际开发中几乎不用。
在实际开发中，一般会把前面的标记类型去掉
如果需要相关标记类型，用做好的小图标来代替
所以我们只需要掌握如何去掉标记就好，去掉标记代码 list-style-type:none;

<style type="text/css">
  ul {
    list-style-type: none; /*去掉标记*/
  }
</style>
<body>
  <ul>
    <li>前端</li>
    <li>java</li>
    <li>大数据</li>
  </ul>
</body>

2、list-style-image¶

TIP

用来指定列表中的列表标记图像，几乎不用，了解就好

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

ul li {
  /* 去掉默认小黑圆点 */
  list-style-type: none;
  list-style-image: url(images/dot.png);
}

3、list-style-position¶

TIP

规定列表中列表项目标记的位置，几乎不用，了解就好

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

ul li {
  border: 1px solid red; /*边框线*/
  list-style-type: none; /*去掉圆点*/
  list-style-position: outside; /*圆点位置*/
  list-style-image: url(images/dot.png); /*圆点图标*/
}

![[Pasted image 20260225101255.png]]

4、list-style¶

TIP

list-style 是 list-style-type 、 list-type-position 、 list-style-image 的三个的综合写法。
但在实际开发中，用的最多的是 list-style:none; 和 list-style-type:none 用来去掉标记。

四、应用实践¶

TIP

将所学 CSS 文本样式属性用于实践

1、单行文本水平垂直居中¶

<style>
  .box {
    width: 200px; /*宽 200px*/
    height: 50px; /*宽 50px*/
    border: 1px solid red; /*边框线：1像素 实线 红色;*/
    text-align: center; /*文字水平居中*/
    line-height: 50px; /*文字垂直居中*/
  }
</style>
<body>
  <div class="box">单行文本水平垂直居中</div>
</body>

渲染效果： ![[Pasted image 20260225101418.png]]

2、设置中英文混合间距¶

TIP

把 word-spacing 与 letter-spacing 两者结合使用

<style>
  h3 {
    word-spacing: 20px; /*英文单词间距*/
  }
  h3 span {
    letter-spacing: 20px; /*span标签中汉字间距*/
  }
</style>
<body>
  <h3>I love you<span>&nbsp;我的宝贝！</span></h3>
</body>

渲染效果： ![[Pasted image 20260225101525.png]]

3、新闻排版¶

![[Pasted image 20260225101612.png]]

<style>
  h1 {
    font-size: 30px;
    text-align: center;
  }
  .desc {
    text-align: center;
    font-size: 14px;
    color: #666;
  }
  .desc span {
    color: red;
    background-color: #ddd;
  }
  .desc a {
    text-decoration: none;
    color: red;
  }
  p {
    text-indent: 2em;
    line-height: 2;
  }
  .img {
    text-indent: 0;
    text-align: center;
  }
</style>
<body>
  <h1>本次15天挑战计划，升级为30天挑战计划</h1>
  <p class="desc">
    <span>原创</span> 2026-12-23 08:57 · <a href="">艾编程日报</a>
  </p>
  <p>
    考虑到部分学员的基础水平不扎实，所以重启计划，花15天的时间系统全面讲解 CSS
    。
  </p>
  <p class="img"><img src="images/pic.jpg" alt="" /></p>
  <p>本些 CSS课程，会配套 30个精挑细选的css 案例和88个 CSS 布局技巧。</p>
  <p>
    这88个CSS案例并非随意凑出来的，而是从实际开发场景中精挑细选，提炼出来的。几乎涵盖了99%
    的 CSS 布局场景，能扫除你布局路上的一切障碍，让你精通CSS 布局。
  </p>
  <p>
    如果你html+css
    基础都学完了，面对布局仍然没有思路，学完这88个案例，你将成为CSS高手。
    [哇R]你学习的不仅仅是88个 CSS 案例，而是上百种CSS
    的布局思路和技巧。能让你真真吃透每个CSS知识点，并对CSS 运用自如。
  </p>

  <p>艾编程日报 清心 摄</p>
</body>