css (6) css 常用功能性属性

 

 

图片透明

先来复习一下盒子的透明问题：

1 opacity:0.6;

介于0~1之间，为了让IE兼容，我们要使用IE自己的滤镜：

1 filter:alpha(opacity=60);

盒子的透明，会让里面的所有内容都透明了，如果想要让文字清晰，就不能把文字装到盒子里，要用绝对定位。

 

 

 元素隐藏：

　　display:none;

　　visibility:hidden;

 

css文件是分层次：

 

　　reset.css：重置 所有的元素都的默认样式

　　base.css 公共类，就是原子类

　　common.css： 页面和页面之间，公共的样式部分。

　　page.css:每个页面自己的样式

 

reset.css：让所有的元素都有默认的样式，比如ul没有小圆点，比如h1的字号22px……

这是因为不同浏览器对标签有不同的默认样式，比如某个浏览器h1默认字号是22px，而有的是24px。

最最著名的reset.css就是雅虎公司的YUI的reset.css。

网址：http://yuilibrary.com/yui/docs/cssreset/

以后页面上不允许出现这个：

1 *{margin:0;padding:0;}

有超过1秒的渲染时间。严重影响页面渲染性能速度。

所以就要用h1,p,h2罗列出来，清除margin、padding。我们的YUI reset.css就是这么做的。

 

 

 

iconfont

字体图标：图标不是图标了，也不是精灵了，而是字了。

字怎么是图标，这个字在某一个字体下，就是图标。

icomoon.io 是国外非常著名的一个字体图标引擎，可以免费的、在线把任何矢量图片变成字体。

https://icomoon.io/app/

 

字体图标的特点：

1） 不用下载图片了，就不浪费http请求了，但是要下载字体文件，到底省流量没有，见仁见智。

2） 只能是单色，不能是多个颜色。无法制作彩色花图标。

3） 控制这个图标，就用控制字体的方式来控制就行了。

 

icomoon里面图标不多：

美工来制作ai格式的图标，可以在icomoon里上传，然后改。