CSS代码优化(转载)
要点1:css代码优化作用与意义
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度;
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护;
3、让自己写的css代码更加专业。
要点2:css优化方法-需要优化css代码的地方
1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化css代码。
实例讲解以上几点div css优化方法
一、缩写css代码
常用需要缩写 css属性代码如下:
background(背景属性)
未优化前
对应属性为背景颜色为白色
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论坛提出问题。
我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定高度范围值,有时也需要设置一个最小高度值,以达到对齐等样式。
接下来为大家总结的如何解决IE6不支持max-height和不支持max-height的方法。
目录
IE6支持max-height解决方法
IE6支持min-height解决方法
IE6支持max-height又支持min-height方法
1、IE6支持max-height解决方法
IE6支持最大高度解决CSS代码:
.yangshi{max-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;}
说明:max-height:1000px; 这个是IE6以上级其它品牌浏览器支持最大范围高度。而_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)<1000?”1000px”:”");overflow:hidden;则是让IE6支持max-height替代CSS代码,但效果和其它版本浏览器相同效果。
让所有浏览器都支持max-height的CSS样式代码完整版本:
.yangshi{
maxheight:1000px;
_height:expression_r((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_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");}
说明:min-height:1000px; 这个是IE6以上级其它品牌浏览器支持最小范围高度。而_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”");则是让IE6支持min-height替代CSS代码,但效果和其它版本浏览器相同效果。
让所有浏览器都支持min-height的CSS样式代码,完整:
min-height:1000px;_height:expression_r((document.documentElement.clientHeight||document.body.clientHeight)>1000?”1000px”:”"); 这里的1000和1000px是你需要的数值,注意3个数值的相同。
3、IE6支持max-height又支持min-height方法
css代码:
.yangshi{Max-Height:620px;Min-Height:40px;_height:expression_r(this.scrollHeight > 620 ? “620px” : (this.scrollHeight < 40 ? “40px” : “auto”));}
IE6支持Max-Height和支持Min-Height CSS代码 _height:expression_r(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拘。
十、列表横向排版,列表代码须紧靠,空隙自消须铭记。
出处:http://www.zhiqianduan.com/201.html
CSS代码优化(转载)的更多相关文章
- css代码优化
一.CSS代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度2.便于维护.简化和标准化css代码让css代码减少,便于日后维护3.让自己写的cs ...
- 高效率、简洁、CSS代码优化原则
高效率.简洁.CSS代码优化原则 CSS学起来并不难,但在大型项目中,一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CS ...
- [转载]css代码优化的12个技巧
1.ID 规则2.Class 规则3.标签规则4.通用规则对效率的普遍认识是从Steve Souders在2009年出版的<高性能网站建设进阶指南>开始,虽然该书中罗列的更加详细,但你也可 ...
- [css]【转载张鑫旭】我是如何对网站CSS进行架构的
一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...
- [css]【转载】CSS样式分离之再分离
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...
- [css] 【转载】 精简高效的CSS命名准则/方法
原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...
- 前端开发面试题-CSS(转载)
本文由 本文的原作者markyun 收集总结. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(conte ...
- CSS:IE,Chrome,Firefox兼容性和CSS Hack(转载)
原作者:微米博客 以前写过一篇关于CSS hack的文章,但近期回头看了看发现理解的不够深刻,总结的也不凝练,于是今天重新测试从新写一篇.常用的CSS hack如下(笔者只对IE&FF& ...
- TP5.1 分页CSS样式(转载)
效果如图: 1.在extend\目录下创建page目录,在page目录中创建Page.php文件,将以下代码放入文件中 <?php namespace page; use think\Pagin ...
随机推荐
- asp.net mvc项目创建WebApi简单例子
1.创建默认路由的映射. namespace RedisDemo.App_Start { public class WebApiConfig { public static void Register ...
- JDBC mysql 中文查询不到数据解决
问题现象: Selenium自动测试中,使用JDBC查询mysql数据库中数据,查询条件为中文,例如: select * from XXX where name ='我是测试数据'; 查询结果为空:但 ...
- 《Beginning Java 7》 - 4 - finalize() 手动垃圾回收
当我们想在系统进行垃圾回收时做一些特定的工作,我们就可以重写 finalze() 函数,因为 Object 的 此函数是空的. 比如: protected void finalize() throws ...
- 2018OCP最新题库052新加考题及答案整理-27
27.Examine these facts about a database: 1. USERS is the database default tablespace. 2. USER1, USER ...
- window.onload与$(document).ready()的对比
一.window.onload:(1)必须等待网页中所有的内容加载完毕后(包括图片)才能执行:(2)不能同时编写多个,如: window.onload = function(){ alert(&quo ...
- 解决winform datagridview的ClearSelection无效问题
因为把方法放在了界面的构造方法里,此时datagridview还没绘制出来,所以ClearSelection方法无效,放在control或form的load方法里就没问题了 参考:https://ww ...
- [ActionScript 3.0] 简单倒计时
import flash.utils.Timer; import flash.events.TimerEvent; import flash.text.TextField; var text:Text ...
- 循环神经网络RNN原理
一.循环神经网络简介 循环神经网络,英文全称:Recurrent Neural Network,或简单记为RNN.需要注意的是,递归神经网络(Recursive Neural Network)的简写也 ...
- jquery中获取单选标签redio的val
$('input:radio:checked').val();
- c++ 两个set合并
set<int> a,b; //合并到a a.insert(b.begin(),b.end());