mozilla
您的搜索结果

    Lists

    这是CSS Getting Started 教程的第10部分; 它将向你描述你如何用CSS来指定列表的外观. 你将创建一个新的包含列表的示例文件,和一个新的定义列表的样式表。

    信息: 列表

    如果你完成了上一节的挑战任务,你就知道如何在列表项前面插入内容。

    CSS为列表提供了专门的属性。如果可以,使用这些属性通常会比较方便。

    使用list-style 属性来指定列表项标记的样式。

    你的CSS中的选择器可以选中列表项 (比如, <li>)。也可以选中列表项的父节点 (比如, <ul>)。此时列表项会继承父节点的样式。

    无序列表

    无序列表的每个列表项都用同样的方式标记。

    CSS 有三种标记样式:

    • disc
    • circle
    • square

    你可以指定一个图片的URL来自定义标记样式。

    下面的规则为不同类的列表项指定了不同的标记:

    li.open {list-style: circle;}
    li.closed {list-style: disc;}
    

    这些类被用于列表项时,用以区分打开和关闭的列表项 (比如,在一个待办事项列表中):

    <ul>
      <li class="open">Lorem ipsum</li>
      <li class="closed">Dolor sit</li>
      <li class="closed">Amet consectetuer</li>
      <li class="open">Magna aliquam</li>
      <li class="closed">Autem veleum</li>
    </ul>
    

    结果:

    • Lorem ipsum
    • Dolor sit
    • Amet consectetuer
    • Magna aliquam
    • Autem veleum

    有序列表

    在有序列表中,每个列表项都被标记了不同的序号。

    list-style 属性指定标记样式:

    • decimal
    • lower-roman
    • upper-roman
    • lower-latin
    • upper-latin

    这条规则指定类名包含info的<ol> 元素的列表项用大写字母标序

    ol.info {list-style: upper-latin;}
    

    <li> 元素继承了ol的样式:

    • Lorem ipsum
    • Dolor sit
    • Amet consectetuer
    • Magna aliquam
    • Autem veleum
    更多细节

    list-style 属性是一个快捷写法。在复杂的样式表中你可能更希望用单独的属性设置不同的属性值。欲查看这些单独的属性和更详细的CSS指定列表的方法,见 list-style参考页。

    如果你使用如HTML这类提供了方便的无序列表 (<ul>) 和有序列表(<ol>)的标记语言,就尽量使用这些标签。当然,你完全可以将 <ul> 显示成有序列表,将 <ol> 显示成无序列表。

    浏览器实现列表样式略有不同。不要奢望样式表可以让列表在所有浏览器中显示的完全一样。

    计数器

    注意:  一些浏览器不支持计数器。Quirks Mode site 的CSS contents and browser compatibility 页有更多这方面的兼容表格可以参考。 CSS Reference 也有浏览器兼容性表格。

    你可以用计数器来计数任何元素,不仅是列表元素。比如,在有些文档中你可能想计数标题和段落。

    要想计数,你必须定义一个计数器。

    在计数开始前的某个元素上,设置 counter-reset属性以重置计数器。被计数元素的父节点是一个不错的选择。当然,任何出现在被计数元素前面的元素都可以。

    设置每个需要计数的元素的counter-increment 属性为你的计数器名。

    通过为选择器增加 :before:after 并设置 content 属性来显示计数器。 (如上一节所示, 内容).

    content 的值设置为 counter() 并在括号内填上计数器的名字。可选的可以设置类型。类型和前面的 有序列表 相同。

    正常情况下,显示计数器的元素也会递增计数器。

    这条规则为每个类名包含numbered的<h3> 元素初始化计数器 mynum:

    h3.numbered {counter-reset: mynum;}
    

     

    这条规则为每个类名包含numbered的<p>元素显示并递增计数器:

    p.numbered:before {
      content: counter(mynum) ": ";
      counter-increment: mynum;
      font-weight: bold;}
    

    结果:

    Heading

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    更多细节

    除非所有看你文档的人的浏览器都支持计数器,否则你不能使用计数器。

    如果你可以使用计数器,那么你可以单独设置计数器的样式。如上面例子所示:计数器是粗体,但列表不是。

    你还可以用更复杂的方式使用计数器。比如,计数章节, 标题, 子标题以及段落。详见CSS规范中的 Automatic counters and numbering 。

    实例: 设计列表样式

    新建doc2.html:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Sample document 2</title>
        <link rel="stylesheet" href="style2.css">
      </head>
      <body>
     
        <h3 id="oceans">The oceans</h3>
        <ul>
          <li>Arctic</li>
          <li>Atlantic</li>
          <li>Pacific</li>
          <li>Indian</li>
          <li>Southern</li>
        </ul>
     
        <h3 class="numbered">Numbered paragraphs</h3>
        <p class="numbered">Lorem ipsum</p>
        <p class="numbered">Dolor sit</p>
        <p class="numbered">Amet consectetuer</p>
        <p class="numbered">Magna aliquam</p>
        <p class="numbered">Autem veleum</p>
     
      </body>
    </html>
    

    新建style2.css

    /* numbered paragraphs */
    h3.numbered {counter-reset: mynum;}
     
    p.numbered:before {
      content: counter(mynum) ": ";
      counter-increment: mynum;
      font-weight: bold;
    }
    

    如果布局和注释不符合你的口味,随便改。

    在浏览器中打开。如果你的浏览器支持计数器,你将看到下面的样子。如果不支持,你将看不到数字序号。 (甚至冒号都看不到):

    The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    挑战

    增加一条规则,用罗马数字i到v计数大洋的名字

    The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

     

    修改样式,将标题用大写字母加括号的方式标序:

    (A) The oceans

    . . .

    (B) Numbered paragraphs

    . . .

    答案

    接下来?

    浏览器显示你的样例文档,在将元素放置在页面上时,会在元素周围创建空间。下一章节将向你描述如何使用CSS来和元素下的形状一起工作,元素下的形状我们称为盒子boxes)。

     

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, aztack, tolerious, Chajn, teoli, mengzyou
    最后编辑者: tolerious,