CSS3 使用选择器在页面插入内容
使用选择器来插入文字
h2:before{
content:‘COLUMN’;
color:white;
background-color:orange;
padding:1px 5px;
}
注意点:
- 使用content插入的内容要打单引号或双引号
- 可以对插入的内容设置样式
对个别元素不进行插入
h2.sample.before{
content:none;
}
h2.sample.before{
content:normal;
} --表示h2中class为sample的不插入内容--
none属性和normal属性用法相同,但是需要说明的是,从CSS2.1开始,只有当使用before和after选择器的时候,normal属性才与none相同,都是不让选择器在个别元素后插入内容。但是none只能用在这两个选择器中,二normal还可以用于其他的CSS3选择器。
插入图像文件
h2:before{
content:url(mark.png);
}
css3的定义中还可以通过url属性来插入音频、视频等其他格式的文件,目前没有浏览器支持。
插入图像文件的好处
- 为页面节约大量的编写时间
- 与在样式表中追加图片做背景相比,在打印的时候,如果选择不打印背景的话,使用before选择器追加的图片能正常打印,加为背景图片的不能打印。
将alt属性的值作为图像的标题来显示
//css
img:after{content:attr(alt);}
//html
<img src="1.png" alt="hahaha">
hahaha将以文字的形式显示在网页上。
这个属性目前只有Opera10支持
使用content属性来插入项目编号
在多个标题前加上连续编号:在content属性中使用counter属性来针对多个项目追加连续编号另外,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中指定的计数器名。
h1:before{
content:counter(mycounter);
}
h1{
counter-increment:mycount;
}
在项目编号中追加文字
h1:before{
content:‘第’counter(mycounter)'章';
}
指定编号的种类:
content:counter(计数器名,编号种类)
upper-roman:大写罗马字母
upper-alpha:大写字母
编号嵌套:可以在大编号中嵌套中编号,在中编号中嵌套小编号。
//大编号:
h1:before{
content:counter(mycounter);
}
h1{
counter-increment:mycounter;
}
//中编号:
h2:before{
content:counter(subcounter);
}
h2{
counter-increment:subcounter;
}
在这个事例中,中标题的编号是连续的,如果想在第二个大标题里的中标题重新开始编号的话,需要在大标题中添加counter-reset属性,在这事例中counter-reset:subcounter
在字符串两边添加嵌套的文字符号
可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号,close-quote属性值用于添加结尾的嵌套文字符号。注意,当需要添加双引号时,需要使用“\”转义字符。
h1:before {content:open-quote;}
h1:after {content:open-quote;}
h1{quote:"("")";}
当需要添加双引号的时候,需要使用“\”转译字符
h1{quote:"\" "\";}
CSS3 使用选择器在页面插入内容的更多相关文章
- CSS3系列一(概述、选择器、使用选择器插入内容)
CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[att ...
- css3在页面中插入内容
A. 使用选择器来插入内容 h2:before{ content:"前缀"; } h2:after{ content:"后缀"; } B. 指定个别的元素不进行 ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
- jq prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。 提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
- CSS3常用选择器(一)
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在c ...
- CSS3属性选择器与(:not)选择器
一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围: ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
随机推荐
- Less的嵌套规则
Less的嵌套规则 在使用标准CSS时,要为多层嵌套的元素定义样式,要么使用后代选择器从外到内的嵌套定义,要么给这个元素加上类名或 id 来定义.这样的写法虽然很好理解,但维护起来很不方便,因为无法清 ...
- A:分段函数-poj
A:分段函数 总时间限制: 1000ms 内存限制: 65536kB 描述 编写程序,计算下列分段函数y=f(x)的值. y=-x+2.5; 0 <= x < 5 y=2-1.5(x- ...
- 开始你的第一个npm脚本工具
在实际开发中,一般刚开始一个项目或者刚接手一个项目,我们会运行 npm install 下载安装所有依赖, 在实际开发中,可能也会使用各种命令行-- 来提高我们开发的效率. 与它相处了这么久,你真的了 ...
- 在Github发布自己的compile包
Android入门到转行做服务员--在Github发布自己的compile包 2017-12-05 15:27:10 这是一粒代码发布的第一篇博客,一粒代码从事android开发,近期打算开始搞搞博客 ...
- I/O复用中的 select poll 和 epoll
I/O复用中的 select poll 和 epoll: 这里有一些不错的资料: I/O多路复用技术之select模型: http://blog.csdn.net/nk_test/article/de ...
- cmd 更改计算机名
bat 更改计算机名 不用重启电脑就生效^_^ @Echo off Color 0A title --更改计算机名 :A cls echo. echo. [0]退出 echo. echo. 不用重启 ...
- 51Nod--1012最小公倍数
1012 最小公倍数LCM 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 输入2个正整数A,B,求A与B的最小公倍数. Input 2个数A,B,中间用 ...
- SpringBoot集成Redis实现缓存处理(Spring AOP实现)
第一章 需求分析 计划在Team的开源项目里加入Redis实现缓存处理,因为业务功能已经实现了一部分,通过写Redis工具类,然后引用,改动量较大,而且不可以实现解耦合,所以想到了Spring框架的A ...
- 零基础学习Hadoop
零基础学习hadoop,没有想象的那么困难,也没有想象的那么容易.在刚接触云计算,曾经想过培训,但是培训机构的选择就让我很纠结.所以索性就自己学习了.整个过程整理一下,给大家参考,欢迎讨论,共同学习. ...
- 大数据学习(1)Hadoop安装
集群架构 Hadoop的安装其实就是HDFS和YARN集群的配置,从下面的架构图可以看出,HDFS的每一个DataNode都需要配置NameNode的位置.同理YARN中的每一个NodeManager ...