小白教程
所有教程
关于
Search
172.70.178.243
172.70.178.243
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Pr gen content”的源代码
本页内容
上一节:
Css3_pr_font_stretch
下一节:
Pr_gen_counter_increment
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:content}}[[Category:css reference|130]] = CSS content 属性 = 以下实例将在每个链接后的括号内加上网址(href 属性): <sample title="" desc="" lang="html" hererun="1"> a:after { content: " (" attr(href) ")"; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> a:after { content: " (" attr(href) ")"; } </style> </head> <body> <p><a href="http://www.xiaobai.wang">小白教程</a> - 免费的编程学习网站。</p> <p><a href="http://www.xiaobai.wang">Google</a> - 好用的搜索引擎。</p> </body> </html> </run> == 属性定义及使用说明 == content 属性与 :before 及 :after 伪元素配合使用,来插入内容。 {| class="table table-striped table-hover" | 默认值: | normal |- | 继承: | no |- | 版本: | CSS2 |- | JavaScript 语法: | object.style.content="url(beep.wav)" |} == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |} == content 语法与属性值 == 语法格式: <pre>content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;</pre> {| class="table table-striped table-hover" !width="33%"| 值 !width="33%"| 说明 !width="33%"| 实例 |- | none | 设置 content 为空值。 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p:before { content:"来这里学编程 - "; } p#testID:before { content:none; } </style> </head> <body> <p>小白教程</p> <p id="testID">强的很!!!</p> </body> </html> </run> |- | normal | 在 :before 和 :after 伪类元素中会被视为 none,即也是空值。 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p:before { content:"来这里学编程 - "; } p#testID:before { content:normal; } </style> </head> <body> <p>小白教程</p> <p id="testID">强的很!!!</p> </body> </html> </run> |- | counter | 设定计数器,格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数;格式由style指定(默认是'decimal'——十进制数字) | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { counter-increment: myIndex; } p:before { content:counter(myIndex); } </style> </head> <body> <p>这是第一个段落,前面会加个数字 1。</p> <p>这是第二个段落,前面会加个数字 2。</p> <p>这是第三个段落,前面会加个数字 3。</p> </body> </html> </run> |- | attr(attribute) | 将元素的 attribute 属性以字符串形式返回。。 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> a:after { content: " (" attr(href) ")"; } </style> </head> <body> <p><a href="http://www.xiaobai.wang">小白教程</a> - 免费的编程学习网站。</p> <p><a href="http://www.xiaobai.wang">Google</a> - 好用的搜索引擎。</p> </body> </html> </run> |- | string | 设置文本内容 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p:before { content:"来这里学编程 - "; } </style> </head> <body> <p>小白教程</p> </body> </html> </run> |- | open-quote | 设置前引号 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p::before { content: open-quote; } p::after { content: close-quote; } </style> </head> <body> <p>小白教程</p> </body> </html> </run> |- | close-quote | 设置后引号 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p::before { content: open-quote; } p::after { content: close-quote; } </style> </head> <body> <p>小白教程</p> </body> </html> </run> |- | no-open-quote | 移除内容的开始引号 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p::before { content: open-quote; } p::after { content: close-quote; } p#testID:before { content: no-open-quote; } p#testID:after { content: no-close-quote; } </style> </head> <body> <p>小白教程</p> <p id="testID">强的很!!!</p> 注意:id 为 testID 的 p 标签不会添加引号。 </body> </html> </run> |- | no-close-quote | 移除内容的闭合引号 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p::before { content: open-quote; } p::after { content: close-quote; } p#testID:before { content: no-open-quote; } p#testID:after { content: no-close-quote; } </style> </head> <body> <p>小白教程</p> <p id="testID">强的很!!!</p> 注意:id 为 testID 的 p 标签不会添加引号。 </body> </html> </run> |- | url(url) | 设置某种媒体(图像,声音,视频等内容)的链接地址 | <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p:before { content:url(smiley.gif); } </style> </head> <body> <p>小白教程</p> <p id="testID">强的很!!!</p> </body> </html> </run> |- | inherit | 指定的 content 属性的值,应该从父元素继承 | |} == 更多实例 == [https://c.xiaobai.wang/codedemo/3371 CSS Select 选项小三角型(箭头)样式代码] == 相关文章 == CSS 参考手册: [[sel before|:before 伪元素]] CSS 参考手册: [[sel after|:after 伪元素]] [http://www.xiaobai.wang/cssref/css3-pr-columns.html CSS3 columns 属性] [http://www.xiaobai.wang/cssref/sel-before.html CSS :before 选择器]
返回至“
Pr gen content
”。
上一节:
Css3_pr_font_stretch
下一节:
Pr_gen_counter_increment