CSS3新特性

html-css019

CSS3新特性,第1张

1、 [class~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

2、 [class|=box]

选择 lang 属性值以 "box" 开头的所有元素。

3、 :focus

选择获得焦点的 input 元素。

4、 p::first-letter

选择每个 <p>元素的首字母。

5、 p:first-child

选择属于父元素的第一个子元素的每个 <p>元素。

6、 ::after ---- ::before

在每个 <p>元素的内容之前插入内容。-----在每个 <p>元素的内容之后插入内容。

7、 a[class^=red]

选择其 class 属性值以 "red" 开头的每个 <a>元素。

8、.box2 [class$=red]

选择其 class 属性以 "red" 结尾的所有 .box 2元素。

9、 a[src*="abc"]

选择其 src 属性中包含 "abc" 子串的每个 <a>元素。

10、.box3 h1:first-of-type

11、 tr:nth-child(2n+1)

选择属于其父元素的基数子元素的每个 <p>元素。

12、 :disabled

选择每个禁用的 <input>元素

chrome/safari : -webkit-

FF: -moz-

ie: -ms-

Opera: -o-

!!!!!!如何处理私有前缀:autoprefixer插件

1、 使用图标字体的原理

(1) 引入字体文件 *.ttf或其它

(2)在html文件中:定义字体

@font-face{

font-family: 'mzd'

src:'字体文件的地址'

}

(3)使用字体

.box {

font-family: 'mzd'

}

2、使用时的两种方案

(1)阿里巴巴图标字体

(2)font-awesome: 图标字体库

1、animation动画的使用方法

(1)先定义动画规则

(2)使用动画规则

2、animation的属性

这个代码有些可以用,有些不可以用的,JS是肯定不可用的。css样式只能这样用。不能引用

如 <div style="font-size:12px"></div>这样来使用!

模板市场的都是阿里申请的设计师开发的,有引定的存放css js空间。!这不一样的。做阿里的模板设计师要申请的!阿里会给一个类似后台的东西上传CSS和JS文件!

对于正确使用阿里巴巴iconfont想必大家都有一定的了解,但是详细的使用方式我想大家都是大同小异的吧,那么我就把它告诉大家,以便大家方便使用。

具体使用方法如下:

1.首先在I阿里巴巴iconfont矢量图标库这个页面上把你需要的相应图标随后就会点击购物车按钮加入暂存架;

2.其次就是选择完你所需要所有要用的图标后,这时你就需要给它命名。然后你还要在图标管理所对应的图标应用项目中,最后找到这个项目,获取在线链接,把里面的代码复制到CSS中;

3.完成以上步骤后在HTML中需要使用到图标时,使用iconfont类名。

4.最后就是你可以通过控制iconfont类的属性改变图标的样式。

这样你就完成了你所需的相关需求,通过以上操作,你可以轻松完成。那为什么我们要使用阿里巴巴iconfont,其实也不难发现,顾名思义iconfont也就是把图标用字体的方式呈现,其优点在于以下几个方面:首先可以通过css的样式改变其颜色,其实不是专业人士是很难搞定的,其次就是相对于图片来说,具有更高的分辨率,最后就是它拥有更小的存储,对于我们来说非常方便,所以这就是它的优点所在。任何东西的使用都有它的两面性,它的缺点就是浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持。

但是只要你学会了使用的方法就会很快上手,所以说现在的科技也是有它的好处,使用它的方法其实就是你根据方法进行操作,那么你就会很快,学习这些并不是一成不变的,所以祝你早日学会。