当前位置: 首页 > news >正文

CSS 列表样式学习笔记

CSS 列表样式提供了强大的功能,用于定制 HTML 列表的外观。通过 CSS,可以轻松地改变列表项的标记类型、位置,甚至使用图像作为列表项标记。以下是对 CSS 列表样式的详细学习笔记。

一、HTML 列表类型

在 HTML 中,主要有两种类型的列表:

  1. 无序列表(<ul>:列表项通常用特殊图形(如小黑点、小方框等)标记。

    HTML

    预览

    复制

    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
  2. 有序列表(<ol>:列表项通常用数字或字母标记。

    HTML

    预览

    复制

    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>

二、CSS 列表样式类型(list-style-type

通过 list-style-type 属性,可以指定列表项标记的类型。以下是一些常见的值:

无序列表

  • none:无标记

  • disc:实心圆(默认值)

  • circle:空心圆

  • square:正方形

有序列表

  • none:无标记

  • decimal:数字(默认值)

  • lower-alpha:小写英文字母

  • upper-alpha:大写英文字母

  • lower-roman:小写罗马数字

  • upper-roman:大写罗马数字

示例

css

复制

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

通过 list-style-image 属性,可以将图像设置为列表项标记。这可以让列表看起来更加美观和个性化。

示例

css

复制

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

浏览器兼容性问题

不同浏览器在显示图像标记时可能会有差异。例如,IE 和 Opera 可能会比 Firefox、Chrome 和 Safari 显示得更高一点。为了确保在所有浏览器中一致显示,可以使用以下方法:

浏览器兼容性解决方案

css

复制

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul li {
    background-image: url('sqpurple.gif');
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 14px;
}

四、列表样式简写属性(list-style

list-style 是一个简写属性,可以将 list-style-typelist-style-positionlist-style-image 合并到一个声明中。

示例

css

复制

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

属性顺序

  • list-style-type

  • list-style-position(可选)

  • list-style-image(可选)

如果某些值缺失,其他值仍然可以按顺序指定。

五、移除默认列表样式

默认情况下,<ul><ol> 会有一些内边距(padding)和外边距(margin)。如果需要移除这些默认样式,可以使用以下代码:

示例

css

复制

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

六、CSS 列表属性总结

表格

复制

属性描述
list-style简写属性,用于将所有列表样式属性设置在一个声明中
list-style-image将图像设置为列表项标记
list-style-position设置列表项标记的位置(inside 或 outside
list-style-type设置列表项标记的类型

相关文章:

  • Spring Security 权限配置详解
  • 【5G-A学习】ISAC通信感知一体化学习小记
  • Elasticsearch搜索引擎 3(DSL)
  • 2025.4.7-2025.4.13文献阅读
  • 「Flutter」Flutter集成Google Ads广告
  • WXJ196微机小电流接地选线装置使用简单方便无需维护
  • 路由策略/策略路由之route-policy
  • 水下塑料垃圾识别分割数据集labelme格式2703张6类别
  • Redis实现签到功能
  • SSM智能排课系统
  • SpringBoot 自定义输出控制台图标
  • ANP协议深度解析:智能体网络协议的演进与革新
  • 完整源码停车场管理系统,含新能源充电系统,实现了停车+充电一体化
  • Java学习手册:Java反射与注解
  • 企业级JDK升级思路分享(一)JDK11升级到JDK17
  • UE5蓝图设置界面尺寸大小
  • 【小工具】定时任务执行器
  • CUDA编程高阶优化:如何突破GPU内存带宽瓶颈的6种实战策略
  • 深入详解MYSQL的MVCC机制
  • 第一章 教育与教育学
  • 光速晋级!2025年多哈世乒赛孙颖莎4比0战胜对手
  • 世界数字教育大会发布“数字教育研究全球十大热点”
  • 广西百色“致富果”:高品质芒果直供香港,带动近五千户增收
  • 小雨伞保险经纪母公司手回集团通过港交所聆讯
  • 中科飞测将投资超10亿元,在上海张江成立第二总部
  • 金砖国家召开经贸联络组司局级特别会议,呼吁共同抵制单边主义和贸易保护主义