当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 5种给CSS样式表瘦身减肥的方法

CSS样式表
让图片 div居中实现代码
去掉点击链接时周围的虚线框outline属性
CSS 优先级 详细分析
广告始终定位到网页右下角 css
superLink 让伪链接更有可用性
CSS 模块化 实现方法
css 选择器 介绍
CSS 语法 学习css入门者看
firefox 滚动条消失引起页面抖动的问题
纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》
渲染CSS选择器
CSS 兼容问题
css textarea 高度自适应,无滚动条
CSS 网页表单实现鼠标悬停交互效果
鼠标激活显示背景色网页特效CSS代码
CSS制作用户登录和用户注册的用户体验表单
CSS代码 注释的3种方法
网页头部css代码优化实例
IE7和IE8的兼容性问题
CSS 网页布局网页制作技巧总结

No. « 19 20 21 22 »

技术文章搜索

关键字

5种给CSS样式表瘦身减肥的方法

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-13   浏览: 110 ::
收藏到网摘: n/a

你有没有觉得你的CSS样式表文件过于臃肿？其实如果你注意并培养一些比较好的CSS书写习惯，我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧，掌握之后你便能立即为你的CSS样式表修身了。

第一步:学会如何组合选择器

什么是选择器?
如果你还不知道什么叫做”选择器”，你可以先参考一下w3schools.com的CSS语法概述。

未优化的CSS代码
在下面的图例中，你会看到来自三个不同选择器的同样的CSS属性声明。

css-压缩-教程
点击小图浏览清晰大图

优化的CSS代码
你可以将上面的css代码优化组合，让所有CSS选择器使用同一组属性。每个选择器之间用逗号分割开，像下面这样。

1
2
3
4
5
6
7
h2, p, .block {
    font-size: 1.5em;
    padding: 10px 10px 10px 25px;
    margin: 10px 0;
    border: 1px solid #ddd;
    background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}

第二步:了解CSS选择器优先级

什么是CSS优先级?
选择器优先级是用于在CSS代码中同一个选择器使用不同属性时CSS优选处理哪些属性的规则。对选择器优先级不了解的话可以参考:Juicy Studio –选择器优先级

未优化的CSS代码
理解优先级规则中不同等级重要性是很必要的，如果写了同样优先级的CSS声明将有可能导致代码冲突和代码臃肿。

css-优先级

优化的CSS代码
当你完全掌握CSS选择器优先级之后，你便能通过合并统一的属性声明来所见代码量，然后再单独声明元素的独有属性。你会很快找到优化CSS代码的技巧，对完成合并和匹配代码。下面是关于优化上图代码的实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h2 {
    font-size: 1.5em;
    padding: 10px 10px 10px 25px;
    margin: 10px 0;
    border: 1px solid #ddd;
    background: #f0f0f0 no-repeat 5px 10px;
}

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}

#featured h2.twitter {
    background-color: #fffdd7;
    border: 1px solid #ddd991;
}

第三步:学会如何合并类和ID

和之前类似，你也可以通过匹配合并class名和id值来优化你的CSS代码。请记住,为同一个元素添加不同的多个class，你就可以通过组合不同的属性声明在实现你希望的效果。在适当的位置添加id属性也是可以让你对样式有更多的控制权。

HTML

1
2
3
4
5
6
7
8
<div id="featured">
    <h2 class="best double">Best of</h2>
    <h2 class="fav double">Popular Posts</h2>
</div>
<div id="disable">
    <h2 class="comments double">Comments</h2>
    <h2 class="twitter double">Twitter</h2>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...

h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
h2.tools {background-image: url(wrench_screwdriver.gif);}

h2.double {
    width: 263px;
    float: left;
    margin: 0;
}
#featured h2.double {
    background-color: #ffe2e2;
}
#disable h2 {
    filter:alpha(opacity=40);
    opacity:.40;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    background-color: #d5d5d5;
}

第四步:学会CSS简写

CSS简写可以让你将多行的CSS属性声明缩写成简单的一行代码。现在你在很多地方都可以找到CSS缩写的相关教程，你也可以浏览以下CSS缩写教程:

第五步:将你的样式表分成几部分–@import

在你完成一个比较大的网站项目时，你的样式表中的代码量是相当庞大的，也许会有很多不同模块的CSS声明及注释。这种情况下，你可以考虑使用将一个庞大的样式表切割成几个不同模块的小样式表，然后再用@import将他们组合起来。

HTML
你可以像平常一样调用一个样式表

1
<link rel="stylesheet" type="text/css" href="styles.css" />

CSS – styles.css
这时styles.css作为你的主样式表，它将负责调用其它子样式表。(我会把子样式表放在’styles’ 目录下以便于组织管理，纯属个人习惯，你也可以有自己的习惯)

1
2
3
@import "styles/main.css";
@import "styles/checkout.css";
@import "styles/shoppingcart.css";

译者注:@import虽然能够为某个大的CSS文件减肥，但是它在页面读取方面(尤其IE)还是有弊端的。感兴趣的读者可以看看这篇文章:
《Don’t Use @import》

你还可以参考以下相关文章: