css中margin、padding等属性的简写方式解读

本文详细介绍了CSS样式简写方法,包括margin、padding、颜色、边框、背景和字体等属性的简化使用,同时提供了一个简洁的网页布局实现方式。通过简写CSS属性,不仅能够减少代码量,还能提升网页加载速度,优化用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

margin的简写:

比如:margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px;
可以写成:margin:10px 20px;
或者:margin:10px 20px 10px 20px;
再或者:margin:10px 20px 10px;
注意:简写后的顺序是“上-左右-下”,“上-右-下-左”,“上下-左右”

padding的简写:同上


颜色的简写:


比如:color:#FFFFFF
可以写成:color:#FFF
或者:color:white


边框的简写:


比如:border-width:1px; border-style:solid; border-color:#FFFFFF;
可以写成:border:1px solid #FFFFFF;
或者写成:border:1px solid #FFF;


背景的简写:

比如:background-color:#FFFFFF; background-image:url(background.gif); background-repeat:no-

repeat; background-attachment:fixed; background-position:0 0;
可以写成:background:#FFF url(background.gif) no-repeat fixed 0 0;


字体的简写:


比如:font-style:normal; font-weight:bold; font-size:12px; line-height:120%; font-family:”宋体”,”

Arial”;
可以写成:font:normal bold 12px/120% “宋体”,”Arial”;


链接统一定义:


为了避免每个链接都要给出css来定义,可以用这样的伪类来定义:
a:link {color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#000099; text-decoration:underline;}
a:active{color:#000000; text-decoration:none;}


用body来定义网页:


body{
margin:0 auto;
padding:0; border:0;
font-size:12px; text-align:center;
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;
}
margin:0 auto;的意思就是网页居中,很多初学者都不知道div+css如何使网页居中,其实就这么简单。
padding:0; border:0;是定义所有的内补丁和边框为0,当然你特殊声明的除外。
font-family: “宋体”,”Arial”,”Lucida Grande”,”Lucida Sans Unicode”,”Verdana”,”sans-serif”;是定义

网页文字的字体,默认会按照这个顺序来显示。如果出现英文的话,英文的默认字体是Arial。

不要忽视这么一点代码,如果你不注意的话,会使css文件大很多。。比如没经过简写的css有15K,那么通过简写后的CSS文件可能只有13K了。可千万别小看这2K,记住

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值