如何才能高效的进行CSS编码?

在前面的文章中,我们提到了用什么软件来编写CSS文件。今天我们来看一些介绍:如何才能高效的进行CSS编码?
  CSS网页布局开发应该使用什么软件比较好 

  CSS 被吹捧的好处之一就是它能减小页面大小,由此缩短下载时间,不仅仅是首页的载入,还包括样式表被缓存以后,后续页面的载入也被加快了的那部分时间。这没错,但首页载入时间的缩短几乎看不出来,这是因为 CSS 代码往往过于冗长了。
  好吧,现在一切都不同了。学点高效地进行 CSS 编码的技巧吧,让你把样式表马上裁减到最小为止。自然,你可能看不到什么惊人的改变,但对于大站来说,微小的字节减少也很重要。
  有很多地方可以减少代码的长度,包括 简记属性 (shorthand properties), 多重声明 (multiple declarations),默认值 (default values), 继承 (inheritance),和空白 (white space)。
简记属性
  Zeroing page margins 提到了一组这样的简记属性,但对于此还有更多的。
  通常简记属性包括:
 font (控制 "font-size", "font-weight", "line-height", 等等) background     (控制元素的背景,放置位置,重复次数,等等) 
 list-style (设置列表元素前边那个“原点”的属性) 
 margin (定义 box     各侧的边缘空白 (margin) 宽度) 
 border (定义 box 边界 (border) 的属性    有很多和边界有关的简记属性)    padding (定义 box 各侧的补白 (padding) 宽度) 
  上述项目是链接至 W3C CSS 2 规范 的相关章节的。
  例如, font 属性 是用于同时设置 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的简记属性。当然,它们并非全都必须写在简记属性中。一旦在简记属性中忽略了其中某个,那些缺失的属性都将被设置为它们的 初始值,就像 W3C 规范 中 font property 一节提到的那样。若需要控制很多和字体相关的属性,使用这个简记属性就可以省下样式表中的大量字节了。

时间: 2024-09-27 21:13:08

如何才能高效的进行CSS编码?的相关文章

网页制作知识:浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你

DIV CSS制作网页之浅谈CSS编码与组织技巧

css|编码|技巧|网页 如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你

浅谈CSS编码与组织技巧

如何让 CSS 代码简洁而易于编写?这恐怕是许多开发者都关心的问题.我想,大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间. 组织你的样式表 尽管我们有种种 CSS 的开发工具,比如 TopStyle,比如 StyleMaster,它们可以让你对当前这个样式表里面定义了哪些规则,涉及哪些 class,哪些 ID 一目了然,但这不等于说你的样式表就组织清晰了,随写

DIV+CSS编码常见错误 你占了几个?

DIV+CSS是网站标准(或称"Web标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.应用应用DIV+CSS编码时很容易犯一些错误.本文列举了一些常见的错误: 推荐专题:Web标准化--跨浏览器开发教程 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下

网页制作中养成良好的CSS编码习惯

css|编码|网页 1.为CSS选定正确的字符集. 这个问题可能没有引起很多人的注意,但是在网站开发的过程中,我发现为CSS选定正确的字符集是相当重要的,如果你的网页使用的是GB2312那就在CSS文件的顶部加上一句@charset "gb2312";这样能够保证CSS与网页保持使用同样的字符集,如果网页使用的是utf-8,那就在CSS文件顶部加上@charset "utf-8"; 2.正确规划CSS 通常情况下,我会在CSS文件的开始部分定义一些常用的样式,如下例

解决跨浏览器兼容的CSS编码准则

浏览器越来越多,也就意味着做web前端开发的就越困难.现在的浏览器的内核都同,对于css的兼容也会有一定的差别!以前讲的用css hack来也不是一件容易的事,用过多的css hack来兼容也会出现许多臃肿的代码:所以掌握一些跨浏览器兼容的css编码准则是非常有必要的. 第一:理解css盒子模型(学习div+css布局也是很重要的,学会的css的盒子模型学习div+css也就不难了) 透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE

不同浏览器兼容的CSS编码准则

掌握一些跨浏览器兼容的css编码准则是非常有必要的. 第一:理解css盒子模型(学习div+css布局也是很重要的,学会的css的盒子模型学习div+css也就不难了) 透彻地理解 CSS 盒子模型是首要事情,CSS 盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的 IE 浏览器. CSS 盒子模型负责处理以下事情: 一个 blcok (区块)级对象占据多大的空间 该对象的边界,留白 盒子的尺寸 盒子与页面其它元素的相对位置 CSS 盒子模型有以下准则: Block (区块)对象都是矩

代码-请问怎么才能引用到这个.css文件?

问题描述 请问怎么才能引用到这个.css文件? 这句代码应该怎么改? 解决方案 ../../h-ui/css/h-ui.doc.css 解决方案二: ./././h-hui/css/xxxxx.css 解决方案三: ../../../h-hui/css/xxxxx.css 解决方案四: ./././h-hui/css/xxxxx.css 解决方案五: ./././h-hui/css/xxxxx.css 解决方案六: ./././h-hui/css/xxxxx.css 解决方案七: ../../w

Discuzx系统 CSS 编码规范、CSS属性书写顺序

  1. 属性写在一行内,属性之间.属性名和值之间以及属性与"{}"之间须有空格,例如:.class { width: 400px; height: 300px; } 2. 属性的书写顺序: 2.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组: 位置:position,left,right,float 盒模型属性:display,margin,padding,width,height 边框与背景:border,background 段落与文本:line-height,tex