学习CSS优化的7项技巧

  一.使用css缩写
  使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。
  二.明确定义单位,除非值为0
  忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。
  三.区分大小写
  当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
  四.取消class和id前的元素限定
  当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,不可以在页面中多次使用。你限定某个元素毫无意义。例如:

 代码如下 复制代码
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }

这样可以节省一些字节。
  五.默认值
  通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

 代码如下 复制代码
* {
margin:0;
padding:0;
}

  六.不需要重复定义可继承的值
  CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。
  七.最近优先原则
  如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码
Update: Lorem ipsum dolor set
  在CSS文件中,你已经定义了元素p,又定义了一个classupdate

 代码如下 复制代码
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

  这两个定义中,class=update将被使用,因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。

时间: 2024-10-07 20:42:14

学习CSS优化的7项技巧的相关文章

制作网页时学习CSS应注意的方法技巧

css|技巧|网页 学习任何东西都是一样,从小学.中学.大学,除了学习知识外就是去学习方法! 要想掌握CSS, 首先要学会HTML,我刚开始是从零开始学习的,花了一个月时间学习HTML,没有老师,书就是我唯一的老师,也没有上网的条件!一个月过后,我就开始学习CSS,刚开始看的第一本CSS书是<CSS网页样式设计>看了几天后发现根本看不懂!,之后换了一本<HTML参考大全>,这本书是网页制作师的案头常备之书!之所以更换这本书来学习CSS,是因为这里面有一部分是CSS,就成了我的CSS

学习CSS优化的十八项技巧

css|技巧|优化 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,这里就不展开描述. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em.只有两个例外情况可以不定义单位:行高和0值.除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格. 三.区分大

新手学习SEO优化应该掌握的技巧

中介交易 SEO诊断 淘宝客 云主机 技术大厅 对于新手学习SEO来说,首先在工作和学习当中,要善于总结SEO的技巧与方法.对于SEO自己的认识,SEO是一项非常重要的基础性网站推广工作.它的原理是将网站按照搜索引擎自动收录的规则,将网站进行技术等相关处理,以便网站能够快速有效被搜索引擎收录,掌握搜索引擎网站优化技术对开展网络营销实践有着重大意义.对于SEO我认为从广泛的角度来说应该分为两部分,即页面的内部优化还有网站的外部优化.两者应相辅相成,缺一不可,才能使网站到达预期的效果.对于自己现在主

浅谈站长如何向百度百科学习内容优化的技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 相信每个站长对于百度百科这个网站又爱又恨,爱的是其网站中包含了大量的对自身有价值的信息,恨的是作为站长而言,不管哪种类型的网站前面都会横着百度百科这座大山,而且其排名都是内容页的形式,排名还是稳稳的,以致于大部分站长以超越百度百科的排名为终极目标.但是对于网站优化而言,如果你无法超越的时候,不妨静下心来好好分析该网站的优化技巧,有哪些值得借鉴

CssGaga教程:css合并与CSS优化

文章简介:CssGaga – css合并和CSS优化 CssGaga – css合并 勾选合并开启此功能Before: @import url("reset.import.source.css"); @import url("grid.import.source.css"); @import url("mod-1.source.css"); /* mod-1.source.css 中 @import url("media.source.

告诉CSS新手20个小技巧

感谢有了CSS,真是由于她的灵活性,网页的样式可以完全与代码分离.现在,你仅仅需要有CSS的基础知识,甚至是一个初学者也能够轻易的改变网站的外观. 在过去,我们大量依靠网站设计人员和程序员来帮忙更新网站,甚至一个十分简单的网页也是如此.感谢有了CSS,真是由于她的灵活性,网页的样式可以完全与代码分离.现在,你仅仅需要有CSS的基础知识,甚至是一个初学者也能够轻易的改变网站的外观. 无论你是准备用CSS来创建你自己的网页,还是仅仅想用她来改变你博客的外观,学习CSS基本原则都有助于为你打下CSS的

如何深入学习CSS

有一定的CSS基础后,如果想继续深入学习,可以参考以下几点. 学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同. 如何深入学习我给出以下几点见意: 1.去找机会多做一些项目,公司的,或是外包的,哪怕你没有人民币挣也要做. 这一条并不是多做就会好有的效果,有的人做的项目不少总是按着老的思路去做,做了很多,水平也不会有太大的提高,提高的也只能是熟练度.每一次在做的过程中要学会去思考

CSS的十八般技巧

css|技巧 翻译:阿捷 原文作者:Roger Johansson 作者简介:住在瑞典哥德堡,1994年开始接触和参与web设计,456 Berea Street是他的住址,因此采用这个名字作为他的个人主页域名 最近,经常有朋友问我一些工作中遇到的CSS问题.他们总是不能很好的控制CSS,影响CSS的效率发挥.我来分析总结一下错误所在,帮助大家更加容易使用CSS. 本文总结了我开始使用CSS布局方法以来所有的技巧和兼容方案,我愿意把这些与你分享,我会重点解释一些新手容易犯的错误(包括我自己也犯过

学习CSS需知道的十件事

1. CSS的要点是在你的页面中使用简洁的HTML代码,然后编写CSS"控制规则"来样式化页面中的对象.页面保持清晰有条不紊看上去非常棒.这样你的Html页面可以在移动设备和标准浏览器中运行.这就是CSS的要点. 不过CSS的艺术在于能够利用CSS控制规则快速有效地操纵页面对象.把CSS规则与HTML标记匹配起来的操做就好像是一种对话:两者需要条理清楚且保持同步,否则的话他们将答非所问,搞得你头大. 2.常规操作还是灵活匹配:假设你要样式化页面中一个<h1>header,可