当前位置： 首页 > Web前端 > CSS

CSS中content属性的妙用

时间：2023-03-31 10:53:47 CSS

前言本文讲解CSS中不常用的content属性。通过大量的实际案例，带你由浅入深地掌握内容的用法，让代码更加简洁高效。W3school中的定义是这样定义的：content属性与:before和:after伪元素结合使用，插入生成的内容。此属性用于定义要放置在元素之前或之后的生成内容。默认情况下，这往往是内联内容，但此内容创建的框类型可以通过显示属性进行控制。在日常的前端开发中，content属性的使用频率并不高，所以开发者一般对它的了解并不深刻，一般在清除浮动图标和字体图标时偶尔会用到。让我们通过各种案例来看看内容的神奇之处。案例1.清除浮动.left{float:left}.right{float:right}.clear:after{content:'';明确：两者；显示：块；left

right
parentelement.twochildrenincontainer.left和.right元素浮动后会离开文档流，无法支撑容器，导致.container的高度为0。使用伪元素:after清除浮动，三个属性缺一不可：content:'';通过:after添加一个内容为空的伪元素。明确：两者；伪元素：两边飘清后。显示：块；设置块元素，因为clear只对块元素有效。说到clear属性，clear:both用的最多，left/right很少用，因为both已经包含了left/right的特性，简单直接有效。如果想对clear属性有更深入的理解，可以阅读张新旭对CSSclear:left/right的含义及实际使用的准确理解。2.小??三角气泡窗口.box{width:200px;高度：100px；边界半径：5px；背景：#fff；position:relative;}.box:after{content:'';位置：绝对；底部：-20px；右：20px；宽度：0；高度：0；border-top:10pxsolid#fff;border-bottom:10pxsolidtransparent;right:10pxsolidtransparent;
效果：加上伪元素：后，右下角一个倒三角形方向的气泡窗口为实现了。通过调整边框每一边的颜色和绝对定位位置，可以绘制指向不同点的气泡窗，只用一个div标签实现。是不是简单又漂亮？你可能认为这是伪元素:after的作用，与content属性无关。事实上，删除内容后，:after并没有生效。3、第一类字体图标是浏览器自带的特殊字符：.music:before{content:'\266C';color:red;Sunny-JayChou效果：浏览器支持多种字体图标，如：天气?、雪花?、三叶草?、太极?等有趣的角色。参考网页HTML特殊字符编码对照表。第二种是从外部导入字体图标，比如Bootstrap中的Glyphicon字体图标：spanclass="glyphiconglyphicon-heart">作用：这里为什么没有写CSS样式，因为glyphicon-heart的样式已经定义在bootstrap.min.css中了，直接去官网查看：需要说明一下是的，在本地导入bootstrap.min.css后，还需要导入字体图标库glyphicons-halflings-regular.woff2，字体图标才能生效。@font-face{font-family:'GlyphiconsHalflings';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)格式('woff'),url(../fonts/glyphicons-halflings-regular.ttf)格式('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular)format('svg')}根据上面的url路径，将glyphicons-halflings-regular.woff2放到如下目录结构中。4.无内容提示div:empty:after{content:'nodata';color:red;
Withcontentdata
作用：当元素的内容为空时，会通过内容content来显示"没有数据”。适用场景：后台接口返回数据后，插入到页面的DOM中。当后台返回的数据为空时，会直接通过CSS提示没有数据，不需要使用JavaScript来处理。一个有趣的现象，内容“无数据”不能被选中，这是因为使用伪元素创建了一些不在文档树中的元素，虽然用户可以看到这些文本，但这些文本实际上并不在文档树中文档树。5.面包屑菜单ulli{display:inline-block;font-weight:bold;}ulli:not(:last-child):after{content:'\276D';margin:5px;效果：另一个内容值对于特殊字符的例子，用伪类和伪元素完成面包屑菜单。6.Loading...动画.loading:after{content:".";动画：加载2s轻松无限；}@keyframes加载{33%{内容：“..”；}66%{内容：“……”；}}Loading

Effect:animation动画值含义：loading:animation-name，指定required选择器绑定的关键帧名称正在loading。2s：animation-duration，指定完成动画需要2秒。ease：animation-timing-function，指定动画的速度曲线，先慢，中快，再慢。infinite：animation-iteration，规定动画应该播放的次数是无限的。当animation动画完成到33%和66%时，配合content内容实现动态的“loading...”效果。7.插入图片.loading:before{content:url("../static/img/loading.gif");vertical-align:middle;}Loading...作用：内容除了可以插入字体图标外，还可以使用url()方法来插入图片，和background属性类似，可以使用url指定图片路径，不同的是content属性不能控制图片大小，使用条件有限制。8、attr属性内容生成.web:after{content:"("attr(href)")"}echevera作用：内容值也可以是attr()方法，用于获取指定属性的值，可以插入到指定位置。9.半边效果span{font-family:sans-serif;字体大小：30px；字体粗细：粗体；位置：相对；颜色：绿色；}跨度：之前{内容：属性（文本）；颜色为橙色;位置：绝对；左：0；顶部：0；宽度：50%；overflow:hidden;echeverra博客客效果：半边特效是通过attr()方法获取文本属性值，属性值与其内容相同，巧妙的设置了绝对定位，只显示一半，覆盖原文内容，还实现了一半文字的特效，是不是很酷？需要注意的是，有些font-family字体存在文字无法重叠的问题。10.文本引用span{quotes:'"''"';}span:before{content:open-quote;}span:after{content:close-quote;}

鲁迅说：真正的勇士，敢于直面惨淡的人生，正视滴落的鲜血。

作用：使用元素的quotes属性指定双引号，使用content的open-quote属性值设置左引号，close-quote属性值设置右引号。当然，引号也可以指定其他符号。11、添加章节数ul{counter-reset:section;}li{list-style-type:none;counter-increment:section;}li:before{content:counters(section,'-')'.';
  • 第1章
  • 第1章2
    • 第二十一章
    • 第二二章
    • 第二三章
  • 第三章
  • 第四章
  • 第五章
    • 第51章
    • 第52章
  • 第6章
作用：这里使用了counter计数器方法，涉及counter-reset、counter-increment、counter()和counters()属性。counter-reset用于指定计数器的名称。在示例中，它被命名为section。同时，您可以指定计数器开始计数的值。比如指定开始计数的值为1:counter-reset:section1;，不指定则默认为0。counter-increment用于指定计数器每次的增量值。例如指定counter-increment值为2：counter-increment:section2;，默认值为1。只要counter-increment指定counter-reset，对应的counter值就会改变。counter(name,style)用于输出计数器的值。其中name是计数器的名称，style是一个可选参数。默认为阿拉伯数字。也可以指定list-style-type支持的值，比如罗马数字lower-roman。counters(name,strings,style)用于处理嵌套的计数器，它也输出计数器的值。与counter()不同的是多了一个strings参数，代表子序号的连接字符串。比如1.1的字符串是'.'，1-1的字符串是'-'。关于计数器的详细教程，也可以参考CSS大神张新旭的CSS计数器counter(内容目录序号自动递增)详解。12.计算checkbox检查的次数form{counter-reset:count0;}input[type="checkbox"]:checked{counter-increment:count1;}.result:after{内容：计数器（计数）；
javaScriptPHPPython选中：效果：巧妙的使用计数器配合：选中的伪类，选中的计数器加1，未选中的减1，实现了动态计数功能与CSS。总结content属性的取值可以是以下几种：string字符串，最常见，对应情况：清晰浮动，小三角气泡窗，字体图标，无内容提示，面包屑菜单，loading...动画。url()方法，对应案例：插入图片。attr()方法，对应案例：attr属性内容生成，半边特效。quotes引号，对应大小写：字面引号。counter()方法，计数器函数，对应案例：相加章节数，计算checkbox选中数。虽然以上大部分功能都可以使用javaScript来实现，灵活性也更高，但是使用CSS的好处是可以大大简化开发，不占用JS主线程，提高web性能。事实上，内容的案例远不止于此。在查阅相关资料的同时，我也看到了一些其他神奇的用法。一个全新的世界，让你举一反三。如果能用在实际开发中就更好了，希望对大家有所帮助。你学会“浪费”了吗？文章首发于本人博客e??cheverra，原创文章，转载请注明出处。欢迎关注我的微信公众号，一起学习进步！时不时会有资源和福利！

CSS中content属性的妙用相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。