|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
当完成一项前真个事情以后,很多人城市健忘该项目标布局与细节。但是代码并非即刻就可以完整定型,在余下的工夫里另有不休的保护事情,而这些事情大概不会是你本人完成。以是,布局优秀的代码能很年夜水平上优化它的可保护性。上面列出五种进步CSS文件可保护性的办法,也就是一种较好的CSS款式指南。
1.分化你的款式
关于小项目,在写代码之前,按页面布局或页面内容将代码分为几块并赐与正文。比方,能够分离将全局款式、结构、字体款式、表单、批评和其他分为几个分歧的块来持续事情。
而关于较年夜的工程,如许明显不会有甚么效果。此时,就必要将款式分化到几个分歧的款式表文件。上面的masterstylesheet就是这一办法的例子,它的事情次要是导进其他款式文件。利用这一办法不但能优化款式布局,并且有益于削减一些不用要的服务器哀求。而分化文件的办法就有很多种,masterstylesheet利用了最多见的一种。
/*------------------------------------------------------------------
[MasterStylesheet]
Project:SmashingMagazine
Version:1.1
Lastchange:05/02/08[fixedFloatbug,vf]
Assignedto:VitalyFriedman(vf),SvenLennartz(sl)
Primaryuse:Magazine
-------------------------------------------------------------------*/
@import"reset.css";
@import"layout.css";
@import"colors.css";
@import"typography.css";
@import"Flash.css";
/*@import"debugging.css";*/
同时关于年夜型项目,你也能够加上CSS文件的晋级标记大概一些诊断措施,这里不再胪陈。
2.创建CSS文件索引
为了可以敏捷的懂得全部CSS文件的布局,在文件开首创建文件索引是一个不错的选择。一种可行的办法是创建树形的索引:布局上的id和class都能够成为该树的一个分支。以下:
/*------------------------------------------------------------------
[Layout]
*body
+Header/#header
+Content/#content
-Leftcolumn/#leftcolumn
-Rightcolumn/#rightcolumn
-Sidebar/#sidebar
-RSS/#rss
-Search/#search
-Boxes/.box
-Sideblog/#sideblog
+Footer/#footer
Navigation#navbar
Advertisements.ads
Contentheaderh2
――――――――――――――――――――――-*/
大概也能够如许:
/*------------------------------------------------------------------
[Tableofcontents]
1.Body
2.Header/#header
2.1.Navigation/#navbar
3.Content/#content
3.1.Leftcolumn/#leftcolumn
3.2.Rightcolumn/#rightcolumn
3.3.Sidebar/#sidebar
3.3.1.RSS/#rss
3.3.2.Search/#search
3.3.3.Boxes/.box
3.3.4.Sideblog/#sideblog
3.3.5.Advertisements/.ads
4.Footer/#footer
-------------------------------------------------------------------*/
另外一种体例能够只是先复杂的将内容枚举出来,也不必要缩进。上面的一个例子中,假如你必要跳至RSS部分你只必要复杂的搜刮8.RSS。
/*------------------------------------------------------------------
[Tableofcontents]
1.Body
2.Header/#header
3.Navigation/#navbar
4.Content/#content
5.Leftcolumn/#leftcolumn
6.Rightcolumn/#rightcolumn
7.Sidebar/#sidebar
8.RSS/#rss
9.Search/#search
10.Boxes/.box
11.Sideblog/#sideblog
12.Advertisements/.ads
13.Footer/#footer
-------------------------------------------------------------------*/
<!--someCSS-code-->
/*------------------------------------------------------------------
[8.RSS/#rss]
*/
#rss{...}
#rssimg{...}
界说如许一个款式检索能够很无效的使其别人浏览进修你的代码变得简单。在制造年夜项目标时分,你也能够将检索打印出来从而在你浏览代码的时分便利查阅
</p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 |
|