360圈郑重提示：网上交友需谨慎！
法律声明：禁止未成年人、特殊服务者、婚姻幸福者在360圈交友网站注册，禁止在本站发布任何违规信息。本站所表述的“情人”是指“情侣” .
360圈版权所有 &您的位置： >
CSS样式优化
学习标签：
本文导读：如果一个网站没有在4秒之内加载完成，用户就会感到焦躁不愉快，并离开这个网站。网站的内容、搜索引擎优化、用户体验？哪个更重要呢？在速度面前，也许这些都相对更次要。整理和优化代码不仅是为了你的CSS文件大小，还包括了维护性和可读性，下面介绍如何优化CSS样式。
一、css代码优化作用与意义
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间，相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少，便于日后维护
3、让自己写的css代码更加专业。
二、css代码优化的方法
1.使用简写
如果你现在还对简写一点都不了解，那你就又写落伍了，不过幸好，学起来并不是很难。使用简写是一种让代码减少的最简单方法。没有比现在更适合实践代码简写的时候了，还等什么，一起来看看吧。
Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性。CSS简写就是不再使用不同的相类似属性的声明&
p { margin-top: 10
margin-right: 20
margin-bottom: 30
margin-left: 40 }
你可以把它们简写成这样:
p { margin: 10px 20px 30px 40 }
浏览器可以通过不同数量的属性值来解释你定义的CSS代码
2.避免使用Hack
Hack是一个糟糕的东西，它会为不同浏览器定义一样的代码，使得CSS繁冗。现在我们知道使用条件性注释来代替hack，他们在IE6和IE7中是被认可的，甚至IE团队也推荐这样使用。使用条件性注释服务于符合浏览器特性专用的CSS代码，因此，更小的、核心的CSS代码用来服务于遵从标准的浏览器，只有需求条件出现的时候（比如IE），才会去下载额外的CSS文件！
3、CSS重用优化
这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便，如下：
.yangshi_a{ width:100 height:20 text-align: float: font-size:24}
.yangshi_b{ width:100 height:20 text-align: float: font-size:24}
他们都有相同高度、宽度、浮动、文字大小，而只有内容居左居右不同(你可能需要了解CSS居中)，我们就可以提取他们相同属性
.yangshi_a ,.yangshi_b{ width:100 height:20 text-align: float: font-size:24}
.yangshi_b{text-align: }
4. 把 Stylesheets 放在 HTML 页面头部
浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 html 内容加载完成，这样一来，用户看到页面的时间会更晚。
5. 避免使用 CSS Expressions
Background-color: expression( (new Date()).getHours()%2 ? &#B8D4FF& : &#F08A00& )
Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。
6. 避免使用 Filter
IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会&冻结&浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况，最好的解决办法就是使用 PNG8。
7、尽可能少的使用css images
能通过代码或字符实现的，就不用图片去解决。比如&可能感兴趣的人&展开气泡上下三角、返回顶部的箭头、&更多&后面的&符号等。既减小CSS图片请求，又不会面临若干套皮肤升级困难的问题，仅通过对CSS的color、backgroud等属性的控制，就可以换色了。
8、尽量使用CSS3等新技术
尽量使用CSS3实现功能，即非图片类的元素效果图，如圆角、阴影、渐变、半透等效果，可以通过样式控制，而无需切图的元素，在得到设计师认可后，不用图片，只做样式控制。满足高级浏览器的视觉，IE系列不能显示的，有原则的放弃。不仅为速度助力，还在放弃低级浏览器的大方向前进一步。
三、十句CSS学习顺口溜
1、IE边框若显若无，须注意，定是高度设置已忘记；
2、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；
3、三像素文本慢移不必慌，高度设置帮你忙；
4、兼容各个浏览须注意，默认设置行高可能是杀手；
5、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；
6、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。
7、所有标签皆有源，只是默认各不同，span是无极，无极生两仪&内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。
8、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。
9、IE浮动双边距，请用display：inline拘。
10、列表横向排版，列表代码须紧靠，空隙自消须铭记。
您可能感兴趣
一月好评排行榜怎么取消定义过的css样式的默认值？帮帮忙啊！
您的位置： >>
>> 话题内容
您是第 4472 位浏览者 / 有 2 条回复
5年前 发表1F
在项目的css里面定义了*{padding:0;&margin:0;}然后有两个页面定义了table的填充值，而上面的*影响了要显示的效果想问下有办法清除像这种通用默认样式没？、高手帮帮忙
5年前 发表2F
在css里加个&table{padding:2&margin:2}&想设置多少就设置多少，不就行了么，后面加的会把以前*的覆盖掉。
站酷讨论组
你未加入讨论组，无法在本组发言！
简介：网站前台技术相关的讨论、交流……HTML、XHTML、CSS、XML、JavaScript……
============================================
◆ 拒绝无意义的话题及回复。
◆ 拒绝成品设计求助（如作图、改图等）。
◆ 拒绝任何形式的硬软广告。
◆ 企业招聘及项目合作，请发布至论坛相关版块。
============================================
我们都是各个行业的设计师，为了更好的交流设计、分享快乐而聚在一起。因此也请大家配合我们，共同维护良好的交流环境。：）PHPwind6.x CSS模板样式表修改帮助
作者：jb51
字体：[ ] 来源：互联网 时间：06-06 15:54:51
关键字描述：修改 帮助 样式 模板 solid 必要 background: 1px border:1px
/* 公告栏连接字体得样式 */
/*banner*/
.banner img{vertical-align:}
/* 头部logo的位置样式 */
.guide{background:$cbgcolor url($imgpath/$stylepath/guide.gif) 0 bo
关键字描述：修改 帮助 样式 模板 solid 必要 background: 1px border:1px
/* 公告栏连接字体得样式 *//*banner*/.banner img{vertical-align:}/* 头部logo的位置样式 *//*guide*/.guide{background:$cbgcolor url($imgpath/$stylepath/guide.gif) 0 bottom repeat-x; padding:.6em .5 border:1px solid $ color:#}td.guide{ border:0; border-bottom:1px solid $tdcolor}/* 重要栏目导航 [如 社区服务等] *//*table*/.t{border:1px solid $margin:0px auto 8 height: overflow:hidden}/* 风格里所有的框架边框样式 [后台风格编辑里的
表格外边框颜色 ] */.t table{border:1px solid $margin:0; width:100%}/* 样式.t里的table框架样式 */.t2{border-top:$tablecolor 1margin:0px auto 5}/* 浏览页里的框架 [ 无修改必要 ] */.t3{margin:auto}/* [ 无修改必要 ]
*/.t4{padding:1px 0 1px 1px}/* [ 无修改必要 ] *//*table head*/.h{border-bottom:1px solid $background:$headcolor url($imgpath/$stylepath/h.gif) 0 0 repeat-x;text-align:color:$padding:.3em .5em 0; line-height:210%}/* 表格标题栏样式 可修改背景 框大小 [如 分类栏目的名称] */.h span{font-weight:} /* [ 无修改必要 ] */.h h2{font-weight:bold}/* 标签的字体加粗 */.h a{font-family:Acolor:$headfontone}/* 表格标题栏字体样式 */.h a.a2{margin-left:12}/* 连接字的样式距离 */.closeicon { margin-top:.5em}/* 表格标题栏样式右边打开关闭小图标控制 *//* tab */.tab{ float: padding:0 .8em 0;border:1px solid $background:$
border-bottom:0; line-height:200%; margin-top:3 cursor: margin:2px 0; }.h span.activetab{ border-color: $ cursor: font-weight:700}/* 备用css[ 无修改必要 ] *//*table tr1*/.tr1 th{padding:5px 10text-align:vertical-align:font-weight:}.tr1 td.td1{border:1px solid $}/* 列表页里左右框架样式[如无必要不用修改] *//*table tr2*/.tr2{background:$cbgcolor url($imgpath/$stylepath/tr2bg.png) 0 0 repeat-x;color:$}.tr2 td,.tr2 tay{color:#818a89} /* 灰色 [ 比如底部版权信息里得非连接字颜色 ] *//*次要文字颜色-可定义*//*main color 数值自定义*/.f_one /*首页版块里的第一颜色*/.f_two/*首页版块里鼠标移动到上面所显示的颜色*/.t_one/* 主题列表版块里的第一颜色*/.t_two/* 主题列表版块里鼠标移动到上面所显示的颜色*/.r_one/* 主题浏览里的主题内容背景*/.r_two/* 主题浏览里用户信息的背景*/以上可以分开设置如.f_one{background:$}
大家感兴趣的内容
12345678910
最近更新的内容}