本文向大家描述一下CSS样式属性代码缩写的用法,CSS样式中不同类有相同属性及属性值的缩写,对于两个不同的类,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。
成都创新互联公司咨询电话:13518219792,为您提供成都网站建设网页设计及定制高端网站建设服务,成都创新互联公司网页制作领域10多年,包括三轮搅拌车等多个领域拥有多年的网站设计经验,选择成都创新互联公司,为网站锦上添花。
CSS样式属性代码缩写
1、CSS样式中不同类有相同属性及属性值的缩写:
对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。如:
- #mainMenu{
- background:url(../images/bg.gif);
- border:1pxsolid#333;
- width:100%;
- height:30px;
- overflow:hidden;
- }
- #subMenu{
- background:url(../images/bg.gif);
- border:1pxsolid#333;
- width:100%;
- height:20px;
- overflow:hidden;
- }
CSS样式中两个不同类的属性值有重复之处,刚可以缩写为:
- #mainMenu,#subMenu{
- background:url(../images/bg.gif);
- border:1pxsolid#333;
- width:100%;
- overflow:hidden;
- }
- #mainMenu{height:30px;}
- #subMenu{height:20px;}
2、CSS样式中同一属性的缩写:
同一属性根据它的属性值也可以进行简写,如:
- .search{
- background-color:#333;
- background-image:url(../images/icon.gif);
- background-repeat:no-repeat;
- background-position:50%50%;
- }
- .search{
- background:#333url(../images/icon.gif)no-repeat50%50%;
- }
#p#3、CSS样式中内外侧边框的缩写:
在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的,当这四个属性值不同时也可直接缩写,如:
- .btn{
- margin-top:10px;
- margin-right:8px;
- margin-bottom:12px;
- margin-left:5px;
- padding-top:10px;
- padding-right:8px;
- padding-bottom:12px;
- padding-left:8px;
- }
则可缩写为:
- .btn{
- Margin:10px8px12px5px;
- Padding:10px8px12px5px;
- }
而如果当上边与下边、左边与右边的边框属性值相同时,则属性值可以直接缩写为两个,如:
- .btn{
- margin-top:10px;
- margin-right:5px;
- margin-bottom:10px;
- margin-left:5px;
- }
缩写为:
- .btn{margin:10px5px;}
而当上下左右四个边框的属性值都相同时,则可以直接缩写成一个,如:
- .btn{
- margin-top:10px;
- margin-right:10px;
- margin-bottom:10px;
- margin-left:10px;
- }
缩写为:
- .btn{margin:10px;}
4、CSS样式中颜色值的缩写:
当RGB三个颜色值数值相同时,可缩写颜色值代码。如:.
- menu{color:#ff3333;}
可缩写为:
- .menu{color:#f33;}
当前名称:轻松玩转CSS样式属性代码缩写
分享路径:http://www.csdahua.cn/qtweb/news4/7404.html
网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网