给大家带来CSS代码优化7个原则

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
破洛洛文章简介：收拾和优化代码不但是为了你的CSS文件巨细，还包含了保护性和可读性。以上的道理其实不只是针对CSS，它们还能使用到HTML，Javascript和其他编程言语。CSS文件不但是为了出现给你网站的终极用户。下面的道理能够匡助用户体验和开辟者履历。使用这些准绳到你将来的项目
　　作为网页计划师(前端工程师)，你大概还记得已经的谁人网页巨细倡议:一个网页（包含HTML、CSS、Javacript、Flash和图片）只管不要凌驾30KB的巨细，跟着互联网的日趋复杂，收集带宽也在飞速开展，良多计划师已不再思索这条30KB的幻想原则。跟着愈来愈受接待的CSS结构和Javascript对网站用户体验的强化，使得这类征象愈来愈广泛，特别是关于年夜型网站来讲，仅仅一个CSS文件就已凌驾了30KB的下限。
　　可是即使云云，如今也有良多原则来匡助你在完成CSS结构落后行CSS代码的紧缩和优化。CSS代码优化的目标其实不仅仅是削减CSS文件的巨细，它还能让你的CSS代码更有层次、更高效。在破洛洛，你将会学到更多关于CSS代码优化的常识，这能帮你更熟习CSS代码的标准性。熟习这些观点还能让你成为更周全的网页计划师，从而写出更优化的CSS代码。
1.利用简写

　　假如你如今还对简写一点都不懂得，那你就又写后进了，不外幸亏，学起来并非很难。利用简写是一种让代码削减的最复杂办法。没有比如今更合适理论代码简写的时分了，还等甚么，一同来看看吧。
　　Margin、border、padding、background、font、list-style和outline都是能够举行简写的属性。CSS简写就是不再利用分歧的相相似属性的声明…

p{margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;}

你能够把它们简写成如许:

p{margin:10px20px30px40px;}

扫瞄器能够经由过程分歧数目的属性值来注释你界说的CSS代码，请看图解:

登录/注册后可看大图

下面的简写图讲授明的是根据分歧的属性值能够举行分歧的缩写，这类办法一样合用于padding和Border-width属性。

Font的简写关于减少代码量很有匡助，并且能让你少打良多字母;)

登录/注册后可看大图

Font简写的例子。注:假如没有界说某个属性值的话，将承继副级元素的界说或利用默许值。

假如你对以上简写办法已洞若观火，你还能够看看以下两个简写教程(英文)，大概会对你有所匡助:
1.CSSShorthandGuide(CSS简写引导)
2.EfficientCSSwithshorthandproperties(高效CSS属性的简写)


2.制止利用Hack

登录/注册后可看大图

JonHick的博客hicksdesign.co.uk/journal利用扫瞄器前提性正文

　　Hack是一个糟的器材，它会为分歧扫瞄器界说一样的代码，使得CSS繁杂。如今我们晓得利用前提性正文来取代hack，他们在IE6和IE7中是被承认的，乃至IE团队也保举如许利用。利用前提性正文服务于切合扫瞄器特征公用的CSS代码，因而，更小的、中心的CSS代码用来服务于服从尺度的扫瞄器，只要需求前提呈现的时分（好比IE），才会往下载分外的CSS文件！假如在其他网站看到本信息，申明本教程来历是网页教授教养poluoluoCom网站，次要是为了防收罗。
上面来看看IE6利用前提性正文的代码典范:

<!&ndash;[ifIE6]>
<linkrel=”stylesheet”type=”text/css”href=”ie6.css”mce_href=”ie6.css”>
<![endif]&ndash;>

　　这段代码使得IE6往下载分外的ie6.css剖析它公用的css代码。一样的，假如针对IE7只用把下面的6与7交换就好了。

破洛洛文章简介：收拾和优化代码不但是为了你的CSS文件巨细，还包含了保护性和可读性。以上的道理其实不只是针对CSS，它们还能使用到HTML，Javascript和其他编程言语。CSS文件不但是为了出现给你网站的终极用户。下面的道理能够匡助用户体验和开辟者履历。使用这些准绳到你将来的项目



3.利用留白

　　不管是为了本人浏览仍是二次开辟，都要让CSS坚持优秀的可读性，留白就充任了关头的脚色。
　　我们不勉励你为了失掉一个更小的CSS文件，就往失落一切的空缺格局，如tab，换行，空格等。这里保举嵌套的代码利用一个tab缩进，一切属性自力一行。

登录/注册后可看大图

　　对照上图中的两种CSS誊写格局，哪种格局能让你加倍勤俭浏览和修正的工夫呢？留白的效果不言而喻，它会让你更简单办理代码。


4.移除过剩的布局(frameworks)和重设(resets)

登录/注册后可看大图

NathanSmith的960GridSystemCSSframework利用的重置划定规矩

　　假如你选择利用CSSframework，包含你本人写的，假如你往反省代码必定会发明该framework包括的一些划定规矩其实不合用于你以后的文件，它们是能够被删除的。本文由破洛洛（poluoluo.com）公布！转载和收罗的话请不要往失落！感谢。
　　由此能够想到的另有reset，YUIGridCSS利用的reset和EricMeyer’s重设(Reset)今朝都很盛行，Resets可以移除分歧扫瞄器的默许款式，使得页面在各个扫瞄器之间的体现分歧。可是它们一般包括了一个年夜的网站必要的一切属性，一些比方<pre>,<code>,<sub>,<dfn>,<var>等等属性关于一般网站来讲基本不会用上，删失落那些你用不上的。EricMeyer也会勉励你如许做！
　　framework和reset会很好的匡助你的事情，可是假如不往失落那些你用不上的利用，反而会拖累你页面的效力和可读性。

破洛洛文章简介：收拾和优化代码不但是为了你的CSS文件巨细，还包含了保护性和可读性。以上的道理其实不只是针对CSS，它们还能使用到HTML，Javascript和其他编程言语。CSS文件不但是为了出现给你网站的终极用户。下面的道理能够匡助用户体验和开辟者履历。使用这些准绳到你将来的项目



5.让CSS能包管往后的保护

登录/注册后可看大图

DougBowman的stopdesign.comCSS为层利用特别的选择器

　　另外一种优化CSS代码的办法是依照你的习气将CSS性命分红明晰的布局块。将CSS文件的声明用正文分开开并举行排版，能够更便利本人在很长工夫今后从头审理这个CSS文件，到当时你的效力会凌驾很多。
　　但是，狂风彬彬更崇尚那种拆散布局作风，也就是给每种结构一个独自的CSS文件。AndyClarke的《超出CSS》(TranscendingCSS)一书也是倡始这类办法。


6.纪录你的事情

登录/注册后可看大图

DavidShea在他的网站mezzoblue.com中具体解说了标志引导(markupguide).

　　假如你是一个计划团队中的一员，那末让你的代码坚持划定规矩的分歧性并能与其他成语创建优秀的相同是相称主要的，并且还要创建一种网站的尺度。比方，团队中的某个成员想出了一个对照不错的网站标签切换界面，纪录上去这些设法和注解会匡助团队的其他成员再次利用这类效果，如许可以制止HTML或CSS代码的痴肥。看到本信息申明该文是经由过程网页教授教养（poluoluo.com）收拾公布的，请不要删失落！
　　纪录事情次要包含标志导游(markupguides)和款式表导游(stylesheetguides)，这类事情其实不仅仅合用于团队，也一样合用于一团体的计划事情(一团体的”团队”)。究竟，在完全一个计划项目以后，经由一年乃至更长的工夫，当你再返来看到这些已经本人写的代码时，也一样会以为很生疏。未来你会经由过程本人已经的纪录懂得到在那些CSS布局是怎样让网页体现的，或谁人网页对表单按钮的起到反作用。
　　记着，必定要养成为CSS写正文的习气。


7.紧缩利用

　　为了使得扫瞄器节俭更多下载个载进工夫，紧缩是一个不错的办理计划，可是仅限于公布的时分。YUICompressor和CSSTidy就是如许方面的专家，他们可以往除过剩的代码，校验属性相互掩盖的毛病。
很多盛行的编纂器，好比BBEdit,TextMate,和TopStyle都可以匡助你格局化你的CSS代码成你想要的模样。你还能经由过程服务器紧缩手艺利用PHP处置你的CSS。你能够找到更多的CSS优化和紧缩的CSS工具。
　　有一点，这些程序尽量会下降毛病的产生，但并非完善的。一样，最好不要用他们去向理包括CSShack的文件。这也是另外一个让那些hack贮存在别的的文件里的缘故原由。


总结

　　收拾和优化代码不但是为了你的CSS文件巨细，还包含了保护性和可读性。以上的道理其实不只是针对CSS，它们还能使用到HTML，Javascript和其他编程言语。CSS文件不但是为了出现给你网站的终极用户。下面的道理能够匡助用户体验和开辟者履历。使用这些准绳到你将来的项目中，必定可以取得严重的效果。

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。

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

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

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

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