1.若有疑问立即检测。

在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用。请注重，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令。

浮动是个危险的功能，未必会产生所期望的结果。假如碰到浮动元素延伸到外围容器的边框或者其他不正常情况，先确定的做法是正确的。

3.边界重合时利用padding或border来避免。

可能会为了一点不应该出现的空间而焦头烂额，或者需要一点点空间时，怎样都挤不出来。假如有用到margin，那么很轻易产生边界的重合。

4.DIV CSS网站布局时尝试避免同时对元素指定padding/border以及高度或宽度。

Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但假如母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。

5.DIV CSS网站布局时不要依靠min-width/min-height。

Windows版IE并不支援两种语法。但是在某种程度下，windows版IE可以达到相当于min-width/min-height的效果，所以只要对IE做点过滤功能，即可达到想要的结果。

6.若有疑问，先减少百分比。

有时候某些错误会使50%50%成为100.1%，使网页出现问题。这时请尝试将这些值改为49%，甚至49.9%。

7.记住“TRBL”写法。

DIV CSS网站布局中border，margin与padding的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left.所以margin:01px3px5px的结果是上方无边界，右边1像素，以此类推。记住“TRBL”，就不会弄错次序了。

8.只要不是零的值，都要指定单位。

CSS需要对每个font，margin等各种值指定单位。

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提及DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

“DIV+CSS”其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。

方法

css是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

在HTML文档中加入CSS

样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。

发展

1、样式定义放在一个单独的文件中，例：新建一个后辍为CSS的样式定义。

元素{ 属性color:值red；} 在head段使用<link>标记，

引用语法：<link rel=”stylesheet” type=”text/css” href=”样式表URL” />

2、嵌入式样式表：

<style>元素段必须出现在head段内，有一个开始和结束标记，并且可以有多个<style>段

语法格式： <style type=”text/css”>

…样式定义…

2样式编辑

3、在嵌入式样式表中我们可以使用@import导入一个外部样式表，例：

<style type=”text/css”>

@import url(外部样式表位置)；

…其它嵌入式的样式定义…

</style>

4、内联样式表：

写在开始标记里面，比如你要H1变红色，

<h1 style=”color:red”>变为红色</h1>

总结： 三种样式表优先使用外部样式表、嵌入式样式表用来调试用的、一般不使用内联样式表。

5、样式规则。

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略,,声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束，每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。

选择器

声明块

选择一个元素

声明{ }

属性 : 值

冒号开始分号结束

6、注释：有关的详细内容在中有详细的解释。

7、选择器分组

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4 { color red}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

例：路径不全： #maincontent p, ul{ border-top:1pxsolid #ddd}

正确写法：#maincontent p, #maincontent ul{ border-top:1pxsolid #ddd}

例：结尾多了一个逗号： .a1 p, .a1 ul,{color:red}

8、选择器

元素选择器：语法格式： 元素{color: blue}

类选择器： 语法格式： .类名{属性: 值}

ID选择器：#id名 {属性 : 值；} ID名不能重复

通配符选择器：语法格式：*{属性:值}

伪类选择器：

伪类选择器可以以不同方式格式化超级链接<a>元素的四种不同状态：以下顺序依次写；（记忆方法：a Love or Hate）

a:link 是用在未访问的链接的选择器

a:visited 是用在已访问过的链接的选择器

a:hover 是用在鼠标光标放在其上的链接的选择器

a:active 是用在获得焦点（比如，被点击）的链接的选择器

如果需要，我们可以组合这几个状态，按顺序写：

a:link，a:visited { color :blue}

a:hover ，a:active { color :blue}

9、伪元素选择器

标准的选择器不能格式化一个元素内容的第一个字母或者第一行，而伪元素选择器能实现：

所有浏览器支持的有两种： ：first-line和 ：first-letter

例：段落的第一行：p：first-line {属性：值；}

例：段落的第一个字母：p：first-letter {属性：值；}

3优先级编辑

介绍

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

优先说明

内联样式(inline style) >ID选择符 >类选择符(class), 伪类(pseudo-class)和属*(attribute)选择符 >类别(type)，伪对象(pseudo-element)

一,解释：

*内联样式(inline style)：元素的style属*，比如 <div style="color:red"></div>,其中的color:red就是内联样式

*ID选择符：元素的id属*，比如 <div id="content"></div>可以用ID选择符#content

*类选择符：比如<div class="box"></div>，可以使用类选择符 .box

*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.

*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素

*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素

*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。

多重CSS样式定义，属性追加重复最后优先原则

一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：

我们先定义两个样式

.one{width:200pxbackground:url(images/imgA.jpg) no-repeat left top}

.two{border:10px solid #000background:url(images/imgB.jpg) no-repeat left top}

在页面代码中，我们可以这样调用:<div class="one two"></div>

这样最终的显示效果是这个div样式是什么呢？？重复的是以哪一个为准呢？？

<div class="one two"></div>应用到的样式如下：

width:200px

border:10px solid #000

background:url(images/imgB.jpg) no-repeat left top

因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则

就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

二、CSS的调用

页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样：

<style type="text/css"><!-- body { background : white color : black } --></style>

外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

<link href="css/style.css" type="text/css" rel="stylesheet"/>

"@import"命令方法：类以下代码, <style type="text/css" media="all">@import url( css/style01.css )</style>

本人推荐使用第二种调用方法（外部调用法）

[1]

优先规则

既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1、统计选择符中的ID属性个数。

2、统计选择符中的CLASS属性个数。

3、统计选择符中的HTML标记名个数。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

例如：

1、每个ID选择符(#someid)，加 0,1,0,0。

2、每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。

3、每个元素或伪元素(:firstchild)等，加0,0,0,1。

4、其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。[1]

4使用误区编辑

1、DIV+CSS的合理之处在于可以进行网页的统一设计管理，通过一个样式表，牵一发而动全身，只要修改样式表，就可以统一全站的[2]风格，如果为一个页面单独做一个样式表，或者一个div就做一个样式表，没有全局设计观念，那么这个div+CSS的设计方式就完全没有必要，甚至成了累赘

2、像Table一样用DIV+CSS，无穷尽的嵌套，其效果与Table设计没有两样，并不会带来搜索引擎的优化效果，反而会增加页面的负担

3、推崇Div+CSS，却不考虑兼容性，TABLE设计由来已久，得到浏览器的广泛支持，所以显示效果很好，不会出现错位情况，但是DIV+CSS却在 部分浏览器中会发生页面错位的情况，因此在进行设计的时候也要考虑到不同浏览器的情况，进行更改和调试。

5作用编辑

SEO

1、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处

2、提高访问速度、增加用户体验性

使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。

3、div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。注意：div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。

例:

#con{width:400px

margin:0

auto}

这是给外层的div加样式,,,,和#son没关系

查看原帖>>