码迷,mamicode.com
首页 > Web开发 > 详细

精通css学习记录

时间:2015-10-10 01:35:41      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

#字体

 * 无衬线字体(Sans-serif):Helvetica,Arial,‘Lucida Family‘,Verdana,Tohoma,‘Trebuchet MS‘
 * 有衬线字体(Serif):Georgia,Times
 * 等宽字体(monospace),常用于计算机书籍的代码板块,每个字母宽度相等
 * 梦幻(fantasy)和草体(cuisive)在网页上不常用,因为浏览器间差异大
 * 中文:宋体、微软雅黑、华文细黑

#背景图像

background-position:使用px单位,是左上角顶点相距。而使用百分数,是对应点相距。

1.圆角边框的问题
定宽圆角框: 用首尾两个块级元素的背景去遮住box的上下背景。
不定宽圆角框: "滑动门技术"
不同颜色的下通用的圆角边框: “山顶角”
css3: 多背景法、border-radius

2.投影
css3: box-shadow,并且可以和border-radius合用产生圆角阴影。
img标签外面套个容器div,对div设置个背景图案是带有投影,并让div浮动产生包裹img的效果(这样就不用显示设置div的width和height了)。设置img的display为block,并用margin对他产生小偏移。也可以对图片进行相对定位。

3.视差滚动
几层div的嵌套,每层都有各自的有透明通道的背景图。让她们repeat,然后移动的background-position的百分数不一致。

4.让logo作为背景,里面的文字以text-indent超级大的负数缩进,让它既能被搜索引擎搜索到,由能让人视觉看到图片。

#透明度问题

1.opacity和rgba的区别:opacity对元素设置了不透明度,除了背景之外,里面的内容和子元素都会拥有这样的透明度。而rgba可以专门为其中一个属性设置透明度,比如background

2.ie6的filter

#对超链接的合理使用

1.使用注意事项:

 * 超链接的元素,搜索引擎会自动去点击,所以,一定不要把有些会影响数据的操作用a标签来做。
 * 要注意超链接和锚点都是一个元素,避免给锚点也设置成了链接的样式。所以要使用伪类。
 * 为了提高可使用性,比如有些只是用键盘来操作的,最好让:focus和:hover设置为一个样式。

2.伪类:link指的是未被访问过的链接,而不是作为链接的a元素,所以和visied交换位置其实也无所谓。同时要和锚点区分,需要love连用

3.为了达到更好的兼容性,所以要使用a的伪类来做翻转效果。所以display要设置为block;

4.使用line-height而不是height设置变成按钮的链接,即达到了垂直居中,又能够撑开它的高度。

5.ie7和其它对:hover的认识不一样,ie7不能作用在它的子元素上面。所以想达到它子元素现身的效果,可以给她加上:focus和:active,让它能够在点击了之后它的子元素可用。


#列表

1.列表项目符号因为位置的可控性不强,所以一般采取关闭符号的方式。然后在左边给予内边距,把背景图像用作项目符号。

2.用无序列表做导航,用有序列表做分页。

3.一般在列表中嵌套a标签,让a标签实现翻转的效果。

精通css学习记录

标签:

原文地址:http://www.cnblogs.com/supersoup/p/4865596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!