CSS常用属性的代码简化实例
所属分类:
网页制作 / CSS
阅读数:
631
收藏 0赞 0分享
CSS代码简化在工作中是非常有益的,也是必要的。在编写CSS代码时,经常会出现冗余的代码,为了提高代码的质量及文件压缩到最小,使代码具有可读性,不得不把CSS代码简化。下面用一些比较常用的属性来做示例。
margin
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
代码简化为:margin:1px
margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;
代码简化为:margin:1px2px
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
代码简化为:margin:1px2px3px
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
代码简化为:margin:1px2px3px4px
注意:当属性值是0的时候单位可以不写如:0px直接就写成0
padding
padding的书写方法和margin相类似
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
代码简化为:padding:1px
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
代码简化为:padding:1px2px
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
代码简化为:padding:1px2px3px
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
代码简化为:padding:1px2px3px4px
border
border-width:1px;
border-style:solid;
border-color:#000000;
代码简化为:border:1pxsolid#000
background
background-color:#CCFFFF;
background-image:url(图片路径);
background-repeat:repeat-x;
background-position:5px4px;
代码简化为:background:#CFFurl(图片路径)repeat-x5px4px
font
font-size:26px;
font-weight:bold;
font-family:“宋体”;
代码简化为:font:26pxbold“宋体”
color属性值
color:#000000;
color:#ff0000;
代码简化为:color:#000,color:#f00
js 解决隐藏与显示div的相关问题
我的导航中就有一栏产品中心下面用隐藏个div然后鼠标放上去就显示出来,但是导航那一块div一直出不来,什么都没有,很是郁闷不知道是什么原因
收藏 0赞 0分享
ie10 css hack 条件注释等兼容方式整理
ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来解决
收藏 0赞 0分享
IE6双倍边距 IE6浏览器会出现双倍边距解决方法
所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍,这个问题从有css技术时就已经诞生,本文将介绍详细解决方法,需要的朋友可以参考下
收藏 0赞 0分享
css 网页背景图片 怎样用CSS实现大背景网页效果
在网页设计制作中经常会遇到这样的问题:用图片做背景时,由于显示器分辨率太大或者图片尺寸太小,在页面的两边或者下部了没有背景图片,使页面变的很僵硬,于是搜集整理一些,晒出来和大家分享
收藏 0赞 0分享
查看更多