css3

来源：互联网发布：mac ifconfig 编辑：程序博客网时间：2024/05/22 09:50

1.使用选择器来插入内容

当插入的内容为文字时，必须要在插入文字的两旁加上单引号或者双引号。

这里写图片描述

html：

<h2>我是一个标题</h2>

css：

<style>    h2::before {      content: 'COLUMN';      color: #fff;      background-color: orange;      font-family: 'Comic Sans Ms',Helvetica,sans-serif;      padding: 1px 5px;      margin-right: 10px;    }</style>

2.指定个别元素不进行插入

这里写图片描述

html：

<body>  <h2>我是一个标题</h2>  <h2 class="sample">我是标题2</h2></body>

css：

<style>    h2::before {      content: 'COLUMN';      color: #fff;      background-color: orange;      font-family: 'Comic Sans Ms',Helvetica,sans-serif;      padding: 1px 5px;      margin-right: 10px;    }    h2.sample::before { /*类名为sample的h2标签不添加样式*/      content: none;    }</style>

3.插入图像文件

使用before或after选择器，除了可以在元素的前面或后面插入文字之外，还可以插入图像文件。插入图像时,需要使用url属性值来指定图像文件路径如下：

这里写图片描述

html：

<body>  <h2 class="new">我是一个标题B</h2>  <h2 class="new">我是一个标题C</h2>  <h2>我是标题D</h2></body>

css：

<style>    h2.new::after {      content: url(./images/02.jpg);    }</style>

解析：目前IE8只支持插入文字，不支持插入图像文件；
插入图像文件的好处：虽然可以利用img元素在画面中追加图像文件，但是也可以使用样式表来追加图像文件，好处是节省页面编码的时间。推荐使用插入图像文件的方法。
用途：新发表的文章、新到的货物等

4.使用content属性来插入项目编号

这里写图片描述

html:

<body>  <h2 class="new">我是一个标题</h2>  <p>示例文字</p>  <h2 class="new">我是一个标题</h2>  <p>示例文字</p>  <h2 class="new">我是一个标题</h2>  <p>示例文字</p></body>

css：

<style>    h2::before{      content: counter(mycounter);/*mycounter是计数器名*/    }    h2 {      counter-increment: mycounter;/*设置连续编号*/    }</style>

解析：counter-increment是为了使用连续编号来设置before或after选择器的content属性值中所设定的计数器名；

5.在项目编号中追加文字

这里写图片描述

html：

<body>  <h2>我是一个标题</h2>  <p>示例文字</p>  <h2>我是一个标题</h2>  <p>示例文字</p>  <h2>我是一个标题</h2>  <p>示例文字</p></body>

css：

<style>    h2::before{      content: '第'counter(mycounter)'章';      color: blue; /*设置编号的样式*/      font-size: 30px;    }    h2 {      counter-increment: mycounter;    }</style>

6.指定编号的种类

用before或after选择器的content属性，不仅可以追加数字编号，还可以追加字母编号、罗马数字编号。使用方法如下：

content:counter(计数器名,编号种类)

编号种类：使用“upper-alpha”指定大写字母编号；”upper-roman”指定大写罗马字母
例如：
这里写图片描述

大写字母编号css：

<style>    h2::before{      content: counter(mycounter,upper-alpha);/*大写字母编号*/      color: blue;      font-size: 30px;    }    h2 {      counter-increment: mycounter;    }</style>

大写罗马字母css:

<style>    h2::before{      content: counter(mycounter,upper-roman);/*大写罗马字母编号*/      color: blue;      font-size: 30px;    }    h2 {      counter-increment: mycounter;    }</style>

7.编号嵌套

这里写图片描述

html：

<body>  <h2>我是一个标题</h2>  <h4>我是中标题</h4>  <h4>我是中标题</h4>  <h2>我是一个标题</h2>  <h4>我是中标题</h4>  <h4>我是中标题</h4>  <h2>我是一个标题</h2>  <h4>我是中标题</h4>  <h4>我是中标题</h4></body>

第一张图片css：

<style>    h2::before{      content: counter(mycounter)'.';      color: blue;      font-size: 30px;    }    h2 {      counter-increment: mycounter;    }    h4::before {        content: counter(subcounter)'.';    }    h4 {      counter-increment: subcounter;      margin-left: 40px;    }</style>

第二张图片css：

<style>    h2::before{      content: counter(mycounter)'.';      color: blue;      font-size: 30px;    }    h2 {      counter-increment: mycounter;      counter-reset: subcounter; /*将中编号进行重置*/    }    h4::before {        content: counter(subcounter)'.';    }    h4 {      counter-increment: subcounter;      margin-left: 40px;    }</style>

解析：在第一张图片中看到这6个中标题的编号是连续的，如果要使大标题里的中标题重新开始编号的话，需要在大标题中使用counter-reset属性将中编号进行重置。即在h2元素的样式指定代码添加counter-reset属性。

0 0