CSS常用属性的代码简化实例
所属分类:
网页制作 / CSS
阅读数:
651
收藏 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
css实现的让图片垂直居中的方法
图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。
收藏 0赞 0分享
3个比较有用的网页制作技巧
我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 “顶级”CSS技巧!虽然没有什么新意,但对新手而言却非常重要!
收藏 0赞 0分享
display:inline的用法
和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
收藏 0赞 0分享
css样式实现整个页面背景使用一张图片
最近一直被css背景困扰,因为是仿站,别人网站背景图片无论怎样另存,都是相同文件名,打开一看,整个网站的各个角落背景图片都在一个文件中分布,于是上网搜集资料,发现使用这种方法的网站很多,源自于雅虎最早。
收藏 0赞 0分享
关于CSS样式表文件组织形式的整理
以下引用网络上的一篇文章,不知道作者是谁了,总体上概括的不错,但是在实际应用当中还是要根据项目情况来具体实施比较好。
收藏 0赞 0分享
查看更多