ilMilk.com

1.    CSS属性应用原则。
原则1：首页DIV最小块级单位须设置高度；子页可能添加资料的DIV块不应设置高度;
原则2：css 样式继承关系必须控制在三层以内；
原则3： 对于浮动所产生的IE6BUG,在全局样式里面应定义.clear{clear:both;height;0px; overflow: hidden;}
原则 4：所有页面文件的编码格式统一为：UTF-8;

2.    CSS命名规范。
全局样式 base.css 指所有页面通用的样式，或者公共块的样式;
首页样式 index.css
频道页面样式 channel.css
详 细页面样式 detail.css
如果有特殊单独页面样式，可另取样式命。

3.    页面框架结构保留字。
页面容 器：＃wrap                             页面头部：#header
页面中心内 容：#maincontent             页面底部：#footer
横向方位容器1：main，side             横向方位容器2：leftframe，midframe，rightframe
横向分段容器：section，field，column 盒子内容属性：contentbg
盒子上方属性：topbg                             盒子下方属性：bottombg
盒子左边属性：leftbg                             盒子右边属性：rightbg

4.    导航保留字。
导航：nav    主导航：mainnav
子导 航：subnav    顶导航：topnav
边导航：sidebar    左导航：leftsidebar
右导 航：rightsidebar    菜单：menu
子菜单：submenu    下拉菜单：dropmenu
快速菜 单：quickmenu

5.    功能保留字。
列表：list                    标 题：title
摘要：intro    内容：text
按扭：btn                    搜索：search
登 陆：login    注册：regsiter
提示信息：msg    小技巧：tips
图标: icon                    滚动：scroll

6.    根目录文件夹命名存放方式。
例如：
总 网站文件存放于F盘web下；
Web下 应该包含
images    存放所有网站直接插入的图片；
imagestemp    存 放所有网站直接插入，但后期一定被程序替换的图片。
imagesad    存放网站所有的广告图片；
style    images    存 放公共或单独页面样式所涉及的样式图片；
存放公共样式表或单独页面样式表；
include    存放网站所有的包含页面；
js    存 放网站所有的JS效果文件
XXXX
频道页文件夹    style    存放所有频道页面所涉及到的样式图片和样式表；
存 放所有该频道下的子页面；

7.    注释。
页面和样式表里面 容易混淆，或比较重要的样式，框架样式 都应写注释

页 面内注释格式为
<!–header–>     ————————–为开始
<!–//header–>   ————————–为结束

样式表内注释格式为：
/*XXXX   样式开始*/

/*XXXX   样式结束*/

        提升到艺术的高度来看待留白是通过视觉上的手段，留白也可以给人带来心理上的轻松与快乐，也可以给人带来紧张与节奏，通过这种手段可以向使用者表达出设计者的心理感觉，设计者在设计网页的同时也在同自己的使用对象在作一种交流，好的设计者能够达到同自己的使用对象进行心理对话的程度。不光通过页面上的文字、图片、动画的组合和排列，同时借助留白进行表达。可以达到非常好的效果，例如一个休闲的网站，设计者要传达给使用者的一个信息就是要是让他们轻松随意，无拘无束，光通过网页上的图片和文字的表达是干巴巴的，没有感情色彩的。如果能通过网页设计反映出这种感情色彩，显然这样的设计是较为高明的设计。能实现吗？当然可以，借助网页上的留白就可以，让留白更多的显示出自己的特色，在联系图片和文字的中间架起一道桥梁！

　　如何在空间中突出留白的作用，在审美的观点上，我们知道要是做的网页更加的漂亮，有很多的形式美的要素，这里要强调的是页面的均衡、节奏和韵律，因为通过网页的排版布局，在很大程度上是借助于留白的作用，也许在设计的时候没有留意，在不知不觉中在利用它，试想在一个页面上充满了图片和文字，一点空隙都没有那是根本谈不上节奏感和韵律感的，有了这个要素（这里可以这样认为），就可以合理的调剂它和其它的网页上的其它要素之间的关系，使之安排更加的合理。可以这样来设计，利用留白的体量感来使页面的达到平衡，最好是在一种不平衡中营造出平衡的感觉，这样就会使页面更生动，更富有光彩，假如左右的两个部分有文字，可以适当的将它们的大小调整，是一边很大，文本内容很多，可以放得靠上一些，空出一小部分；另一边小，内容少一些，放在下角，上面的留白很多。这样就会赢得均衡，不会那么死板。当然这只是一个简单的例子，实际的运用中很多时候是多个形式美的要素的综合。在网页中通过留白的桥梁作用，是整个页面上的要素排布的松紧呈现出高低错落，跌宕起伏，这样浏览起来就会富有极强的节奏感，象是在听一首好听的歌曲。毕竟生活不只是按部就班的生活，有时候感觉只是生活，或者是工作，没有艺术，没有美。这是设计者的责任，在网页设计的时候要能体现出来，不是很好吗？当然不是说每个网站都设计出来象音乐或者是艺术网站一样具有那样的节奏感，在不同种类的网站中体现得要不同，这是一个需要设计者把握的问题。把握得不好就会出现和设计者的意图不一致或者甚至是相反的效果。

　　再者，利用网页留白，我们可以不用太多的说明就可以表现出它的网站的特征，这是主要从网页的功能性的方面来看的。例如新闻性网站的信息性、快速性。体育网站的充满激情。商业网站的商业味……，运用得好就如同其它的商业上的运作一样可获得成功。我们知道快餐店利用强烈的刺激性的红色作为它的墙面或者是座椅的色彩，这样让人在这样的环境里感觉到一种紧张感，由此不愿在里面呆很长时间，由此腾出更多的空间给后来的人用，所以通过这种手段使快餐店的生意更加的好。反之在医院里通常是用一些象征安静的蓝色或者是白色，可以使人心情更平静。同样在网页上我们可以利用空间的运用，借助留白来达到一定的效果，有时候得到的效果是使人意想不到的。例如在新闻类的网站上，可以将文字设置得更加的紧密一些，从而是页面上的内容更多，给使用者的一个影响是很值得看的，不用看内容就知道有很多东西，内容的设置尽量集中一些，不要给人的感觉是杂乱无章的。不要设置得太散，尽管可以是通过下拉菜单来看，但是给人的感觉就是内容少，太空。这也是人的心理因素的作用。在一些休闲的网页里就不一样了，留出的空间就要多一些，使页面显出更加轻松的特征，使人一上这个网就能感觉到一种放松的心情，符合休闲的特征。而目前很多这类网站是没有这样做的，他们的目标是尽量使更多的人能够访问这个网站，所以就放尽量多的内容在主页上，使更广泛的人能够在这个网站上找到自己感兴趣的内容。这样就进入了一个误区，就是页面上分布得密密麻麻，让人感觉到一种急促感，紧迫感。给上网的人带来压力，是上这种网站的人所不愿意的。

　　当然留白是留空，有时候需要突破这个层面，这样会发现很多的地方都有发挥的余地，某种程度上留空就是留白，在这里颜色的作用是不可忽视的，因为颜色本身具有体量感，具有感情色彩。所以利用有颜色的留空可以给页面带来均衡，也可以使页面更加的丰富。例如不同的位置的留出的色块之间的相互对比，相互呼应。以及本身大小带来的重量感，同时同网页上的文本和图片之间的结合，可以是页面呈现出整体上的协调。同时借助于颜色的冷淡，加重页面给人的感情色彩。目前很多网站都在采用这种手段，网页上看不到一点纯粹的留出的白色的地方，都是一些色块，这样原理是同留白一样的，通过这些色块（多说是融合于文本或者是图片在一起的），然后来看待它们之间的关系，在一个整体的美感作为标准的条件下，综合运用这些留空来进行制作，这里就要考虑颜色的轻重和大小是相关联的，不能只看到空间的大小来进行对比，同时也要抓住颜色多少的搭配，不能以为追求对比调和或者是单纯的追求节奏而滥用颜色，页面华而不实，给使用者带来极大的不方便。这是应用上的失败。研究网页上的留白就要扩展它的意义，掌握它的变化有利于我们在制作网页的时候，灵活的采用，从而给我们的设计带来极大的方便，给我们每一个设计者的设计意图的传达带来更加广阔的空间。

　　留白的处理是非常重要的手段，每一个网页设计者都要有这种意识，在设计时有意识的将自己一些感受恰如其分的通过这些手段传达出去，会收到事半功倍的效果，“计白当黑”给了我们很大的启示，在网页的构成中，空白同样占有自己不可替代的作用。

最近在看《精通CSS-高级Web标准解决方案》，发现有些笔记是必须记下的，以备不时之需~

我们在浏览网站的过程中，不会刻意地去观察要点击的链接是指向本站点上的另一个页面，还是指向另一个站点。或许我们都有过这样的经历：单击一个链接，期望浏览器转到当前站点上的另一个页面，但是不经意间却点击的这个链接却指向了其他站点。

当然，为了避免这么做也有有效的解决方法，例如采取在新窗口中打开链接。今天要说的是另外种解决方法。比如说，我们能够让外部链接看上去和本站的链接不太一样，为此，我们可以在外部链接旁边加上一个小图标，让他与众不同~

实现这种效果最容易的方法只要在所有的外部链接上加上一个类，然后将图标作为背景图像应用。这个方法可以实现我们想要的效果，但是如果页面多了，那将变得非常繁琐。（因为我们必须要有足够的耐心去在每个外部链接上添加类）。除此之外，我们可以利用属性选择器让CSS判断链接是否是外部链接。

点击我先看Demo

经过测试，可以发现除了IE6以外的其他主流浏览器都可以完美支持。下面来分析下网页源码。

CSS3 扩展了属性选择器的功能，提供了子字符串匹配属性选择器，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。

这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接：

a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}

 这应该会突出显示所有的外部链接，但也会选中使用绝对 URL 而不是相对 URL 的内部链接，为了避免这个问题，需要重新设置指向自己站点的所有链接。

a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none; 
padding-right:0;
}

当然，我们还可以扩展这种技术，如对邮件也进行突出显示。

a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top; 
padding-right:10px;
}

我们还可以用 CSS 选择器来区分一些下载链接，如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器，它寻找以特定值结尾的属性：

a[href$=".pdf"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

a[href$=".doc"]{
background: url(images/pdfLink.png) no-repeat right top; 
padding-right:10px;
}

类似的还有 RSS(feec) 链接：

a[href$=".rss"], a[href$=".rdf"]{
background: url(images/feedLink.png) no-repeat right top; 
padding-right:10px;
}

这些技术都有助于改进用户在站点上的浏览体验，让用户明确地了解单击链接时会发生的情况，避免不必要的取消操作和烦恼。

但本方法对 IE6 没有效果，而且并没有实现自动让外部链接在新窗口打开。如果想实现这样的效果，就必须用到 JavaScript 和 DOM 。

　    当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。

1.分解你的样式

对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
/*——————————————————————
[Master Stylesheet]
Project:       Smashing Magazine
Version:       1.1
Last change:       05/02/08 [fixed Float bug, vf]
Assigned to:       Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use:       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
            – Left column / #leftcolumn
            – Right column / #rightcolumn
            – Sidebar / #sidebar
            – RSS / #rss 54ne.com
            – Search / #search
            – Boxes / .box
            – Sideblog / #sideblog
      + Footer / #footer
Navigation         #navbar
Advertisements         .ads
Content header         h2
——————————————————————-*/[

或者也可以这样：
/*------------------------------------------------------------------
[Table of contents]
1. Body
      2. Header / #header
            2.1. Navigation / #navbar
      3. Content / #content
            3.1. Left column / #leftcolumn
            3.2. Right column / #rightcolumn
            3.3. Sidebar / #sidebar
                  3.3.1. RSS / #rss
                  3.3.2. Search / #search 网管网bitsCN.com
                  3.3.3. Boxes / .box
                  3.3.4. Sideblog / #sideblog
                  3.3.5. Advertisements / .ads
      4. Footer / #footer
——————————————————————-*/

另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索8.RSS。
/*——————————————————————

[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer

——————————————————————-*/

<!– some CSS-code –>

/*——————————————————————
[8. RSS / #rss] 54ne.com
*/
#rss { … }
#rss img { … }

定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

图片等比缩放不必需要后台代码的控制，前台CSS技术完全可以几句CSS代码来完成。

把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。

    对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：

    这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。

    最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：

 .thumbImage{

max-width:50px;

max-height:50px;

}

*html.thumbImage{

width:expression(this.width>50&&this.width>this.height?50:auto);

height:expression(thhis.height>50?50:auto);

}