在网站是建设中,怎么缩减css代码的大小?怎么检查多余代码和删除?

减少空白 减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说,将每条规则打破放进一行代码里,即把原来插入到代码里用来把每个性质/属性分割到不同行的换行符和缩进符删掉。例如,下面的代码示例在内容上相同,但是第二个要精炼得多:h1 { font-size: x-large;font-weight: ...
在网站是建设中,怎么缩减css代码的大小?怎么检查多余代码和删除?
其实压缩css代码也很简单,也就是一些细节了。
使用CSS的缩写性质
CSS的缩写性质(shorthand property)是一些专用的性质名,用来代替多个相关性质的集合。例如,间隙性质(padding property)是顶部间隙(padding-top)、右侧间隙(padding-right)、底部间隙(padding-bottom)和左侧间隙(padding-left)的缩写。
使用速写性质让你能够把多个性质/属性对(property/attribute pair)压缩进CSS样式表的一行代码里。
当属性是类似的值的时候,例如用于边框空白性质(margin property)的线性测量的时候,接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部(顶部的边框空白)开始,然后围绕格子(box)按顺时针次序继续。
减少空白
减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说,将每条规则打破放进一行代码里,即把原来插入到代码里用来把每个性质/属性分割到不同行的换行符和缩进符删掉。
例如,下面的代码示例在内容上相同,但是第二个要精炼得多:
h1 {
font-size: x-large;
font-weight: bold;
color: #FF0000;
}
h1 {font-size: x-large; font-weight: bold; color: #FF0000}
删掉注释
将注释从你的CSS代码里删掉是减少文件大小的另一种方式。尽管注释对于代码的阅读很有用,但是它无助于浏览器生成你的Web页面。很多Web建设者都习惯给每一行代码都加上注释,或者至少给每一条规则声明都加上。这样的慷慨注释在CSS样式表里是极少需要的,因为大多数CSS性质和属性都很容易阅读和理解。如果你对类、ID,以及其他的选择器都使用有意义的名称,你就可以省掉大多数的注释,同时仍然能够保持代码的可读性和可维护性。
h1 { /* Heading 1 style*/
font-size: x-large; /* x-large size */
font-weight: bold; /* Bold */
color: #FF0000; /* Red */
}
使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站速度的总体目标作出小的、但是可能会是显而易见的贡献。

下面是CSS缩写性质的列表以及它们所表示的常规性质。
Background(背景):背景附件、背景颜色、背景图像、背景位置、背景重复
Border(边框):边框颜色、边框风格、边框宽度
border-bottom(底部边框):底部边框颜色、底部边框样式、底部边框宽度
border-left(左侧边框):左侧边框颜色、左侧边框样式、左侧边框宽度
border-right(右侧边框):右侧边框颜色、右侧边框样式、右侧边框宽度
border-top(顶部边框):顶部边框颜色、顶部边框样式、顶部边框宽度
cue(声音提示):前提示、后提示2011-10-22
可以使用CSS和js压缩技术2011-10-22
要懂代码就会知道弄,不懂,说了白说2011-10-22
mengvlog 阅读 27 次 更新于 2025-08-08 01:49:54 我来答关注问题0
  • 使用速写性质、删除无用的空白、省略注释都能够在很大程度上减少你CSS样式表文件的大小。这反过来会对加速你Web网站速度的总体目标作出小的、但是可能会是显而易见的贡献。下面是CSS缩写性质的列表以及它们所表示的常规性质。Background(背景):背景附件、背景颜色、背景图像、背景位置、背景重复 Border(边...

  • 一般缩小讨论的是宽度问题,因为用户的浏览器和分辨率各不相同。你可以先创建一个外层的div,再在其中嵌套一个内层的div,然后在内层div中放置正文内容。对外层div的CSS进行设置,宽度使用百分比表示,这样可以保证页面布局能够根据屏幕大小进行适应。同时,为了兼容Internet Explorer浏览器,还需要设置text-align...

  • 1、代码约简洁越好 网页浏览速度要增加,有必要降低页面文件的大小,尽可能简化使用代码,字节数。当我们做一个粗体字的时候,可以用 B或strong的标签,在相同的前提下,为增稠网站速度效果,我们最好使用B标签,因为strong比B标签超过5个字符。所以使用B标签,将缩减大量没有必要的冗余代码,可以说极大...

  •  阿暄生活 怎么把网站上的白框去掉。

    1. 使用浏览器的开发者工具: 在大多数现代浏览器中,右键点击页面上的元素,选择“检查”或“审查元素”来打开开发者工具。 这将展示当前所选元素的HTML结构和应用的CSS样式。2. 定位造成白框的CSS属性: 在开发者工具中,检查可能造成白框的CSS属性,如border、backgroundcolor、padding等。 例如,如...

  •  誉祥祥知识 网站建设过程中的网页兼容性检测和修复技巧?

    常用库和插件:例如,normalize.css可以消除浏览器默认样式的差异,使网页在不同浏览器中更一致地展示。其他类似的库和插件还包括Modernizr(用于检测浏览器功能并加载相应的CSS和JavaScript)、jQuery(提供跨浏览器的DOM操作和事件处理)等。总结 在网站建设过程中,网页兼容性是一个需要高度重视的问题。为了...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部