css content通俗易懂简介篇


摘要:
下文讲述css属性content的功能说明,如下所示:


css content的功能说明

css content的功能: 
    结合:after或:before伪类,在选择对象的前或后添加相应的文字内容
css content注意事项: 
   1.使用js脚本设置content属性可使用content属性 
 
css content语法:
  content:[ [<uri> | icon] ',' ]* [ normal | none | inhibit | <content-list> ]
  <content-list> = [ pending(<identifier>) | <string> | contents | footnote | endnote | section-note | list-item | <counter> | <named-string> | open-quote | close-quote | no-open-quote | no-close-quote | icon | <glyph> | <uri> | <datetime> | document-url | <target> ]+
  <counter> = counter(name) | counter(name,list-style-type) | counters(name,string) | counters(name,string,list-style-type)

 ------------参数说明-----------
  normal:
   默认值。表现与none值相同
  none:
   不生成任何值
<attr>:
   插入标签属性值
<url>:
      使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)
<string>:
     插入字符串
counter(name):
     使用已命名的计数器
counter(name,list-style-type):
     使用已命名的计数器并遵从指定的list-style-type属性
counters(name,string):
     使用所有已命名的计数器
counters(name,string,list-style-type):
     使用所有已命名的计数器并遵从指定的list-style-type属性
no-close-quote:
      并不插入quotes属性的后标记。但增加其嵌套级别
no-open-quote: 
      并不插入quotes属性的前标记。但减少其嵌套级别
close-quote:
      插入quotes属性的后标记
open-quote:
      插入quotes属性的前标记


css content的功能示例说明

  
<meta charset="utf-8" /> 
<style>
.string p:after{margin-left:-16px;background:#fff;content:"是";color:#f00;}
.attr p:after{content:attr(title);}
.url p:before{content:url("****.png");}
.test ol{margin:16px 0;padding:0;list-style:none;}
.counter1 li{counter-increment:testname;}
.counter1 li:before{content:counter(testname);color:#f00;font-family:georgia,serif,sans-serif;}
.counter2 li{counter-increment:testname2;}
.counter2 li:before{content:counter(testname2,lower-roman);color:#f00;font-family:georgia,serif,sans-serif;}
.counter3 ol ol{margin:0 0 0 28px;}
.counter3 li{padding:2px 0;counter-increment:testname3;}
.counter3 li:before{content:counter(testname3,decimal)".";color:#f00;font-family:georgia,serif,sans-serif;}
.counter3 li li{counter-increment:testname4;}
.counter3 li li:before{content:counter(testname3,decimal)"."counter(testname4,decimal)".";}
.counter3 li li li{counter-increment:testname5;}
.counter3 li li li:before{content:counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)".";}
</style>
<p>
maomao365.com <br />
content示例说明
</p>

<ul class="test">
	<li class="string">
		<strong>string:</strong>
		<p>你的浏览器是否支持content属性:否</p>
	</li>
	<li class="attr">
		<strong>attr:</strong>
		<p title="如果你看到我则说明你目前使用的浏览器支持content属性"></p>
	</li>
	<li class="url">
		<strong>url():</strong>
		<p>如果你看到文字前面的图标则说明你目前使用的浏览器支持content属性</p>
	</li>
	<li class="counter1">
		<strong>counter(name):</strong>
		<ol>
			<li>猫猫教程列表项</li>
			<li>猫猫教程列表项</li>
			<li>猫猫教程列表项</li>
		</ol>
	</li>
	<li class="counter2">
		<strong>counter(name,list-style-type):</strong>
		<ol>
			<li>猫猫教程列表项</li>
			<li>猫猫教程列表项</li>
			<li>猫猫教程列表项</li>
		</ol>
	</li>
	<li class="counter3">
		<strong>counter(name)拓展应用:</strong>
		<ol>
			<li>猫猫教程列表项
				<ol>
					<li>猫猫教程列表项
						<ol>
							<li>猫猫教程列表项</li>
							<li>猫猫教程列表项</li>
						</ol>
					</li>
					<li>猫猫教程列表项</li>
				</ol>
			</li>
			<li>猫猫教程列表项
				<ol>
					<li>猫猫教程列表项</li>
					<li>猫猫教程列表项</li>
				</ol>
			</li>
			<li>猫猫教程列表项
				<ol>
					<li>猫猫教程列表项</li>
					<li>猫猫教程列表项</li>
				</ol>
			</li>
		</ol>
	</li>
</ul> 		
css content示例说明

css content示例说明