原文：http://www.fx114.net/qa-266-93710.aspx
01.什么是CSS.
CSS指层叠样式表(Cascading Style Sheets).
·样式定义如何显示HTML元素
·样式通常存储在样式表中
·把样式添加到HTML中，是为了解决内容与表现分离的问题
·外部样式表可以极大提高工作效率
·外部样式表通常存储在 CSS 文件中
·多个样式定义可层叠为一
学习CSS需要具备的基础知识: HTML,XHTML
样式解决了一个普遍的问题:
·HTML标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
·由于两种主要的浏览器(Netscape和Internet Explorer)不断地将新的HTML标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
·为了解决这个问题，万维网联盟(W3C,World Wide Web Consortium)这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式(Style)。
·所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率:
·样式表定义如何显示 HTML 元素，就像HTML3.2的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
·由于允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。作为网站开发者，你能够为每个HTML元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
CSS可以作为HTML,XHTML,XML的样式控制语言.
02.Web标准
Web标准是一系列技术标准，在使用时是组合使用.
Web标准的构成: 结构(Structure)、表现(Presentation)和行为(Behavior).
·结构标准对应的主要语言: XHTML
·表现标准对应的主要语言: CSS
·行为标准对应的主要语言: JavaScript
使用Web标准的好处是将内容与样式分开，制作一个静态页面，主要用到的就是XHTML与CSS.
内容、结构、表现和行为:
·内容: 就是制作者放在页面内真正想要让访问者浏览的信息.
·结构: 使内容更加具有逻辑性和易用性(类似于1级2级标题、正文、列表等把它们称为结构).
·表现: 用于修饰内容的外观的样式的东西称为表现.
·行为: 对内容的交互及操作效果，如通过javascript判断表单提交等.
网页开发测试用到的一个小工具--火狐浏览器的附加组件firebug插件: 可以对任何网页的CSS,HTML和JavaScript进行实时编辑、调试和监控.
Web前端开发，需要兼容的浏览器: IE6/7/8/9浏览器，火狐浏览器、谷歌浏览器，苹果浏览器.
03.CSS的语法结构
语法: 选择符{属性:值; 属性:值; ...;}
例如: body{font-size:12px;}
参数说明:
·选择符(Selector): 指明这组样式所要针对的对象，可以是一个XHTML标签，如body,h1，也可以是定义了特定的id或class的标签，如#main选择符表示选择<div id="main">，即一个被指定了main为id的对象.
·属性(property): 选择符的样式属性，如颜色、大小、定位、浮动方式等.
·值(value): 是指属性的值.
·同时可以为一个选择符定义多个属性，每个属性之间用分号(;)隔开.
CSS的例子:
<style type="text/css">
body{font-size:12px;color:red;}
h1{font-size:12px;color:blue;}
span{font-size:2em;color:green;}
</style>
CSS定义的技巧
·为了将来的css代码优化，建议所有的属性值后面加分号(;).
·某些xhtml标签，有自己默认的css属性值.例如h1标签自动就是加粗显示、字号比较大.
·为了兼容主流浏览器，建议在设置时，将所有元素的css属性重置为标准的.
·不同的浏览器，有各自不同的css属性值，兼容性.
·对于比较特殊的字体，可以转为图片.
04.几种选择符(选择器)的写法
(1)标签选择器: 样式所要针对的对象是一个标签 h1{color:green;}
(2)选择器分组: 将同样的样式定义用于多个选择符(集体控制)，选择符之间用逗号分隔.
h1,h2,h3,h4,h5,h6{color:green;}
(3)派生选择器: 也可以叫嵌套选择器，包含选择器
CSS: li strong{font-style: italic;}
XHTML: <li><strong>文字</strong></li>
(4)id选择器: 如果使用程序控制网页中的某些内容，为了便于区分，给内容加一个唯一的标识符号id
CSS: #red{color:red;}
XHTML: <p id="red">文字</p>
(5)类选择器: 为class="类名"的元素加一个样式，就是加一个类
CSS: .center{text-align:center;}
XHTML: <h1 class="center">文字</h1>
(6)标签指定式选择器: 既使用id或class，也同时使用标签选择符.
CSS: h1.p1{color: #f60;} //针对所有class为p1的h1标签
h1#content{color: #f60;} //针对所有id为content的h1标签
XHTML: <h1 class="p1">
<h1 id="content">
同一个元素，应用多个类，类名与类名之间用空格分隔
<p class="al a2">
(7)组合选择符: 将以上选择符组合使用
h1.p1,#content h1{}
(8)选择所有元素: 星号(*) (作用范围很广，但效率最低)
选择符就是你将定义的样式用给谁
05.CSS在网页中的应用方式
网页中加CSS的方式有四种:
(1)内联样式表: 在HTML元素内部，直接写在现有的标记中，应用于一个标签.
如: <p style="color:red"></p>
(2)嵌入式样式表(内部样式表): 使用<style></style>标签嵌入到HTML文件的头部<head>标签内，应用于一类标签.
<style type="text/css">
<!--
body{background:white;color:block;}
-->
</style>
说明: <!-- -->用于当浏览器不支持样式表时，不会将样式表内容显示出来.
(3)外部链接式样式表: 将样式表写在一个独立的.css文件中，然后在页面<head>标记内用<link>标签调用它，主要用于实现表现与结构分离.
如: <link href="main.css" rel="stylesheet" type="text/css" />
推荐使用外部链接式.
(4)导入式样式表: 与链接式样式表的功能基本相同，也是将样式写到一个文件中，再导入到网页中，只是语法和动作方式上略有不同，同样也将导入样式代码写在<head>标记内.
<style type="text/css">
@import url("basic.css")
</style>
其实导入式与内嵌式是相类似的，都是将样式加入到网页里.
·导入式会占用html文件空间.
·有些浏览器解析会有问题，浏览器会最后读取@import中的内容.
·可以将多个样式文件，导入到一个样式文件中.
06.CSS的特性
(1)继承: 网页中子元素，将继承父元素的样式.
例如: 要控制段落p中的文字大小，可以直接给body标记加样式.
(2)层叠: 网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式.
后面定义的样式，会覆盖前面定义的样式.
07.CSS样式的优先权
多重样式将层叠为一个:
·样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
层叠次序:
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于<head>标签内部)
4.内联样式(在HTML元素内部)
因此，内联样式(在 HTML元素内部)拥有最高的优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明(缺省值)。
CSS优先权:
就近原则，作用范围越小，优先权越高，离要修饰目标越近的样式优先权越高.
行内>id>class>标签选择符
特殊情况，可以采用!important语法来提升优先权(IE6不支持):
p{}
08.CSS长度单位
相对长度单位:
·em 相对与当前对象内文本的字体尺寸
·px 像素(pixel)，推荐使用
绝对长度单位: 基本上用不到
·in 英寸
·cm 厘米
·mm 毫米
·pt 点(Point)
09.CSS控制字体
设置字号: font-size:12px
设置颜色: color:#00000
设置字体: font-family:Arial,"宋体"
设置行高: line-height:150% line-height:1.5em
设置字体的粗细: font-weight:normal(正常) bold(粗体)
设置字体样式: font-style:nomal(正常) italic(斜体)
修饰文字: text-decoration:none(正常) underline(下划线) overline(上划线) line-through(删除线)
字符间距: letter-spacing:normal(默认) length(长度单位)
单词间距: word-spacing:normal(默认) length(长度单位)
10.CSS控制文本
设置对象中文本缩进: text-indent:2em 可以为负值
文本水平对齐方式: text-align:left(左) center(中) right(右)
对象中空白处理: white-space:normal(自动换行) pre(换行和空白受保护) nowrap(强制在同一行显示)
文本大小写控制: text-transform:none(正常大小) capitalize(每个单词的第一个字母转换成大写)
uppercase(转换成大写) lowercase(转换成小写)
元素的垂直对齐方式: vertical-align:sub(设置文字为下标) super(设置文字为上标)
top(把元素的顶端与行中最高元素的顶端对齐)
text-bottom(把元素的底端与父元素字体的底端对齐)
11.CSS控制链接--CSS伪类
CSS伪类用于向某些选择器添加特殊的效果.
伪类语法:
选择符:伪类名称{属性:值}
未访问的链接: a:link{color:#FF0000}
已访问的链接: a:visited{color:#00FF00}
鼠标移动到链接上: a:hover{color:#FF00FF}
鼠标按下链接: a:active{color:#0000FF}
自定义链接的CSS类
a.类名称:状态
:focus设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式(IE6/7不支持)
12.CSS选择符命名
规范的命名也是Web标准中的重要一项，标准的命名可以使代码更加易读，而且利于搜索引擎搜索，提高团队合作工作效率，因此需要规范化命名(语义化命名)
·一种是除第一个单词首字母小写外，其余所有单词首字母都大写.
·一种是所有单词首字母都大写
·一种是单词之间用下划线隔开.
原则是要容易理解，便于协同工作.
13.页面模块的常用CSS命名
头: header 热点: hot
内容: content 新闻: news
尾: footer 下载: download
导航: nav 广告: banner
侧栏: sidebar 页面主体: main
栏目: column 子导航: subnav
页面外围控制整体布局宽度: wrapper 菜单: menu
左右中: left right center 子菜单: submenu
登录条: loginbar 版权: copyright
标志: logo 友情链接: friendlinks
14.CSS盒子模型
以物品和包装盒的构成为例，讲述页面构成的名词:
content 盒子中物品(内容)
border 盒子的厚度(边框)
padding 盒子填充泡沫的厚度(边框与内容之间的距离，内边距)
margin 多个盒子存在，盒子与盒子之间的距离(外边距，边界)
W3C组织建议:
·把所有网页上的对象都放在一个盒(box)中--盒子模型
·设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层<div>.
·盒子模型主要定义四个区域: 内容(content)、填充(padding)、边框(border)和边界(margin)。
·这里的边界也称为: 外边距、外补丁; 填充也叫: 内边距、内补丁.
·以宽度为例，整个盒子模型在页面中所占的宽度=左边界+左边框+左填充+内容+右填充+右边框+右边界.
盒子模型的立体层次(从底层到上层):
margin background-color background-image padding content border
15.CSS盒子模型相关属性
设置元素的宽度: 100px
设置元素的高度: height:100px
设置元素的某一个方向外边距: margin-top/right/bottom/left:10px;
参数个数不同设置外边距: margin:10px; (上下左右四个方向)
margin:10px 10px; (上下 左右)
margin:10px 10px 10px; (上 左右 下)
margin:10px 10px 10px 10px; (上 右 下 左)
设置元素某一个方向的内填充: padding-top/right/bottom/left:10px;
参数个数不同设置内填充: padding:10px; (上下左右四个方向)
padding:10px 10px; (上下 左右)
padding:10px 10px 10px; (上 左右 下)
padding:10px 10px 10px 10px;(上 右 下 左)
设置边框粗细: border-top-12px;
设置边框样式: border-top-style:solid(实线)、dashed(虚线)
设置边框颜色: border-top-color:#000000;
设置某一边框属性的简捷方式: border-边框位置:线宽 线型 颜色;
设置某一元素四条边框属性: border:线宽 线型 颜色; (仅限四条边框属性完全相同)
注意:
·在定义盒子的宽度时，要考虑到内填充、边框、边界的存在
·如果增加了内填充，整个盒子宽度值，要再减去你增加的内填充值
·在使用外边距时要注意浏览器的兼容性.
·由于各浏览器存在内外边距的默认值，并且默认值不同，需要在CSS将所有的内外边距都置零.
·虽然CSS的属性有继承性，但并不是所有属性都继承.
·CSS布局主要是通过盒子模型来实现--W3C将网页内容，放置在一些盒子中，对盒子的一些属性进行修改.
DIV元素是用来为HTML文档内大块（block-level的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
16.边框的CSS语法与属性:
border:border-width border-style border-color
如果只写border，则后面要跟着的是三个不同的子属性: 粗细 样式 颜色
例如: border:2px solid blue;
17.列表的CSS语法与属性:
list-style:list-style-image list-style-position list-style-type
列表的样式:列表的图片 列表符号位置 列表的样式
列表存在兼容性问题，推荐使用none.
list-style:none;
18.CSS小技巧
(1)CSS第一步将默认元素归零，避免兼容性问题
(2)让盒子水平居中: 将对象的左右外边界设置为auto
margin:30px auto 0;
(3)让盒子中的内容垂直居中: 设置行高=盒子的高度，但是不要换行.
(4)在调试的时候，可以适当加背景颜色
19.CSS对HTML元素的分类(块状元素和内联元素)
我们在布局页面的时候，会将HTML标签(元素)分成两种: 块状元素和内联元素，我们平时用到的标签div和p就是块状元素，链接标签a就是内联元素。
可以通过CSS修改元素的类型.
(1)块状元素: {display:block}
块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行(独占一行)，宽度(width)和高度(height)起作用.
常见的块状元素为: div、p、body、h1~h6
ul与li默认情况下是块元素.
(2)内联元素: {display:inline}
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)和高度(height)不起作用。
常见的内联元素为: a、em、span等.
20.CSS控制背景
背景的语法:
background:background-color background-image background-repeat background-attachment background-position
背景:颜色 图片 平铺方式 固定方式 位置
背景颜色
背景图像 background-image:url(背景图像的位置及全称);
背景图像的重复方式 background-repeat:repeat(no-repeat、repeat-x、repeat-y)
背景图像的位置 background-position:垂直方向 水平方向
background-position:top left(center right)
center left(center right)
bottom left(center right)
background-position:x坐标(水平位置) y坐标(垂直位置)
背景图像的依附方式 background-attachment:scroll(fixed)
说明:
·背景图片，默认情况下是进行水平与垂直方向上的平铺.
·默认背景图片，在元素的左上角显示.
·背景图片的依附方式: 固定的含义是，将图片固定在屏幕(可视区域)的某个区域.
·对于background-attachment:fixed; IE6兼容性问题，只有html与body两个元素支持这个属性值.
21.CSS精灵(Sprites)--制作翻转按钮效果
制作翻转按钮效果的两种方法:
(1)需要两张图片，一张正常状态的图片，一张鼠标经过的图片.
做这种按钮的思路就是: 设置链接a的背景为第一张图片，使用伪类a:hover的背景为第二张图片.
CSS: a{88px; height:44px; background:url(images/link.gif); display:block;}
a:hover{background:url(images/hover.gif);}
HTML: <a href="#"></a>
(2)精灵技巧，将上面两张图片合并成一张图片.
设置图片为按钮的背景，然后将a:hover的背景向上移动响应的像素即可.
CSS: #btn{88px; height:44px; background:url(images/button.gif); display:block;}
#btn:hover{background-position:0 -44px;}
HTML: <a href="#" id="btn"></a>
说明: CSS精灵技巧，主要是为了减少http请求.
22.CSS布局方式
CSS的三种布局方式:
·默认文档流方式: 以默认的html元素的结构顺序显示
·浮动布局方式: 通过设置html元素的float属性显示
·定位布局方式: 通过设置html元素的position属性显示
浮动(float)布局:
包括div在内的任何元素都可以以浮动的方式进行显示，浮动是将块元素的独占一行的行为取消，允许别人和它在同一行，其实是这个块从原来的文档流模式分离出来，它后面的对象就视为它不存在(不在一个立体层次，浮动的块上浮一个层次，但还在父元素内，不同的块元素可能不同).
float:none(left/right)
·none: 不浮动
·left: 对象向左浮动，而后面的内容流向对象的右侧
·right:对象向右浮动，而后面的内容流向对象的左侧
说明:
·常用的布局效果，有一行并列式，在一行中显示几个块元素.
·ul与li默认情况下是块元素，要想让他们在一行中显示，就要用到浮动.
·在IE6中，子元素的高度超过了父元素的高度，会把父元素的高度自动增加.
·如果想让多个块显示在同一行中，可以将这些块都设置为浮动，并且浮动的方向相同.
·浮动，先浮后动，浮动的对象会先漂浮起来，离开原来的位置，后动就是它后面的对象会向它原来的位置上动起来.
清除浮动:
当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过在后面的元素中加清除浮动的方法来解决浮动元素的影响.
clear:none(left/right/both)
·none: 默认值，允许两边都可以有浮动对象.
·left: 不允许左边有浮动对象
·right: 不允许右边有浮动对象
·both: 左右两侧不允许有浮动对象
当父元素没有指定高度时，并且它的子元素有浮动，这时，这个父元素的高度不会自动增加.
这种情况清除浮动的方法:
(1)额外标签法:
这种方法应该说是最简单的一种，W3C建议在容器的末尾增加一个"clear:both"的元素，强迫容器适应它的高度以便装下所有的float元素.
CSS: .clear{clear:both;}
HTML: <div id="main">
<div id="left">左盒子</div>
<div id="right">右盒子</div>
<div class="clear"></div> (增加一个空div)
</div>
<div id="footer">底部</div>
确定会增加代码
(2)父元素使用overflow的方法
CSS中溢出的使用
设置当对象的内容超过其指定高度及宽度时如何管理内容.
overflow:visible(auto/hidden/scroll)
·visible: 默认值，不剪切内容也不添加滚动条
·auto: 在必需时对象内容才会被裁切或显示滚动条
·hidden: 不显示超过对象尺寸的内容
·scroll: 总是显示滚动条
通过设置父元素的overflow值设置为hidden，是最简单的清除浮动的方法，但如果子元素使用了定位布局，就会很难实现.
*{margin:0;padding:0;}
#main,#footer{margin:0 auto;}
#main{800px;background:#ccc;overflow:hidden;zoom:1;position:relative;}
#left{200px;height:200px;background:blue;position:absolute;left:-100px;top:100px;}
#right{300px;height:300px;background:green;float:right;}
#footer{800px;height:50px;background:red;}
(3)利用伪对象after方法:
定义一个类，使用伪对象after,控制浮动元素的影响
网上最流行的清除浮动代码:
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:"";
}
.clearFix{zoom:1;} //解决IE6/7兼容问题.
zoom只有IE内核大浏览器支持缩放比例
zoom:normal(number:百分数|无符号浮点实数，实数为1与百分数100%相当于normal)
zoom:1解决IE6高度自适应问题.
定位布局:
可以通过元素的position属性控制元素的位置.
position:static(absolute/relative)
·static: 静态定位，页面中的每一个对象的默认值
·absolute: 绝对定位，将对象从文档流中分离出来，通过设置left,right,top,bottom四个方向相对于父级对象进行绝对定位，如果不存在这样的父对象，则依据body对象.
·relative: 相对定位，对象不从文档流中分离，通过设置left,right,top,bottom四个方向相对于自身位置进行相对定位.
#right{position:absolute;top:100px;left:100px;)
注意: 当我们要想使用绝对定位时: 必须要有两个条件
·必须给父元素加定位属性，一般建议使用相对定位position:relative.
·给子元素加绝对定位position:absolute;同时要加方向属性.
相对定位与绝对定位
·绝对定位是父元素为基准点进行定位. --会脱离文档流.
·相对定位是根据其自身为基准点进行定位. --离开原位置，但还占着原来的空间.