CSS中content和attr的用法

　　content和attr属性用的不是很多，但是它们能在页面下面悄悄的使用CSS来生成内容，下面让我们看看content和attr的用法相互配合产生神奇效果的

　　基本content用法

　　content属性能让程序员使用CSS往页面元素里填写内容：

　　.myDiv:after { content: "我是一个使用*content*属性生产的静态文字"; }

　　注意，如果想让伪元素：after绝对定位，必须对div设置position:relative

　　content和attr配合使用

　　content使用attr来从页面元素中动态的获取内容：

　　attr属性通常和自定义属性data-配合使用，因为传统的其它属性虽然也能存值，但通常不适合存放表达性文字。

　　content里的字符串连接操作

　　还需要用JS里的字符串吗？答案是不需要了，CSS3里就能完成这些，是不是很神奇！attr的动态生成页面内容的能力着实是一件让人兴奋的事情。实际上可以用它配合content对页面的很多其他元素和属性进行操作。

　　切版 qieban()

CSS中content和attr的用法相关推荐

CSS中content属性的妙用
前言本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
CSS中content使用字体图标
首先说CSS中的content属性主要用来与:before或者:after伪元素配合使用,用来插入生成内容. 这里我们来看一下淘宝的例子: 目前字体图标使用最广泛的是阿里巴巴的iconfont(具体使 ...
html cellpadding css,CSS中cellspacing和cellpadding属性用法
CSS中cellspacing和cellpadding属性的使用是否了解,这里和大家分享一下,cellspacing属性设置表格边框之间和表格单元格之间的间距(以像素为单位):cellpadding属 ...
css中伪类after before用法
:before 选择器在被选元素的内容后面插入内容. :after 选择器在被选元素的内容后面插入内容. 1基本用法 before和after p:before{ content: "bef ...
CSS中background-attachment的介绍和用法
background-attachment可以设置在网页滚动时背景图片是否随着网页一起滚动,当一个盒子的高度足够大时,网页会产生滚动条,此时可以使用background-attachment属性来设置 ...
css中float用法
文档流:浏览器根据元素在html文档中出现的顺序,从左向右,从上到下依次排列. 浮动属性是CSS中的定位属性,用法如下: float: 浮动方向(left.right.no ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
html中content属性,CSS3的content属性用法详解
Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡.超链接的立体翻转特效.添加图标.都要使用到content属性,当然这个属性要结合:before和:after伪类使 ...

CSS中content和attr的用法

CSS中content和attr的用法相关推荐

最新文章

热门文章