CSS中content属性的妙用
前言
本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁、高效。
定义
W3school中这样定义:
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。
在前端日常开发中,content属性使用频率并不高,所以开发者一般对它的理解并不深入,通常会在清除浮动、字体图标时偶尔使用。下面通过各种案例,来一起看看content的妙用。
案例
1. 清除浮动
<!--css-->
.left {float: left}
.right {float: right}
.clear:after {content: '';clear: both;display: block;
}<!--html-->
<div class="container clear"><div class="left">左</div><div class="right">右</div>
</div>
父元素.container
中两个子元素.left
和.right
浮动后会脱离文档流,无法撑起容器,造成.container
高度为0
。使用伪元素:after
清除浮动,三个属性缺一不可:
content: '';
通过:after
添加一个内容为空的伪元素。clear: both;
伪元素:after
两侧浮动清除。dispaly: block;
设置块元素,因为clear
只对块元素有效。
说到clear
属性,使用最多的就是clear: both
,left/right
用的却很少,因为both
已经包含left/right
特性,简单直接还有效。想更加深入了解clear
属性,可以看看张鑫旭大神的准确理解CSS clear:left/right的含义及实际用途。
2. 小三角的气泡窗口
<!--css-->
.box {width: 200px;height: 100px;border-radius: 5px;background: #fff;position: relative;
}
.box:after {content: '';position: absolute;bottom: -20px;right: 20px;width: 0;height: 0;border-top: 10px solid #fff;border-bottom: 10px solid transparent;border-left: 10px solid transparent;border-right: 10px solid transparent;
}<!--html-->
<div class="box"></div>
效果:
配合伪元素:after
,实现了一个右下角带倒三角指向性的气泡窗口。通过调整border
各边的颜色和绝对定位位置,可以绘制出指向不同的气泡窗口,只用一个div
标签实现,是不是既简洁又美观。可能你会想到这是伪元素:after
的效果,和content
属性无关,实际上去掉content
后:after
是不生效的。
3. 字体图标
第一种是浏览器自带的特殊字符:
<!--css-->
.music:before {content: '\266C';color: red;
}<!--html-->
<span class="music">晴天-周杰伦</span>
效果:
浏览器支持很多字体图标,如:天气☀、雪花❄、三叶草☘、太极☯等等有趣的字符。参考网页HTML特殊字符编码对照表。
第二种是外部引入字体图标,如Bootstrap中的Glyphicon字体图标:
<link rel="stylesheet" href="../static/css/bootstrap.min.css"><!--html-->
<span class="glyphicon glyphicon-heart"></span>
效果:
这里为什么没有写CSS样式呢,因为bootstrap.min.css中已经定义好了glyphicon-heart的样式,直接在官网上查看:
需要说明的是,本地引入bootstrap.min.css后,还需要引入字体图标库glyphicons-halflings-regular.woff2,字体图标才能生效。
<!--bootstrap.min.css--><!--format 属性是帮助浏览器识别字体的-->
@font-face {font-family: 'Glyphicons Halflings';src: url(../fonts/glyphicons-halflings-regular.eot);src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}
按照上述url路径,将glyphicons-halflings-regular.woff2放到如下目录结构中即可。
4. 无内容提示
<!--css-->
<!--:empty为空时匹配-->
div:empty:after {content: '暂无数据';color: red;
}<!--html-->
<div>有内容数据</div>
<div></div>
效果:
当元素内容为空时,通过content
内容“暂无数据”进行展示。可使用场景:后台接口返回数据后,插入到页面DOM中,当后台返回数据为空时,通过CSS直接提示暂无数据,不需要使用JavaScript处理。
一个有趣的现象,content
内容“暂无数据”无法被选中,这是因为伪元素用于创建一些不在文档树中的元素,虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。
5. 面包屑菜单
<!--css-->
ul li {display: inline-block;font-weight: bold;
}ul li:not(:last-child):after {content: '\276D';margin: 5px;
}<!--html-->
<ul><li>首页</li><li>商品</li><li>详情</li>
</ul>
效果:
又是一个content
值为特殊字符的例子,配合伪类和伪元素完成面包屑菜单。
6. 加载中…动画
<!--css-->
.loading:after {content: ".";animation: loading 2s ease infinite;
}@keyframes loading {33% {content: "..";}66% {content: "...";}
}<!--html-->
<p class="loading">加载中 </p>
效果:
animation
动画值含义:
- loading:animation-name,规定需要绑定到选择器的 keyframe 名称为loading。
- 2s:animation-duration,规定完成动画所花费的时间2秒。
- ease:animation-timing-function,规定动画的速度曲线,先慢中快后慢。
- infinite:animation-iteration,规定动画应该播放的次数为无限次。
通过animation
动画完成33%、66%时与content
内容配合,实现动态“加载中…”的效果。
7. 插入图片
<!--css-->
.loading:before {content: url("../static/img/loading.gif");vertical-align: middle;
}<!--html-->
<div class="loading"> 加载中... </div>
效果:
除了插入字体图标,content
还可以使用url()
方法插入图片,和background
属性类似可以使用url
指定一个图片路径,不同的是content
属性无法控制图片大小,使用条件有限。
8. attr属性内容生成
<!--css-->
.web:after {content: "("attr(href)")"
}<!--html-->
<a class="web" href="https://echeverra.cn">echevera</a>
效果:
content
值也可以是attr()
方法,用来获取指定属性的值,可插入到指定的位置。
9. 半边特效
<!--css-->
span{font-family: sans-serif;font-size: 30px;font-weight: bold;position: relative;color: green;
}
span:before{content: attr(text);color: orange;position: absolute;left: 0;top: 0;width: 50%;overflow: hidden;
}<!--html-->
<span text="echeverra">echeverra</span>
<span text="博">博</span>
<span text="客">客</span>
效果:
半边特效是通过attr()
方法获取text
属性值,属性值与其内容相同,巧妙的设置绝对定位,只显示一半并覆盖了原文本内容,实现文字半边特效,是不是还挺炫酷的。需要注意的是有些font-family
字体会有文字无法重合的问题。
10. 文字引号
<!--css-->
span {quotes: '“' '”';
}
span:before {content: open-quote;
}
span:after {content: close-quote;
}<!--html-->
<p>鲁迅说过:<span>真正的勇士,敢于直面惨淡的人生,敢于正视淋漓的鲜血。</span></p>
效果:
利用元素的quotes
属性指定双引号,使用content
的open-quote
属性值设置开口引号,close-quote
属性值设置闭合引号,当然quotes
也可以指定其他符号。
11. 添加章节数
<!--css-->
ul{counter-reset: section;
}
li{list-style-type: none;counter-increment: section;
}
li:before{content: counters(section, '-') '.';
}<!--html-->
<ul><li>章节一</li><li>章节二<ul><li>章节二一</li><li>章节二二</li><li>章节二三</li></ul></li><li>章节三</li><li>章节四</li><li>章节五<ul><li>章节五一</li><li>章节五二</li></ul></li><li>章节六</li>
</ul>
效果:
这里用到了counter
计数器方法,涉及到counter-reset
、counter-increment
、counter()
和counters()
几个属性。
counter-reset
用来指定计数器名称,例子中命名为section
,同时可以指定计数器开始计数的数值,如指定开始计数数值为1:counter-reset: section 1;
,不指定默认为0
。counter-increment
用来指定计数器每次递增的值,如指定计数器递增值为2:counter-increment: section 2;
,默认值为1,counter-increment
只要指定了counter-reset
,对应的计数器的值就会变化。counter(name, style)
用来输出计数器的值。其中name
为计数器名称,style
可选参数,默认为阿拉伯数字,也可指定list-style-type
支持的值,如罗马数字lower-roman
。counters(name, strings, style)
用来处理嵌套计数器,同样是输出计数器的值,和counter()
不同的是多了一个strings
参数,表示子序号的连接字符串。例如1.1
的string
就是'.'
,1-1
就是'-'
。
关于计数器的详细的教程,同样可以参考CSS大神张鑫旭的CSS counter计数器(content目录序号自动递增)详解。
12. 计算checkbox选中数
<!--css-->
form {counter-reset: count 0;
}input[type="checkbox"]:checked {counter-increment: count 1;
}.result:after {content: counter(count);
}<!--html-->
<form><input type="checkbox" id="javaScript"><label for="javaScript">javaScript</label><input type="checkbox" id="PHP"><label for="PHP">PHP</label><input type="checkbox" id="Python"><label for="Python">Python</label><div class="result">已选:</div>
</form>
效果:
巧妙运用计数器配合:checked
伪类,选中计数器增加1,取消选中减1,用CSS实现动态计数功能。
总结
总结content属性值可以为以下几种:
- string字符串,最常见的,对应案例:清除浮动、小三角的气泡窗口、字体图标、无内容提示、面包屑菜单、加载中…动画。
- url()方法,对应案例:插入图片。
- attr()方法,对应案例:attr属性内容生成、半边特效。
- quotes引号,对应案例:文字引号。
- counter()方法,计数器功能,对应案例:添加章节数,计算checkbox选中数。
尽管使用javaScript同样可以实现上述的大部分功能,灵活性也更高,但使用CSS的好处就是可以极大地简化开发,不占用JS主线程,提升web的性能。
其实content的案例远不止于此,在查阅相关资料的同时,我还见识到了另外一些神奇的用法,当然原理大致相同,本文的案例只是尽可能的带你了解content不为人知的一面,打开一个全新的世界,让你举一反三。如果能在实际开发中运用上,那就更Nice了,希望能对大家有所帮助。
你学“废”了么?
CSS中content属性的妙用相关推荐
- 在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
- 【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...
- 使用CSS中clip-path属性实现奥运五环
今天偶然看见一个使用css实现奥运五环的效果,感觉还挺新奇的,参考了别人连接好的两个环,自己尝试将剩下的三个环连接上.其主要是使用到了一个css:clip-path的polygon属性. 完整代码如下 ...
- overflow属性html5,什么是css中overflow属性
什么是css中overflow属性 发布时间:2020-07-11 16:06:42 来源:亿速云 阅读:192 作者:Leah 本篇文章给大家分享的是有关什么是css中overflow属性,小编觉得 ...
- 面试总结(CSS 的盒模型?、CSS 中选择器的优先级以及 CSS 权重如何计算?、CSS 中哪些属性可继承,哪些不可以?、CSS 单位中 px、em 和 rem 的区别?、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
- CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
- php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
- css中position属性(absolute/relative/static/fixed)
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
- [css] css中Scroll-behavior属性有什么应用场景?
[css] css中Scroll-behavior属性有什么应用场景? 当用户手动点击导航或者API调用导致触发滚动操作时,scroll-behavior属性可以为滚动框设定滚动行为.auto表示立即 ...
最新文章
- 数据可视化:Matplotlib vs ggplot2
- stp和vrrp的配置命令
- 《Java8实战》-第六章读书笔记(用流收集数据-01)
- java月份列表_java – 如何获取两个日期之间的月份和年份列表
- R语言入门学习笔记 - 对R软件的认识
- ubuntu建站遇到的mysql数据库问题
- Python中的str与unicode处理方法
- 区块链教程Fabric1.0源代码分析流言算法Gossip服务端二
- ucinet使用手册_ucinet使用手册
- linux命令行快捷命令及vim常用快捷命令
- 2_Recurrent Neural Networks (RNNs)循环神经网络 —Simple RNNs
- 带有审计表的实体框架核心(EF Core)
- c语言实现克鲁斯卡尔算法,跪求C语言代码纠错,急~~~,克鲁斯卡尔算法
- 前天我看见了一只兔子,昨天是一头小鹿,而今天则是你
- linux python3 装pip,linux 安装pip 和python3(示例代码)
- win32汇编 实现UNIX文件格式转换WINDOWS文件格式 的功能
- 【Y9000x】单硬盘UEFI+GPT基于Win10安装Ubuntu18.04
- 【有利可图网】PS实战教程28:巧用调整边缘滤镜抠毛发
- 超级课程表显示服务器出错,不得不说,超级课程表正在流失大学生用户——一位超级课程表粉丝的自白...
- 谷歌浏览器设置主页教程
热门文章
- Java作业多线程的应用 三人抢票
- crmeb 电商系统 小程序商城系统接口
- 倍福(Beckhoff) 软件及资料分享
- java 文件转十六进制_JAVA将文件转成十六进制字符串和十六进制字符串生成文件的方法...
- C语言每日一练——第8天:冒泡排序
- 手机短信备份文件sms.vmsg文件解析(Java版)
- java错误:The superclass “javax.servlet.http.HttpServlet“ was not found on the Java Bu
- 轻量化前端框架与小程序移动开发
- html语言设计一个网页,HTML语言与网页设计.ppt
- 密码学的发展(第三篇:计算机对称加密法)