10个CSS简写/优化技巧 [复制链接]

oocn

CSS简写就是指将多行的CSS属性简写成一行，又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小，优化网站整体性能，更加容易阅读。

下面介绍常见的CSS简写规则：

一、盒子大小
这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：

1. 1
   
2. 2
   
3. 3
   
4. 4
   
5. margin-top:1px;
   
6. margin-right:2px;
   
7. margin-bottom:3px;
   
8. margin-left:4px;
   
9. 你可以简写成：
   
10. 
    
11. 1
    
12. margin:1px 2px 3px 4px;
    
13. 语法 margin:top right bottom left;
    
14. 
    
15. 1
    
16. 2
    
17. 3
    
18. 4
    
19. 5
    
20. 6
    
21. 7
    
22. 8
    
23. //四个方向的边距相同，等同于margin:1px 1px 1px 1px;
    
24. margin:1px;
    
25. //上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px;
    
26. margin:1px 2px;
    
27. //右边距和左边距相同，等同于margin:1px 2px 3px 2px;
    
28. margin:1px 2px 3px;
    
29. //注意，这里虽然上下边距都为1px，但是这里不能缩写。
    
30. margin:1px 2px 1px 3px;
    
31. 二、边框(border)
    
32. 
    
33. 边框的属性如下：
    
34. 
    
35. 1
    
36. 2
    
37. 3
    
38. border-width:1px;
    
39. border-style:solid;
    
40. border-color:#000;
    
41. 可以缩写为一句：
    
42. 
    
43. 1
    
44. border:1px solid #000;
    
45. 语法 border:width style color;
    
46. 
    
47. 三、背景(Backgrounds)
    
48. 背景的属性如下：
    
49. 
    
50. 1
    
51. 2
    
52. 3
    
53. 4
    
54. 5
    
55. background-color:#f00;
    
56. background-image:url(background.gif);
    
57. background-repeat:no-repeat;
    
58. background-attachment:fixed;
    
59. background-position:00;
    
60. 可以缩写为一句：
    
61. 
    
62. 1
    
63. background:#f00 url(background.gif) no-repeat fixed 0 0;
    
64. 语法是background:color image repeat attachment position;
    
65. 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
    
66. 
    
67. color: transparent
    
68. 
    
69. image: none
    
70. 
    
71. repeat: repeat
    
72. 
    
73. attachment: scroll
    
74. 
    
75. position: 0% 0%
    
76. 
    
77. 四、字体(fonts)
    
78. 字体的属性如下：
    
79. 
    
80. 1
    
81. 2
    
82. 3
    
83. 4
    
84. 5
    
85. font-style:italic;
    
86. font-variant:small-caps;
    
87. font-weight:bold;font-size:1em;
    
88. line-height:140%;
    
89. font-family:"Lucida Grande",sans-serif;
    
90. 可以缩写为一句：
    
91. 
    
92. 1
    
93. font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;
    
94. 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
    
95. 
    
96. 五、列表(lists)
    
97. 取消默认的圆点和序号可以这样写list-style:none;,
    
98. list的属性如下:
    
99. 
    
100. 1
     
101. 2
     
102. 3
     
103. list-style-type:square;
     
104. list-style-position:inside;
     
105. list-style-image:url(image.gif);
     
106. 可以缩写为一句：
     
107. 
     
108. 1
     
109. list-style:square inside url(image.gif);
     
110. 六、颜色(Color)
     
111. 
     
112. 16进制的色彩值，如果每两位的值相同，可以缩写一半。例如：
     
113. 
     
114. Aqua: #00ffff ——#0ff
     
115. Black: #000000 ——#000
     
116. Blue: #0000ff ——#00f
     
117. Dark Grey: #666666 ——#666
     
118. Fuchsia:#ff00ff ——#f0f
     
119. Light Grey: #cccccc ——#ccc
     
120. Lime: #00ff00 ——#0f0
     
121. Orange: #ff6600 ——#f60
     
122. Red: #ff0000 ——#f00
     
123. White: #ffffff ——#fff
     
124. Yellow: #ffff00 ——#ff0
     
125. 
     
126. 七、属性值为0
     
127. 书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
     
128. 
     
129. 1
     
130. padding:10px 5px 0px 0px;
     
131. 试试这样吧:
     
132. 
     
133. 1
     
134. padding:10px 5px 00 ;
     
135. 八、最后一个分号
     
136. 
     
137. 最后一个属性值后面分号可以不写，如：
     
138. 
     
139. 1
     
140. 2
     
141. 3
     
142. 4
     
143. 5
     
144. 6
     
145. #nav{
     
146. border-top:4px solid #333;
     
147. font-style: normal;
     
148. font-variant:normal;
     
149. font-weight: normal;
     
150. }
     
151. 可以简写成:
     
152. 
     
153. 1
     
154. 2
     
155. 3
     
156. 4
     
157. 5
     
158. 6
     
159. #nav{
     
160. border-top:4px solid #333;
     
161. font-style: normal;
     
162. font-variant:normal;
     
163. font-weight: normal
     
164. }
     
165. 九、字体粗细(font-weight)
     
166. 
     
167. 你可能会这样写:
     
168. 
     
169. 1
     
170. 2
     
171. 3
     
172. 4
     
173. 5
     
174. 6
     
175. h1{
     
176. font-weight:bold;
     
177. }
     
178. p{
     
179. font-weight:normal;
     
180. }
     
181. 可以简写成:
     
182. 
     
183. 1
     
184. 2
     
185. 3
     
186. 4
     
187. 5
     
188. 6
     
189. h1{
     
190. font-weight:700;
     
191. }
     
192. p{
     
193. font-weight:400;
     
194. }
     
195. 十、圆角半径(border-radius)
     
196. border-radius是css3中新加入的属性，用来实现圆角边框。
     
197. 
     
198. 1
     
199. 2
     
200. 3
     
201. 4
     
202. 5
     
203. 6
     
204. 7
     
205. 8
     
206. 9
     
207. -moz-border-radius-bottomleft:6px;
     
208. -moz-border-radius-topleft:6px;
     
209. -moz-border-radius-topright:6px;
     
210. -webkit-border-bottom-left-radius:6px;
     
211. -webkit-border-top-left-radius:6px;
     
212. -webkit-border-top-right-radius:6px;
     
213. border-bottom-left-radius:6px;
     
214. border-top-left-radius:6px;
     
215. border-top-right-radius:6px;
     
216. 可以简写成:
     
217. 
     
218. 1
     
219. 2
     
220. 3
     
221. -moz-border-radius:6px 6px 0;
     
222. -webkit-border-radius:6px 6px 0;
     
223. border-radius:6px 6px 0;
     
224. 语法 border-radius:topleft topright bottomright bottomleft

复制代码

倾情

他[她]看完这篇文章说：

打的赢

{2023年10月01日}2023冬季，全球 崩 盘，三 峡 溃 坝

{2023年10月01曰}2023冬季，全球 崩 盘，三 峡 溃 坝



作者 ： 薛桦镰
时间：  2023年10月01曰 О8:49:57        星期曰        农历八月十七
           上正宗指 3110.48点    恒指 17809.66点   道指33507.50点
           囯际音乐节      囯际老人节
           


         
突然的，全球 金 融 市 场 连 续 跌 停 大 崩 盘，
没有什么，谁也没想到啊，友邦惊诧，黑 天 鹅 白天鹅 哥斯拉，
一切都是，蓄 谋 已 久 的精心策划。zéi 喊捉zéi。


{一} 今时今曰{癸卯2023年10月01曰 } ：
今时今曰，我预.测，人类有始.以来最大的金.融.崩 盘 ，未来三个月
之内，即，2023年11月、12月、2024年元月，将 震 撼呈 现。
---- 中卝囯股市、全球股市、全球金融市场 连序跌婷大崩 盘 ， 大盘连
       续或稍稍间断30/40多个跌亭板，人类有.史以来最大的金融.嗨啸。
股市、汇市、债市、期货商品、可能还有楼卝市，全部连卝锁式彻底崩溃。
黄 金 价 格 应 该 避 险 bào 涨。
忽 然 之 间 ，天 塌 了。{ 全 球 闪 崩 }
十 八 级 金融大 地.震，史无前例地球崩卝盘，要 多 惨 有 多惨，世界沫曰。
金融天坑，股市雪崩、铡 dāo 斩 首 、bào 雷 溃 坝 ，希 特 勒 巴巴罗萨
金融闪击战 。画 皮 ，终 于 撕 去 了 。
最热的天气，最冷的人心。
道琼斯，憋了14年的一泡shǐ{⑥440.О8}，2023冬季，总算找到了，公共厕所。
缠中说禅17年之前预卝言的，2019毁miè性下跌。{有四年误差}
已故“周期天王”周金涛的，“2018年到2019年