CSS3教程

当前位置: HTML5技术网 > CSS3教程 > css代码优化

css代码优化

  

  要点1:css代码优化作用与意义


  1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度

  2、便于维护。简化和标准化css代码让css代码减少,便于日后维护

  3、让自己写的css代码更加专业。


  要点2:css优化方法-需要优化css代码地方


  1、缩写css代码。

  2、排列css代码。

  3、同属性提取共用css选择器。

  4、分离网页颜色和背景设置样式(较大站点需要注意)。

  5、条理化css代码。


  实例讲解以上几点div css优化方法


  1、缩写css代码

  常用需要缩写 css属性代码如下:

  background(背景属性

  未优化前

  background-color:#FFF;对应属性为背景颜色为白色

  background-image:url(divcss5.gif);对应属性是设置divcss5.gif图片为背景

  background-position:bottom;背景图片是居底部

  background-repeat:repeat-x;背景按X坐标(横坐标)重复延伸

  以上CSS代码可以简写为

  background:#FFF url(divcss5.gif) repeat-x bottom;

  解释:背景颜色为白色,并以X坐标重复divcss5.gif图片,并且图标居下。未优化css background属性相同


  margin(外补白属性-

  未优化前

  margin-left:5px; 意思为靠左5px

  margin-right:6px; 靠右6px

  margin-bottom:7px; 底部延伸7px

  margin-top:8px; 顶部延伸8px

  优化简写为

  margin:8px 6px 7px 5px; 意思和属性效果同上,

  padding(内补白属性

  未优化前

  padding-left:5px; 意思为左补白5px

  padding-right:6px; 右补白6px

  padding-bottom:7px; 底(下)补白7px

  padding-top:8px; 顶(上)补白8px

  优化简写为

  padding:8px 6px 7px 5px; 意思和属性效果同上

  border(边框属性

  未优化前

  border-color:#000000;边框颜色为黑色

  border-style:solid;边框样式为实线

  border-width:1px;边框宽度为1px

  可以简写为

  border:1px solid #000000;意思同上未优化前

  如果是只设置左边边框为1px,颜色为黑色的实线css代码如下

  border-left:1px solid #000000;


  font(字体属性-

  字体的属性如下:

  font-style:italic; 字体样式

  font-variant:small-caps; 字体异体

  font-weight:bold; 字体加粗

  font-size:12px; 字大小为12px

  line-height:22px;字行高为22px

  font-family:”黑体” 字体为黑体字

  可以缩写为一句:font:italic small-caps bold 12px/22px “黑体”;


  二、CSS重用优化


  这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,如下:

  .yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}

  .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

  他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性

  优化后:

  .yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}

  .yangshi_b{text-align:right; }

  注意观察以上代码,自己理解,不懂可到CSS论坛提出问题。

  IE6支持max-height、min-height CSS样式


  让IE6支持max-height、让IE6支持min-height样式属性方法教程

  我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定高度范围值,有时也需要设置一个最小高度值,以达到对齐等样式。接下来由DIVCSS5为大家总结的如何解决IE6不支持max-height和不支持max-height的方法;IE6 max-height、min-height不支持解决方法。


  目录

  1.   IE6支持max-height解决方法
  2.   IE6支持min-height解决方法
  3.   IE6支持max-height又支持min-height方法

  1、IE6支持max-height解决方法 -

  IE6支持最大高度解决CSS代码:

  .yangshi{max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;}

  说明:max-height:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;则是让IE6支持max-height替代CSS代码,但效果和其它版本浏览器相同效果。

  让所有浏览器都支持max-height的CSS样式代码,完整:

  max-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”"); overflow:hidden;这里的1000和1000px是你需要的数值,注意3个数值的相同。

  让IE6支持最大高度max-height的时候别忘记加上overflow:hidden;


  2、IE6支持min-height解决方法 -


  IE6支持最小高度解决CSS代码:

  .yangshi{min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");}

  说明:min-height:1000px; 这个是IE6以上级其它品牌浏览器支持最小范围高度。而_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");则是让IE6支持min-height替代CSS代码,但效果和其它版本浏览器相同效果。

  让所有浏览器都支持min-height的CSS样式代码,完整:

  min-height:1000px;_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”"); 这里的1000和1000px是你需要的数值,注意3个数值的相同。


  3、IE6支持max-height又支持min-height方法 -


  让所有浏览器包括IE6即支持最大高度又支持最小高度。

  .yangshi{Max-Height:620px;Min-Height:40px;_height:expression(this.scrollHeight > 620 ? “620px” : (this.scrollHeight < 40 ? “40px” : “auto”));}

  IE6支持Max-Height和支持Min-Height CSS代码

  _height:expression(this.scrollHeight > 620 ? “620px” : (this.scrollHeight < 40 ? “40px” : “auto”));

  说明:以上代码作用是让对象的最小高度为40px,最大高度为620px的CSS样式属性。


  CSS命名规范

  随着以后的趋势从现在的html4+css2.0到html5+css3.0的发展升级,现在的css命名规范显得相当重要了,当然发展到html 5+css 3.0完全兼容至少还需要5-8年时间,但是现在可以从点滴积累做起。html5+css3.0完全兼容至少还需要5-8年时间是怎么得来的,可以推算从IE6到现在IE8的发展,而现在还有很多用户在使用IE6浏览器,IE6现在还没有被微软淘汰或不能使用,从ie6开始到现在也经历了大概有8年时间,可想如果要发展到html5+css3.0各个浏览器都兼容至少需要8年时间。


  CSS命名规范重要性

  1、为以后html5+css3.0发展方向打下基础。

  现在命名头部、底部等大家习惯用 header、footer来命名,最终html调用css样式既是

  这种形式,以后html5+css3.0标准将是直接用

  标签来表示头部部分了,所以为以后版本升级规范有一定好处,虽然达到兼容html5+css3.0浏览器还早,但是可以为div+css开发者来说可以先注意一下。

  2、css命名规范可以节约团队开发时间。

  特别在团队合作开发网站项目中,大家规范的来制作一套共识的css命名,将节约开发时间及成本,如果开发项目中div+css开发者乱命名css,将给后来的程序员的解读带来不便。

  3、css命名规范可为以后维护带来方便

  Div+css开发好后网站项目制作好后,很难保证以后不调整及优化,这样自己没有自己一套css命名特点,将为自己以后的维护带来不便。


  总结:

  无论是考虑团队开发、以后的维护、html5+css3的升级,DIV CSS开发伪类的命名都相当重要。

  现在通常我们都是在html 4.0 和css 2.0基础上开发的div+css符合w3c标准的网站,至于html 5+css 3.0可以了解,如果要运用至少又将等几年,等浏览器IE6-IE8的淘汰不能使用,这时我们将合理的运用html 5+css 3.0 。


  十句CSS学习顺口溜(很受用)


  一、IE边框若显若无,须注意,定是高度设置已忘记;

  二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;

  三、三像素文本慢移不必慌,高度设置帮你忙;

  四、兼容各个浏览须注意,默认设置行高可能是杀手;

  五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;

  六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。

  七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。

  八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。

  九、IE浮动双边距,请用display:inline拘。

  十、列表横向排版,列表代码须紧靠,空隙自消须铭记。


【css代码优化】相关文章

1. css代码优化

2. 10 款非常棒的CSS代码格式化工具推荐

3. 5种方法立刻写出更好的CSS代码

4. 高效整洁CSS代码原则 (上)

5. 高效整洁CSS代码原则 (下)

6. 让网站变灰的css代码(支持IE、Firefox和Chrome)

7. Web开发者的福利:30段超实用CSS代码

8. 每位设计师都应该拥有的50个CSS代码片段

9. Web开发者不容错过的20段CSS代码

10. Web开发者不容错过的10段CSS代码

本文来源:https://www.51html5.com/a939.html

点击展开全部

﹝css代码优化﹞相关内容

「css代码优化」相关专题

其它栏目

也许您还喜欢