WEB基础之：CSS列表与生成内容

列表与生成内容

1. 列表

1.1 列表类型

list-style-type 广泛支持的类型：

disc默认, circle, square, disclosure-open, disclosure-closed, decimal, decimal-leading-zero, arabic-indic, armenian, upperarmenian, lower-armenian, bengali, cambodian, khmer, cjkdecimal, devanagari, gujarati, gurmukhi, georgian, hebrew, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, lower-roman, upper-roman, tamil, telugu, thai, tibetan, loweralpha, lower-latin, upper-alpha, upper-latin, cjk-earthlybranch, cjk-heavenly-stem, lower-greek, hiragana, hiraganairoha, katakana, katakana-iroha, japanese-informal, japaneseformal, korean-hangul-formal, korean-hanja-informal, koreanhanja-formal, simp-chinese-informal, simp-chinese-formal, trad-chinese-informal, trad-chinese-formal, ethiopic-numeric, <string>, none, inherit
  • 用户代理会把它无法识别的值处理为decimal
  • 此属性只能应用于display的值为list-item的元素
  • 如果想完全禁止显示标识，只能使用值none,none会导致用户代理在原本放标识的位置不显示内容，但不会中断有序列表中的计数。

1.1.1 字符串标记

  list-style-type: "String_Marking";

1.1.2 图像标记

list-style-image: url("images/girl.jpg");

1.2 列表标志位置

属性值描述
inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-position: inside;

1.3 简写列表样式

list-style: <list-style-type> ‖ <list-style-image> ‖ <list-style-position> 

list-style: url("images/girl.jpg") square inside;

2. 生成内容

2.1 插入生成内容

content 属性与:before 及 :after伪元素配合使用，来插入生成内容。如要在超链接前面增加前缀文本[link]标志：

a[href]:before {content: "[link]";}

另外有2个限制：

  1. 若before或after选择器的主体是块级元素，则display属性只接受值None、inline、block、和marker 其他值处理为block。
  2. 若before或after选择器的主体是行内元素，属性display只能接受none和inline。其他值都处理为inline.
  3. 生成内容由与之关联的元素继承值（只应用于可继承的属性）。如：关联主体是绿色，生成内容也是绿色

2.2 指定内容

指定的串值会原样显示，即使其中包含某种标记也例外。可以使用十六进制Unicode值进行转义。

content: normal | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

h2::before {
    content: "<em>&para;</em> ";
    content: "\00ab";
}

2.3 插入属性值

取一个元素的属性值，使之作为文档显示的一部分。如将每个链接的href属性值直接放到链接的后面：

a[href]:after {content: attr(href);}

/*复杂的规则*/
body::before {
  content: "Text: " attr(text) " | Link: " attr(link) " | Visited: " attr(vlink) " | Active: " attr(alink);}

2.4 生成引号

quotes: [<string> <string>]+ | none | inherit

除了关键字 none 和 inherit 之外，惟一的有效值是一个或多个字符串“对”。对的第一个字符串定义开引号符号，第二个字符串定义闭引号符号。因此，在下列两项声明中，只有第一项是有效的:

quotes: '"' "'"; /* valid */
quotes: '"'; /* NOT VALID */

任意多个嵌套层次

<style type="text/css">
    quotation: display: block;}
    quote {quotes: '\201C' '\201D' '\2018' '\2019';}
    quote::before, q::before{content: open-quote;}
    quote::after, q::after {content: close-quote;}
</style>

<quotation>
  <quote>
    In the beginning, there was nothing. And God said:
    <q>Let there be light!</q> And there was still nothing, but you could see
    it.</quote
  >
</quotation>

3. 计数器

3.1 重置和递增

计数器的基础包括两个方面，一是能设置计数器的起点，二是能将其递增一定的量。

**counter-reset **属性处理设置计数器的起点，可以指定为以下之一：

  • <custom-ident> [<integer>]: custom-ident表示要递增的计数器的名称。 integer表示每次出现元素时将计数器重置为的值。如果不指定，则默认为 0。
  • none : 该关键字表示不执行计数器重置。它可用于重置隐藏在不太具体的规则中定义的计数器。

**counter-increment**属性用于将CSS Counters的值增加给定值。

  • <custom-ident> [<integer>]: **custom-ident**递增的计数器的名称。该标识符由不区分大小写的字母a到z，数字0到9，下划线（_）和/或短划线（ - ）的组合组成。第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号。）此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是none，unset，initial或inherit。integer表示计数器的值。如果没有给出，默认为1。
  • none : 不得增加计数器。用作默认值，或取消更具体规则的增量。
<head>
    <style type="text/css">
        h2 {
            counter-increment:chapter-count;
            font-size:1em;
        }
        h2:before {content:"Chapter " counter(chapter-count) ": "}
        #example-element {
            counter-reset: chapter-count 0;
        }
    </style>
</head>
<body id="chapters" class="transition-all">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
</body>
posted @ 2021-03-07 13:25  f_carey  阅读(3)  评论(0)  编辑  收藏  举报  来源