Css3学习笔记（二）：在页面中插入内容

1. 插入文字

A． 使用选择器来插入内容

h2:before{
	content:"前缀";
}
h2:after{
	content:"后缀";
}

B． 指定个别的元素不进行插入

h2.sample:before{
	content:none;
}

2. 插入图像

A． 在标题前插入图像文件

h2:before{
	content:url(anwy.jpg);
}

B． 将alt属性的值作为图像的标题来显示（用不了）

img:after{
	content:attr(alt);
	display:block;
	text-align:center;
	margin-top:5px;
	font-size:11px;
	font-weight:bold;
	color:black;
}

3. 插入编号

A． 多个标题前加入连续编号

div:before{
	content:counter(divCounter);
}
div{
	counter-increment:divCounter;
}

B． 在项目符号中追加文字

div:before{
	content:"第"counter(divCounter)"段";
}

C． 指定编号样式、种类

div:before{
	content:counter(divCounter,upper-alpha)'.';
	color:blue;
	font-size:16px;
}

D． 编号嵌套

div:before{
	content:counter(divCounter,upper-alpha)'.';
	color:blue;
	font-size:16px;
}
div{
	counter-increment:divCounter;
	counter-reset:subDivCounter;
}
p:before{
	content:counter(subDivCounter)'.';
	margin-left:15px;
	background-color:yellow;
	font-size:12px;
}
p{
	counter-increment:subDivCounter;
}

E． 字符串两边添加文字嵌套符号

h3:before{
	content: open-quote;
}
h3:after{
	content: close-quote;
}
h3{
	quotes:"【""】";
}