`

CSS 被忽略的常识

阅读更多
  1. 不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。

  2. 无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。

  3. 慎用 * 通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。

  4. CSS 的十六进制颜色代码缩写。习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。

  5. 样式放头上,脚本放脚下。不内嵌,只外链。

  6. 坚决不用 CSS 表达式。

  7. 使用 引用样式表,而不是通过 @import 导入。

  8. 一般来说,PNG 比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。

  9. 千万不要在 HTML 中缩放图片,一者不好看,二者占资源。

  10. 正文字体最好用偶数,12px、14px、16px,效果非常好。特例,15px。

  11. block、ul、ol 等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。

  12. 段落之间,至少要有一倍行距。

  13. 强行指定某些元素的 line-height,正文 1.6 倍于文字大小,标题 1.3 倍。

  14. 中文标点用全角。英文夹杂在中文中,左右空格,半角。

  15. 中文字体的粗体和斜体,远离较好,利民利己。

 

40
9
分享到:
评论
17 楼 justjavac 2010-04-22  
longthink 写道
谢谢分享,很实用

可以当手册用了。
16 楼 frone 2010-04-19  
很不错,学习共勉之。
15 楼 longthink 2010-04-17  
谢谢分享,很实用
14 楼 justjavac 2010-04-16  
q4279134 写道
第一条不是太明白 我们都是尽量切最小的图平铺

第一条,可以提到网站的下载速度,但是,网页的显示速度就会变慢,而且占用更多的系统资源。
13 楼 q4279134 2010-04-16  
第一条不是太明白 我们都是尽量切最小的图平铺
12 楼 baeqiuzhu 2010-04-15  
确实很仔细,很有用,很好的细节。
11 楼 justjavac 2010-04-14  
JavaHack 写道
这个  这个
大部分东西 有待我从实际中考证 

很多我已经考证过了。确实实用。
10 楼 JavaHack 2010-04-14  
这个  这个
大部分东西 有待我从实际中考证 
9 楼 justjavac 2010-04-14  
qichunren 写道
5、样式放头上,脚本放脚下。不内嵌,只外链


java哥,你这个就有点绝对了,不解释。

嘻嘻,是有点绝对了。很多论坛提到这个技巧,js如果只是行为,放在下面会提到网站的速度。这方面JQuery就做得比较好(个人觉得)。还有就是Google和雅虎的统计代码,或者cmzz的,都是把js放在下面。
8 楼 qichunren 2010-04-14  
5、样式放头上,脚本放脚下。不内嵌,只外链


java哥,你这个就有点绝对了,不解释。
7 楼 justjavac 2010-04-14  
ygbb007 写道
知道一大半,很适合初学者

真有很多技术是以前不知道的。我一直都以为1像素的图片效率最高呢。
6 楼 ygbb007 2010-04-14  
知道一大半,很适合初学者
5 楼 justjavac 2010-04-14  
sdh5724 写道
学习了, 收藏了, 谢谢了。

真的有很多都不知道啊。
4 楼 sdh5724 2010-04-14  
学习了, 收藏了, 谢谢了。
3 楼 justjavac 2010-04-14  
maazel 写道
松哥厉害!!!

过奖了。
2 楼 maazel 2010-04-14  
好好学习一下
1 楼 maazel 2010-04-14  
松哥厉害!!!

相关推荐

    DIV+CSS 高手也得看的15个CSS常识

    ### DIV+CSS 高手也得看的15个CSS常识 #### 1. 不要使用过小的图片做背景平铺 在网页设计中,背景平铺是一种常见的技术手段,用于填充较大的区域以增强视觉效果。然而,如果选择尺寸过小的图片作为背景平铺,则会...

    Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)

    灰色–的代表伪类的选择器CSS,这部分将会被忽视. 如果我们仅仅是给CSS减肥的话,那我们就可以对红色的选择器开始动手了 注意,说了这么久,大家一定知道了CSS Usage是一个扫描冗余CSS样式的工具,可以清理多余的...

    CSS格式化工具

    虽然CSS格式化工具能极大提高工作效率,但过度依赖自动化可能导致忽视手动调整代码结构的重要性。理解并遵循良好的CSS编写习惯,结合工具使用,才能真正提升代码质量。 7. **安装与配置** CSS格式化工具通常有npm...

    css权威指南.pdf

    本书的一个重要特点是内容涵盖了CSS的强大功能和最新特性,并通过代码示例和提示,对重点和易忽视的领域进行强调和解释。此外,书中还包括了丰富的资源信息列表,方便读者查找相关资料。 CSS是网页设计中的重要技术...

    基于JavaScript和CSS的灾害常识问答及恶劣天气提醒鸿蒙App设计源码

    该源码包含140个文件,其中包含35个PNG图片文件、26个JavaScript文件、20个CSS文件、20个HML文件、13个Java文件、9个JSON文件、4个XML文件、3个Git忽略文件、3个Gradle文件、2个属性文件,旨在为用户提供全面的灾害...

    css3滚屏翻页

    1. **视口单位**:在CSS3中,视口单位如`vh`(viewport height)和`vw`(viewport width)被广泛用于一屏式网站布局。1vh等于视口高度的1%,1vw等于视口宽度的1%。这使得元素的尺寸能根据浏览器窗口自动调整,适应...

    精通CSS:高级Web标准解决方案.pdf

    《精通CSS:高级Web标准解决方案》是一本深入探讨CSS(层叠样式表)技术的专业书籍,旨在帮助读者提升在Web设计中的CSS应用能力。这本书详细介绍了如何利用CSS实现高质量、可维护、跨浏览器的网页布局,是Web开发者...

    css_hack csshack技术

    ` 只在IE6中生效,而在其他浏览器中将被忽略。 2. **属性 Hack** - **`!important`**:此属性在所有现代浏览器中都被支持,但IE6并不支持。可以通过使用`!important`来优先级高于其他样式,从而达到特定的效果。 ...

    CSS3做的机器猫 测试CSS3性能

    然而,CSS3的兼容性问题不可忽视。虽然现代浏览器如Chrome、Firefox、Safari和Edge对CSS3支持良好,但Internet Explorer(尤其是早期版本)的兼容性较差。开发者需要借助前缀(如 `-webkit-`、`-moz-` 等)和条件...

    CSS那些事儿:掌握网页样式与CSS布局核心技术

    最后,CSS性能优化也是不可忽视的一环。减少HTTP请求、合理使用CSS选择器、避免使用通配符选择器、精简CSS代码和利用CSS缓存策略,都是提升网页加载速度的有效方法。 总之,“CSS那些事儿:掌握网页样式与CSS布局...

    CSS2 中文手册,Css 样式控制速查手册

    10. **浏览器兼容性**:了解不同浏览器对CSS2的支持情况是实际工作中不可忽视的部分。虽然现在大多数现代浏览器都支持CSS2,但在老版本或非主流浏览器中可能存在问题,因此需要适当地进行跨浏览器测试。 通过阅读...

    光标形状 html css css知识 网页知识

    在网页设计中,光标形状是一个常常被忽视但其实对用户体验有着重要影响的细节。HTML(超文本标记语言)和CSS(层叠样式表)是构建网页内容和样式的两大核心技术,它们允许开发者精确地控制网页中光标的显示效果。这...

    纯css3艺术文字样式效果代码

    优化CSS3代码,减少冗余,提高性能,同时确保在不同浏览器和设备上的兼容性,都是制作艺术文字时不可忽视的环节。 总之,CSS3为网页设计师提供了丰富的工具,可以创造出各种各样的艺术文字效果。通过深入理解并熟练...

    css实用的技巧 css css

    7. **网页设计人员应该注意的43个Web设计错误**:这份资料可能列举了常见的设计误区,如色彩搭配不当、字体不一致、忽视响应式设计等,提醒设计师们避免这些错误。 8. **学习A标签**:A标签是HTML中用于创建超链接...

    CSS hack技巧大全

    important` 不应被视为一种hack手段。它主要用于提高样式的优先级,而不是用于浏览器兼容性处理。在某些情况下,如IE6,同一个选择器内的两个`!important`声明可能会导致解析冲突。例如,`{background:red!important...

    HTML+CSS+JavaScript网页模板

    JavaScript在现代Web开发中的作用不可忽视。它允许开发者创建动态内容,如表单验证、AJAX异步数据交换、路由管理、以及利用各种库和框架(如React、Vue、Angular)构建复杂的单页应用。ES6(ECMAScript 2015)的推出...

    CSS的解析、检查、修复与压缩

    然而,这类工具往往忽略了代码风格的检查,而CSSCheckStyle正是为了解决这一问题而出现的。 3. CSS代码压缩 CSS代码压缩是指去除代码中的冗余空格、换行、注释等,并优化代码结构,减少文件大小,提升加载速度。...

    CSS-书中素材下载

    8. **CSS优化**:性能优化是CSS不可忽视的一部分。这包括减少选择器的复杂性、合并重复的样式、利用浏览器缓存等策略,以提高页面加载速度。 9. **CSS Grid布局**:CSS Grid是一种二维布局系统,适用于创建复杂的...

    CSS中文参考手册

    不要忽视**响应式设计**,通过媒体查询,可以创建适应不同设备和屏幕尺寸的网页。此外,了解**CSS预处理器**(如Sass、Less)和**PostCSS**,它们可以提升CSS的编写效率和可维护性。 最后,**最佳实践**和**性能...

Global site tag (gtag.js) - Google Analytics