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

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

搜教程4年前 (2020-04-14)CSS教程219

css如何实现给div添加滚动并隐藏滚动条_css教程

本文来自CSS教程栏目,文中为大家介绍了实现给div添加滚动并隐藏滚动条的方法,具有一定的参考价值,希望可以帮助到大家。隐藏滚动条:【display:none】。

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、插入图片

详细介绍css属性之媒体类型_css教程

本文为大家详细介绍了css属性中的媒体类型,具有一定的参考价值,希望可以帮助到大家。样式单的一个最重要的特点就是它可以用于多种媒体,比如页面、屏幕、电子合成器等等。

<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网其它相关文章!

css如何实现边框长度控制功能_css教程

本文来自CSS入门教程栏目,文中为大家介绍了css实现边框长度控制功能的方法,具有一定的参考价值,希望可以帮助到大家。实现此功能可以考虑使用伪类,这样很方便。

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

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

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

标签: csscontent
分享给朋友:

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

px,em,rem的区分【css教程】,px,em,rem

px,em,rem的区分【css教程】,px,em,rem

它们都是用于设置字体的大小以及盒子的宽高,然则px不会由于浏览器尺寸的转变而转变,而em和rem会由于浏览器尺寸的变化而变化 在我们写代码的过程当中,经常在CSS中定义字体的大小或许元素的宽高值时会运用到尺寸大小的单元,本日将要为人人细致引见在CSS中常见的尺寸单元名称及其用法,具有肯定的...

style是什么意义【css教程】,style

style是什么意义【css教程】,style

我们在进修前端学问的时刻常常会用到一个style属性,那末style究竟是什么意义呢?本篇文章我们就来给人人引见一下关于style的意义,下面我们来看细致内容。 <style> 标签用于为 HTML 文档定义款式信息,在 style 中,您能够规定在浏览器中怎样显现 HTM...

word-wrap属性怎样用【css教程】,word-wrap属性,CSS3

word-wrap属性怎样用【css教程】,word-wrap属性,CSS3

word-wrap属性用于将长单词或 URL 地点在容器的边境处举行自动换行。 CSS3 word-wrap属性 作用:许可长单词或 URL 地点换行到下一行。 申明:设置或检索当内容凌驾指定容器的边境时是不是断行。 语法: word-wrap: normal|break-word...

text-outline属性怎样用【css教程】,text-outline属性,CSS3

text-outline属性怎样用【css教程】,text-outline属性,CSS3

text-outline属性是用于指定文本表面的,经由过程该属性能够设置表面的粗细、隐约半径、色彩。 CSS3 text-outline属性 作用:text-outline 属性划定文本表面。 语法: text-outline: thickness blur color; thic...

运用<nav>链接滚动到页面响应部份【css教程】,CSS

运用

跟着网站页面的涌现,运用转动作为导航长页面的要领变得愈来愈盛行。运用JS + jQuery代码,能够轻松地在nav元素中设置链接以转动到页面的响应部份。假如你愿望在JS不存在时很好地降级,请将锚标记添加到页面中,本篇文章就来给人人引见关于运用<nav>链接转动到页面响应部份。...

user-select怎样运用?默认值是什么?【css教程】,user-select

user-select怎样运用?默认值是什么?【css教程】,user-select

user-select是用于设置用户是不是能够选中文本,它的默认值是text,示意的是能够挑选文本。它还有其他三个属性值分别是none不能被挑选,all一切内容作为团体可被挑选以及element能够挑选但受元素边境束缚 user-select属性是css3新增的属性,用于设置用户是不是能够...