CSS教程之5种给CSS款式表瘦身减肥的办法

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站。
网页制造poluoluo文章简介：你有无以为你的CSS款式表文件过于痴肥？实在假如你注重并培育一些对照好的CSS誊写习气，我想你的CSS款式表过于”瘦削”的成绩会失掉很好的改良的。来看看上面的复杂5步吧，把握以后你便能当即为你的CSS款式表修身了。
你有无以为你的CSS款式表文件过于痴肥？实在假如你注重并培育一些对照好的CSS誊写习气，我想你的CSS款式表过于”瘦削”的成绩会失掉很好的改良的。来看看上面的复杂5步吧，把握以后你便能当即为你的CSS款式表修身了。

第一步:学会怎样组合选择器

甚么是选择器?
假如你还不晓得甚么叫做”选择器”，你能够先参考一下w3schools.com的CSS语法概述。
未优化的CSS代码
鄙人面的图例中，你会看到来自三个分歧选择器的一样的CSS属性声明。

登录/注册后可看大图

点击小图扫瞄明晰年夜图
优化的CSS代码
你能够将下面的css代码优化组合，让一切CSS选择器利用统一组属性。每一个选择器之间用逗号支解开，像上面如许。
1
2
3
4
5
6
7
h2,p,.block{
font-size:1.5em;
padding:10px10px10px25px;
margin:10px0;
border:1pxsolid#ddd;
background:#f0f0f0url(crown.gif)no-repeat5px10px;
}
第二步:懂得CSS选择器优先级

甚么是CSS优先级?
选择器优先级是用于在CSS代码中统一个选择器利用分歧属性时CSS优选处置哪些属性的划定规矩。对选择器优先级不懂得的话能够参考:JuicyStudio–选择器优先级
未优化的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:10px10px10px25px;
margin:10px0;
border:1pxsolid#ddd;
background:#f0f0f0no-repeat5px10px;
}

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);}

#featuredh2.twitter{
background-color:#fffdd7;
border:1pxsolid#ddd991;
}第三步:学会怎样兼并类和ID
和之前相似，你也能够经由过程婚配兼并class名和id值来优化你的CSS代码。请记着,为统一个元素增加分歧的多个class，你就能够经由过程组合分歧的属性声明在完成你但愿的效果。在得当的地位增加id属性也是可让你对款式有更多的把持权。
HTML
1
2
3
4
5
6
7
8
<divid="featured">
<h2class="bestdouble">Bestof</h2>
<h2class="favdouble">PopularPosts</h2>
</div>
<divid="disable">
<h2class="commentsdouble">Comments</h2>
<h2class="twitterdouble">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;
}
#featuredh2.double{
background-color:#ffe2e2;
}
#disableh2{
filter:alpha(opacity=40);
opacity:.40;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
background-color:#d5d5d5;
}第四步:学会CSS简写

CSS简写可让你将多行的CSS属性声明缩写成复杂的一行代码。如今你在良多中央都能够找到CSS缩写的相干教程，你也能够扫瞄以下CSS缩写教程:

• Sitepoint&ndash;IntroductiontoCSSShorthand
  
• 456BereaSt&ndash;EfficientCSSwithShorthandProperties
  
• Leigeber&ndash;CSSShortHandCheatSheet
  

第五步:将你的款式表分红几部分&ndash;@import

在你完成一个对照年夜的网站项目时，你的款式表中的代码量是相称复杂的，大概会有良多分歧模块的CSS声明及正文。这类情形下，你能够思索利用将一个复杂的款式表切割成几个分歧模块的小款式表，然后再用@import将他们组合起来。
HTML
你能够像寻常一样挪用一个款式表
1
<linkrel="stylesheet"type="text/css"href="styles.css"/>CSS&ndash;styles.css
这时候styles.css作为你的主款式表，它将卖力挪用别的子款式表。(我会把子款式表放在’styles’目次下以便于构造办理，纯属团体习气，你也能够有本人的习气)
1
2
3
@import"styles/main.css";
@import"styles/checkout.css";
@import"styles/shoppingcart.css";译者注:@import固然可以为某个年夜的CSS文件减肥，可是它在页面读取方面(特别IE)仍是有坏处的。感乐趣的读者能够看看这篇文章:
《Don’tUse@import》
你还能够参考以下相干文章:

• AListApart&ndash;ProgressiveEnhancementwithCSS
  
• CSSNewbie&ndash;UsingtheCSS@importRule
  

你可以轻松地控制页面的布局。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。