htnl之CSS的使用讲解
一、CSS的基本概念
CSS是英语Cascading Style Sheets的缩写，译作层叠样式表或者级联样式表，它是一种用来（增强）控制HTML或 XML 等文件网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
二、CSS的基本语法
CSS样式表-参数说明
Selector -- 选择符
property : value -- 样式表定义。属性和属性值之间用冒号（：）隔开。定义之间用分号（；）隔开
继承的值 (The ' Inherit ' Value)
每个属性都有一个指定的值：Inherit。它的意思是：将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。
css 样式表的命名
div+css样式表的id和class的区别：就一句来概括，class可以定义多个值并且可以应用到多个标签上，但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则，请大家参考一下：
首先讲一下div+css样式表的id的常用命名规则
页头：header 登录条：loginBar 标志：logo 侧栏：sideBar 广告：banner导航：nav 子导航：subNav菜单：menu 子菜单：subMenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab 文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service热点：hot新闻：news下载：download注册：regsiter状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendLink页脚：footer版权：copyRight
实际上上面的div+css样式表的id命名也会经常用大小写和_来区分，比如主导航就是MainNav，如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名，比如写一个红色字体的class，可以.f_red {}(f是font 字体的缩写）。总之原则是：大小写、_、缩写，大大增强代码的可读性。
再讲一下div+css样式表的class的常用命名规则
外套：wrap 主导航：mainNav 子导航：subnav 页 脚：footer整个页面：content页 眉：header 页 脚：footer 商 标：label 标 题：title 主导航：mainNav（globalNav）边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar 旗 志：logo 标 语：banner菜单内容：menu1Content 菜单容量：menuContainer 子菜单：submenu 边导航图标：sidebarIcon 注释：note 面包屑：breadCrumb（即页面所处位置导航提示） 容器：container内容：content搜索：search 登陆：login 功能区：shop（如购物车，收银台） 当前的：current
当然像div+css样式表的id和class的命名远远不止这些，可能还会有更多的命名，你可以用一些通俗的易懂.容易理解的一些来命名。
CSS 语法由三部分构成：选择器、属性和值
selector {property: value}
选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性(property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
body {color: blue}
上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。
值的不同写法和单位
除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
记得写引号
提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
多重声明
提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时， 会尽可能的减少出错的可能性。就像这样：
p {text-align:center; color:red;}
你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p {
text-align: center;
color: black;
font-family: arial;
}
空格和大小写敏感
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h2,h3,h5,h6 {
color: green;
}
继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：
body {
font-family: Verdana, sans-serif;
}
根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？
友善地对待Netscape 4
幸运地是，你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来
处理旧式浏览器无法理解继承的问题。
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。
继承是一个诅咒吗
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
p {
font-family: Times, "Times New Roman", serif;
}
三、跨浏览器的CSS用法
12.3 各版本浏览器 HACK
【CSS hack由于不同的浏览器， 比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。】
区别各版本浏览器的样式方法，注意样式定义顺序。
<style>
.test{ border:10px solid #f00;
*border:10px solid #f00;
_border:10px solid #f00;
border /**/:10px solid #f00;
}
<div class="test">FF(opera,safari);IE7;IE6;IE5.5</div>
12.4 常见浏览器兼容问题及解决办法
12.4.1 浏览器兼容的一般写法
当需要解决浏览器兼容问题时，一般采用下面写法可以解决，如 margin 问题:
.test{margin:8px;*margin:9px;_margin:10px}
说明：
margin:8px：正常语法，所有浏览器都能够正常解析
*margin:9px：针对 IE7.0 特殊写法，只针对 IE7.0 以上的浏览器有效
_margin:10px ：针对 IE6.0 的特殊写法，只针对 IE6.0 以上浏览器有效
12.4.2 样式盒宽度不同
由于IE 浏览器版本的不同，对样式盒解释上宽度也不同。
问题浏览器： IE5.5
定义一个基础层：div.content{ border:20px; padding: 30px; width : 300px;}
标准情况下，这个盒的宽度是:20+30+300+30+20=400px。但是在 IE5.5 浏览器中，对盒模型的宽度解释有个 bug，它认为 300 px 是整个盒的总宽度，内容的宽度变成：300-20-30-20-30=200px。
解决办法：
1、 !important 空格注释的组合
div. content { border:20px; padding: 30px; width:300px; width /**/: 400px;}
width:300px !important;
这个是正确的 width，支持!important 标记的浏览器使用这里的数值，IE6.0 虽然不支持优先级的方法，但可以正确执行这句代码。
width(空格)/**/:400px;
IE6 以上的浏览器不解析这句，所以仍然认为width 的值是 300px；而 IE5.5 读到这句，新的数值(400px)覆盖掉了旧的，因为!important 标记对 IE5.X 不起作用。
注意：IE7.0 支持了!important 方法和 width(空格)/**/:400px;写方法，但由于优先级的原因，IE7.0 执行了 width:300px !important;。
12.4.3 Firefox 浮动层背景图不能自动平铺
嵌套 DIV，当子 div 为浮动(float)时，父 div 的高度在 Firefox 不能根据子 DIV 自动变化
问题浏览器：Firefox、Opera
如下：
<div id="parent"> <div id="content"> </div> </div>
当 content 为浮动层时，在 IE 浏览器中 parent 的高度是自动计算的，在 FireFox 和 Opera 浏览器里高度不能自动计算。导致的结果是当父层 div 有背景色和背景图时不能自动平铺。
解决办法：
<div id="parent" class=”clear”>
<div id="content"> </div>
</div>
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
添加样式 clear 清除浮动，这样父 div 就会随子 div 高度自动计算。
12.4.4 FireFox 和 IE 中的 BOX 模型解释不一致
在 Mozilla Firefox 和 IE 中的 BOX 模型解释不一致导致相差 2px
问题浏览器：FireFox、IE
解决办法：
div{margin:30px!important;margin:28px;}
!important 优先级，Firefox 优先执行 margin:30px，而 IE 执行 margin:28px
12.4.5 IE 6.0 双倍浮动边界 Bug
当一个盒元素浮动且相同方向上有 margin 值时，margin 值为两倍。
问题浏览器：IE
描述如下：
div {float: left;margin-left: 100px;}
浮动元素相同浮动方向上的边界是所设置值的两倍。
解决办法：
div {float:left;margin-left:100px;display:inline}
为浮动元素设置 display: inline;
注意：根据 W3C 的建议，除非值是 none，否则不应该在浮动元素上使用 display。
12.4.6 Margin-top 与 Padding-top 问题
同一方向上嵌套盒元素，Margin-top 与 Padding-top 下会相加。
问题浏览器：IE5.X、IE6.0
描述如下：
<div style="width:500px;padding-top:20px;">
<div style="width:150px;margin-top:30px;">内容</div>
</div>
一个有 padding 的盒子内嵌套一个有 margin 的盒子，外围盒子的 padding-top 和里面盒子的 margin-top 不会相加。
解决办法：
<div style="border:1px solid #f00;width:500px;padding-top:20px;"><div style="border:1px solid blue;width:150px;margin-top:30px!important;margin-top:50px"> 内容</div>
Firefox、Opera 和 IE7.0 没有这个问题，通过!important 优先级控制 margin-top，margin-top:50px IE5.X、IE6.0 解析这句。
12.4.7 ul 标签在 Mozilla 与 IE 浏览器默认值的区别
ul 标签在 FireFox 与 IE 浏览器默认值的区别
描述如下：ul 标签在 FireFox 中默认是有 padding 值的,而在 IE 中只有 margin 有值所以先定义
解决办法：ul{margin:0;padding:0;}定义基础 ul 值。
12.4.8 div 标签居中问题
div 标签居中在 FireFox 与 IE 下不同。
描述如下：text-align:center;在 IE 下内容可以居中而 firefox 下内容居左
解决办法：
<div style="width:500px;text-align:center;margin:0px auto;">
<div style="width:150px;"> 内容</div>
</div>
添加样式 text-align:center;margin:0px auto;在 IE 和 Firefox 下解决问题。
12.4.9 img 对象 alt 和 title 的解析
img 对象 alt 和 title 的解析在 IE 和 FireFox 下是不同的。
描述如下：
alt：当照片不存在或者 load 错误时的提示；
title：照片的tip 说明；
在 IE 中如果没有定义title，alt 也可以作为 img 的tip 使用，但是在 Firefox 中，两者完全按照标准中的定义使用；
解决办法：
定义 img 对象时，最后将 alt 和 title 对象都写全，在各种浏览器中都能正常使用。
12.4.10 显示游标手指
显示游标手指的样式在 IE 和 FireFox 下是不同的。
描述如下：cursor:hand 仅在 IE 下可以显示游标手指状，但在 FireFox 下不能。
解决办法：
cursor: pointer 可以同时在 IE 和 Firefox 中显示游标手指状， hand 仅 IE 可以
18.3 span 右浮动
span 标签在跟随文字链使用时，当具有右浮动属性时，会产生折行现象，需要使用 margin‐top 使折行的文字跟列表文字对齐。
18.4 em 前缀
em 带有强调的意思，而且是斜体文字，所以用到的时候要给他定义成普通体文字。
em{font‐style:normal;}
四、注意事项
在实际工作中，我们编写代码，往往在CSS文档的最前部，首先定义：
*{margin: 0; padding: 0; border: 0;}
这些代码的真正用意在于，在缺省定义的情况下，所有元素的margin、padding、border的值都为零。当需要应用不同的样式的时候，再单独的对某元素进行定义即可。也就是整个网页的样式预设、整体布局声明。而需要指定为其它样式的部份设定在个别元素里即可达到效果。
CSS的一个主要特征就是继承，它是依赖于祖先—后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。
首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的，标准就是如此。举个例子来说：border属性，大家都明白border属性的作用是设置元素的边框的，它就没有继承性。如果继承了边框属性，那么文档看起来就会很奇怪。例如我们定义容器div的边框为1px，而在此容器内的ul li在正常情况下我们都不希望它有边框，如果border有继承性，我们就要再去掉它们的边框。这样显然是不合理的。多数边框类的属性，如：Border（边框）、Padding（补白）、Margin（边界）、背景等等，都是没有继承性的。
在某些时候继承也会带来一些错误，比如说下面这条CSS定义：
Body{color:blue}
这是定义了Body中的文本颜色为蓝色。如果Body中含有表格，在有些浏览器中这句定义会使除表格之外的文本变成蓝色，而表格内部的文本颜色并不是蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成这样：
Body,table,th,td{color:blue}
这样表格内的文字也会变成蓝色了。
五、代码书写规范
17.1 注释
17.1.1 HTML 注释
正确的注释规范：<!‐‐这里是注释‐‐>感叹号后面 2 个横线，结束时 2 个横线；
不要在注释内容中使“‐‐”
“‐‐”只能发生在XHTML 注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是错误的:
<!‐‐这里是注释‐‐‐‐‐‐‐‐‐‐‐这里是注释‐‐>
<!‐‐‐‐‐‐‐‐‐‐‐这里是注释‐‐‐‐‐‐‐‐‐‐‐这里是注释‐‐‐‐‐‐‐‐‐‐‐>
用等号或者空格替换内部的虚线,这样是正确的：
<!‐‐这里是注释============这里是注释‐‐>
17.1.2 CSS 样式注释
由于CSS+DIV 制作页面，样式代码多，布局比较复杂，更便于页面后期的维护，更改，所以有必要在样式上加上注
释。注释规则如下：
1.注释规范
/*这里是注释*/
例如：. news {…}/* 这里是高度自动撑 */
17.2 缩进
根据页面代码结构进行包含缩进，这样代码层次结构清晰；
17.3 回行
同级间结构或碎片代码块之间添加换行
=======================================================================
css 层叠样式表
引入层叠样式表的方法包括：
1，外联式样式表
2，内嵌样式表
3，元素内定
4，导入样式表
外联式样式表
例：<head>
<link rel="stylesheet" href="/css/default.css">
</head>
<body>
....
</body>
</html>
属性：rel 用来说明<link>；元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址
内嵌式样式表：
例：<html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素内定
格式：
导入式样式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
大方向的优先级：
1.内联最优先
2.内部样式次之
3.外部样式
原则一 - 继承不如指定。
原则二 - #ID > .class > 标签选择符。
原则三 - 越具体越强大。
原则四 - 标签#id >#id ; 标签.class > .class。
原则五 - 原则一 > 原则二 > 原则三 > 原则四。