乐趣区

关于css: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: bothleft/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 属性指定双引号,应用 contentopen-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-resetcounter-incrementcounter()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.1string就是 '.'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 了,心愿能对大家有所帮忙。

你学“废”了么?


文章首发于我的博客 echeverra,原创文章,转载请注明出处。

欢送关注我的微信公众号,一起学习提高!不定时会有资源和福利相送哦!


退出移动版