当前位置:首页 > html教程 > 正文内容

css中的content属性该如何使用_html5教程,css,content

搜教程4年前 (2020-04-14)html教程271

content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时content属性值我们用的最多的就是给个纯字符,其实它还有很多值可供选择。

1、插入纯字符

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.only-text::before{
        content: '插入纯字符';
    }
</style>

<body>
    <h1>1、插入纯字符</h1>
    <div class="content only-text"></div>
</body>

(推荐教程:CSS入门教程)

2、插入图片

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-image::before{
        content: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png');
    }
</style>

<body>
    <h1>2、插入图片</h1>
    <div class="content fill-image"></div>
</body>

3、插入元素属性

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .content.fill-dom-attr::before{
        content: attr(data-title);
    }
</style>

<body>
    <h1>3、插入元素属性</h1>
    <div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 属性值"></div>
</body>

4、插入当前元素编号(即当前元素索引)

这个特性可用于活动页面的规则介绍。

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index li{
        position: relative;
        /* 给计数器加器起个名字,它只会累加 li 标签的索引,li元素中间的div并不会理会 */
        counter-increment: my;
    }
    .fill-dom-index li div::before{
        /* 使用指定名字的计算器 */
        content: counter(my)'- ';
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>4、插入当前元素编号(即当前元素索引)</h1>
    <div class="content fill-dom-index">
        <ul>
            <li><div>我是第1个li标签</div></li>
            <div>我是li标签中的第1个div标签</div>
            <li><div>我是第2个li标签</div></li>
            <li><div>我是第3个li标签</div></li>
            <div>我是li标签中的第2个div标签</div>
            <li><div>我是第4个li标签</div></li>
            <li><div>我是第5个li标签</div></li>
        </ul>
    </div>
</body>

5、插入当前元素编号(指定种类)

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    li{list-style: none;}
    .content{
        position: relative;padding: 10px;
        border: 1px solid #666;margin: 10px;
    }
    .fill-dom-index2 li{
        position: relative;
        counter-increment: my2;
    }
    .fill-dom-index2 li div::before{
        /* 第二个参数为list-style-type,可用值见: http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
        content: counter(my2,lower-latin)'- ';
        color: #f00;
        font-weight: 600;
    }
</style>

<body>
    <h1>5、插入当前元素编号(指定种类)</h1>
    <div class="content fill-dom-index2">
        <ul>
            <li><div>我是第1个li标签</div></li>
            <div>我是li标签中的第1个div标签</div>
            <li><div>我是第2个li标签</div></li>
            <li><div>我是第3个li标签</div></li>
            <div>我是li标签中的第2个div标签</div>
            <li><div>我是第4个li标签</div></li>
            <li><div>我是第5个li标签</div></li>
        </ul>
    </div>
</body>

相关视频教程推荐:css视频教程

以上就是css中的content属性该如何使用的详细内容,更多请关注ki4网其它相关文章!

扫描二维码推送至手机访问。

版权声明:本文由搜教程网发布,如需转载请注明出处。

本文链接:https://www.sojiaocheng.cn/17554.html

标签: csscontent
分享给朋友:

“css中的content属性该如何使用_html5教程,css,content” 的相关文章

css中伪类与伪元素怎样运用【html5教程】,伪类,伪元素

css中伪类与伪元素怎样运用【html5教程】,伪类,伪元素

伪类能够经由过程link,hover等要领给挑选器增加特别效果,伪元素经由过程:first-line增加首行款式,:first-letter增加首字母样,以下将细致引见这两方面的内容 伪类 它是挑选html文档的某些部份的体式格局,示意跟着时候的推移或经由过程用户干涉干与进入或许退出时元...

CSS届的绘图板CSS Paint API简介【html5教程】,绘图板CSS,Paint API简介

CSS届的绘图板CSS Paint API简介【html5教程】,绘图板CSS,Paint API简介

本篇文章给人人带来的内容是关于CSS届的绘图板CSS Paint API简介,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 一、把Canvas图片作为CSS背景图片 CSS Paint API能够简朴理解为(现实不能同等)把Canvas画布作为一般元素的背景图片。 也就是...

CSS远景背景自动配色手艺简介(代码实例)【html5教程】,CSS前景背景,自动配色技术

CSS远景背景自动配色手艺简介(代码实例)【html5教程】,CSS前景背景,自动配色技术

本篇文章给人人带来的内容是关于CSS远景背景自动配色手艺,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。 一、色彩婚配结果预览 以下GIF示意,当我们按钮背景色逐步变淡的时刻,笔墨色彩也从本来的白色变成黑色了,同时边框也显现出来了,个中的配色转换是纯CSS完成的。 自动...

css边框款式有若干种【html5教程】,css边框样式

css边框款式有若干种【html5教程】,css边框样式

多样的边框款式,能够雄厚我们网页的界面,进步用户体验。css边框款式,罕见的有实线、虚线、双线、点线等等一些边框款式。 下面我们就给经由过程简朴的代码示例,给人人总结一些罕见的边框款式! 代码以下: <!DOCTYPE> <html> <meta char...

CSS的border-radius属性怎样运用【html5教程】,border-radius属性

CSS的border-radius属性怎样运用【html5教程】,border-radius属性

border-radius属性是CSS中的属性,能够使button和div的角变得油滑,运用px或%指定椭圆半径的大小,接下来我们就来看看border-radius属性的细致用法。 起首,我们能够应用border-radius属性完成圆角 button和div的圆角能够运用border-...

怎样运用CSS设置页面打印【html5教程】,页面打印

怎样运用CSS设置页面打印【html5教程】,页面打印

本篇文章给人人引见关于怎样运用CSS设置页面打印,假如设置了媒体范例,则会反应打印时运用的CSS,下面我们来看看细致的内容。 起首我们来看看CSS媒体范例有哪些? screen(屏幕) print(打印) tv(电视) projection(投影仪) all(悉数) 固然另有其...