顾名思义缩写有简写意思,那就总结一下CSS缩写知识点。
为什么要让CSS属性缩写?
1、简化代码。一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节。加快网页下载速度和网页加载速度。
2、优化CSS目的。其中CSS优化之一即是简化代码缩写CSS属性代码。
一、CSS样式属性单词代码简写优化
(1)CSS文本:
font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:22px; 即可简写缩写成: font:12px/22px bold Arial,Helvetica, sans-serif;
(2)CSS背景:
background-color:#F00; background-image:url(图片地址); background-position:bottom; background-repeat:no-repeat; 即可将背景CSS属性缩写为: background:#F00 url(图片地址) no-repeat bottom;
(3)CSS内补距(CSS padding):
padding-top:5px; paddding-right:20px; padding-bottom:10px; padding-left:15px; 即可缩写为: padding:5px 20px 10px 15px; 或者 padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; 缩写为: padding:5px 10px;
(4)CSS外边距(CSS margin):
margin-top:5px; margin-right:20px; margin-bottom:10px; margin-left:15px; 即可缩写为 margin:5px 20px 10px 15px; 或: margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 缩写为: margin:5px 10px;
(5)、CSS 边框:
border-top:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; 即可缩写为: border:1px solid #000;
二、标点符号优化:
总结:总结常用的CSS 缩写,希望在以后制作实践中多多使用和多多总结。
时间: 2024-10-13 10:20:29