[ post]一、再次认识id与class对于id以及class的认识不能停留在他们是元素节点下的属性节点。Id是Html元素节点的一个属性，用于唯一标示某个节点对象。
class主要的功能是用来设置节点对象的样式。
共同点：都可以用来设置某个对象的样式
不同点：id名字在一个页面中只能出现一次，是网站交互行为的一个特殊标识。Id使用原则：
1、样式只使用一次的时候
2、对页面的区域进行标识如果说id是对单独元素的标识，那么class就是对一类元素的标识。Class可以重复使用（代码重用）减少样式代码，所以值得提倡。Class使用原则：
1、同一页面中出现多次
2、通常以及经常能使用的元素Class使用技巧：
Class作为一种专门用来进行样式定义的属性，除了可以多个元素共用一个class名称之外，也可以让一个元素使用多个class样式，如：
<div class="c1 c2 c3">示例文本</div>
表示：对于div同时运用c1、c2、c3这3种样式看见这个就想起了className这个Dom中很重要的属性
对于：<div class="c1">示例文本</div>
如果：this.className+=" c2"
就会变为：<div class="c1 c2">示例文本</div>
我们可以很容易的通过Js去增加、删除某个节点的样式。
这不是问题的重点，我们应该关注的是这么做带来什么好处。c1、c2、c3的样式会叠加在div标记上，后面的样式覆盖前面的样式，但只覆盖重复定义的那部分。更说明了：Css又名层叠样式表的含义。重要的是：要树立搭积木式css设计思路。
什么叫积木式思路，举例来说：
网页中的文字，大概分为 标题字、导航字、正文字等，在此基础上可能各自颜色不一样
可以把：
.red{…} 定义标题字红色 .green .normal{…..}定义普通字深灰色
.content{….} 定义字体、字号
.block{…..} 定义行间距
那么，普通文章内容：<p class="content block normal">普通段落</p>
特别，针对标题文字：<h2 class="content red">标题</h2>
最终用什么样式，通过多个class的组合来实现效果
最终结论：class的应用比id普及，且更能节省代码。采用web标准进行网站开发有很多潜在变：面向样式 转向 面向结构。
使用表格布局其实是面向样式的，那时我们关注的是最终效果（最终是什么样子或者样式），什么东西放在哪儿
而现在，我们考虑更多的是如何合理组织页面结构，让结构更有条理，更适合后期编码
现在：对页面中的元素、结构、位置比以前更加清晰。良好的结构有利于样式的设计，而良好的样式设计大大减少重复代码，可以让我们的网站更加的“轻”，且利于扩展和维护，更有利于搜索引擎的抓取与分析。所以对于3为1体的设计而言：结构-》样式-》行为，结构重要性是排在第一位的。画草图，拿结构，p图面向结构的设计也使得我们p图时习惯的改变，我们会将同一类型的元素分配到一个区域中去，从而减少内容分配杂乱的现象，最终的界面：网站的元素和内容有序可循。二、Css选择符的命名
css样式定义多了，必然不好管理与修改，良好的css命名是很有必要的。
Css的基本规则：
1、大小写敏感
.content 和 .CONTENT 是2种不同的css样式
2、必须以字母开头，随后可以用字母、数字、下划线等，但不能有空格
.2008 不合法 .k2008 则是合法的命名要有个良好的习惯，大概可以有以下几个法子：
1、使用具有语义命名
如：导航 用id=nav 新闻列表 newslist 下载列表 downloadlist
2、根据样式效果命名
红色 .red{ }
3、使用大小写组合
如：搜索框 searchBox 有点像dom的那几个词
4、使用下划线
如：搜索框 search_box
实际上，通用名称(20个)命名列表如下，了解一下：命名 网站元素 命名 网站元素
site 网站 layout 布局
nav 导航 sitemap 网站地图
search 搜索 searchbox 搜索框
homepage 首页 subpage 二级页面
drop 下拉 dropmenu 下拉菜单
content 内容 header 网站头部
list 列表 footer 网站底部
sidebar 左侧栏或者右侧栏
tool/toolbar 工具条 form 表单
title 标题 arrow 箭头
实际设计中，因为内容的复杂以及变化，css命名不好把握，一个很好的办法是
前缀命名法，如：
对一组用于定义字体样式的class，可以使用f（font的头一个字母）前缀
f-white 表示白色字体
f-red 表示红色字体
f-bold 表示粗体
对于表格（table的头一个字母）的定义class
t-header 表格头部样式
t-col 表格列的样式 t-row
对于新闻列表（news的头一个字母）
n-list 新闻列表
n-tile 标题
n-content 具体列表内容英文不好，就记住一些常用的，通过前缀，也能达到规范命名的要求。三、Css文件结构设计与优化
Css能帮助我们实现表现与内容的分离，引发了一个新的问题，就是css文件的体积越来越大，这会导致2个结果：
1、初次载入css网站速度慢
虽然css文件只要载入便可全站使用，但是由于所有的样式都存在于一个css文件中，使得第一次访问网站的时候需要很多时间
2、维护困难
由于代码很多，我们经常要ctrl+F才能找到某个样式定义从而修改它。
这里更让我们明白，合理规范命名的重要性，如果名字乱取后果极其严重。解决问题的办法是：将一个css文件按某种办法拆分为多个css文件。A、导入结构
@import 导入命令是css一个使用命令，主要功能是根据路径导入一个样式表文件，并且能够指定样式表所服务的设备类型（不做声明则设备为显示器 screen）
@import url("homepage.css");
表示将homepage.css导入到当前页面
@import url("pageprint.css ") print;
表示将pageprint.css导入，并且这个样式表专门用于打印设备的打印样式，很实用B、结构优化
拆分一个css文件大概有3种办法
（1）根据外观
比如全部字体相关的css，放入font.css文件中
全部图片按钮以及表单按钮的css，放入button.css文件中
（2）根据功能
比如导航的css单独为一个文件，nav.css
比如页脚的css单独为一个文件，foot.css
（3）根据需要
共同的地方用一个样式表 a.css
独特的地方定义个样式表 b.css
需要独特的时候就 @import目前来说，初学阶段，不需要拆分css文件，浪费时间四、使用css缩写
运用dw设计样式，生成的代码有时比较复杂，不易于阅读和管理。
可以通过css缩写，将多个属性写到一行，一目了然。1、font字体缩写font : font-style || font-variant || font-weight || font-size || line-height || font-family
font后面依次是：文本样式，是否为大写字母，字体粗细，字体大小，行高，字体名称
有些可缺省，缺省的部分用系统默认值代替
如：#header {font: bold 12px Verdana, "宋体";} 顺序不要错了
其实看起来很复杂，写起来很简单，因为有的根本不会设置
记住：粗体 字体大小 行高 字体 这个顺序就差不多了2、margin以及padding的缩写
如果四边都有且一样则： margin：5px
如果这样写： margin： 5px 2px 3px 表示上5px 左右2px 下3px
如果这样： margin：5px 10px 表示上下5px 左右10px
如果这样： margin：5px 4px 3px 2px 表示上、右、下、左分别是 5、4、3、2
Padding也是一样，是不是很简单
3、boder的缩写
dw对边框生成的样式是非常繁琐的，可以很好的缩写
边框的3特性：粗细、颜色、线型
如果4边一样可以写成 p{border:1px solid #333}
如果不一样大概有2种情况：
（1）不是4边都有边框，如上、下，但是值一样
border-top: 1px solid #333
border-bottom: 1px solid #333
（2）4边都有，值各不一样，可以这样写
border-width:1px 2px 3px 4px;
boder-color: red blue green;
border-style: solid dashed;有的元素，有没有设置 border：0px 效果是不一样的，切记！
4、背景的缩写
background : background-color || background-image || background-repeat || background-attachment || background-position
后面的依次为：背景颜色，背景图片，背景平铺方式，背景是否固定，位置
如：
#content{background:#333333 url(bg.gif) no-repeat 30% 20px}五、Css代码优化
代码优化是很重要的一个问题。
语法的缩写并不能从根本上解决设计者在开发过程中，由于习惯以及经验不足所产生的冗余代码甚至垃圾代码。
优化要留意：
1、代码重用率
一般做全局设置，或者通过群组选择符一次指定多个样式
2、使用样式覆盖进行简化
利用叠加，后面盖住之前的特性
六、如何使用css hack
Hack是指：对程序或者系统进行非官方的修改，或者官方的补丁都被称为hack。
Css hack可以理解为：改善css在不同浏览器下的表现形式的 技巧与方法。
Css hack原理：
通过一些浏览器特殊支持或者不支持的语句，使得一个css样式能够被浏览器解析或者不能被浏览器解析。举个例子： 导入样式表语句@import 只有IE5之后支持，之前的不支持
假设：
Body{font-size:14px;}
@import url("news.css")News.css中：
Body{font-size:18px;}结果就是：IE5以上的 正文18px IE5之前的则为14px七、常用css hack使用办法
由于对css支持矛盾主要体现在IE以及FF浏览器，所以这只了解css hack 针对这2种浏览器的解决方案，常见区别IE以及FF方法如下：1、@import
对于语句：@import url("news.css") screen
Screen 是设备类型，这里指屏幕。IE是不支持设备类型的，只有FF支持。
所以，只有在FF中 news.Css 的样式才会起作用。2、属性选择符
在之前我们学过的所有选择符的基础上，其实还有一种属性选择符，IE不支持，FF支持。
属性选择符是这样的：
假设存在结构 <span class=left>文字部分…</span>
我们可能会这样定义css： span.left {color:blue} 表示class为left的span元素满足该样式
在FF中我们可以写成：span[class=left] {color:blue} 这种写法就是属性选择符
那么这个怎么用呢，看下面的代码：
#content{ color:red}
[xmlns] #content{ color:blue}
在IE中content为红色，火狐中为蓝色 [xmlns]是顶级的属性选择符（html的属性）
所以一旦要对FF单独处理，就前面加上 [xmlns]，更多的时候我们是需要对IE进行单独处理，因为FF对css支持比较好。3、+ hack
+号属性只能在IE下使用，FF不支持
如：#content{
Width:500px;
+width:480px;
}
IE中宽度为480px，而FF中则为500px
值得说明的是：除非真的很需要，不要随意使用css hack，会增加css复杂度八、IE条件注释功能条件注释针对的是 html 代码，而不是css，这一点首先要注意。
其次，只有IE支持条件注释功能条件注释功能很强大，有2点体现：1、可以进行true或false的条件判断
<!--[if IE]>只有IE可见，FF不可见<![endif]-->
<!--[if IE 6.0]>只有IE6可见，FF不可见<![endif]-->
<!--[if IE 7.0]>只有IE7可见，FF不可见<![endif]-->2、可加上修饰词
lt 表示当前条件的版本之下 less than
gt 表示当前条件的版本之下 gather than
<!--[if gt IE 5]>只有IE5以上版本可见，FF不可见<![endif]-->IE条件注释功能小巧实用，很多地方用得上。
[/post]