css content属性笔记

原创 国哥笔记  2019-01-13 16:09  阅读 372 views 次

content属性定义及用法

在css中,content属性与:before及:after伪元素配合使用,使用来插入生成内容,主流浏览器都支持了该属性;

content属性语法格式

content:属性值;

属性值说明

  • none:设置Content,如果指定成Nothing;
  • normal:设置content,如果指定的话,正常,默认是"none"(该是nothing);
  • counter:设定计数器内容;
  • attr(attribute):设置Content作为选择器的属性之一;
  • string:设置Content到你指定的文本;
  • open-quote:设置Content是开口引号;
  • close-quote:设置Content是闭合引号;
  • no-open-quote:如果指定,移除内容的开始引号;
  • no-close-quote:如果指定,移除内容的闭合引号;
  • url(url):设置某种媒体(图像,声音,视频等内容);
  • inherit:指定的content属性的值,应该从父元素继承;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cs content属性笔记</title>
<style type="text/css">
body{background-color: #aaa;}
a:after {content: " (" attr(href) ")";} 
</style>
</head>
<body>
<div>
<a href="http://www.ggbiji.com">国哥笔记</a><br/> - 一个编程爱好者的学习笔记!
</div>
</body>
</html>

运行结果:

css content属性笔记

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-content.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情