第一页
http://www.w3school.com.cn/css/index.asp
css教程
通过使用css来提升工作效率！
在我们的css教程当中，您会学到如何使用css同时控制多重网页的样式和布局。
现在开始学CSS!–>http://www.w3school.com.cn/css/css_jianjie.asp css简介
这个网页的第二个部分就是CSS实例
学习70个实例，您可以对css代码进行编辑，然后单击测试按钮来查看结果的。
亲自试一下吧。http://www.w3school.com.cn/example/csse_examples.asp
这个网页的第三个部分就是css测验
在w3school当中测试您的css技能！
开始css测验吧。
css参考手册
在w3school当中，我们提供了完整的css参考手册（已经升级为css3了）。
css参考手册
http://www.w3school.com.cn/cssref/index.asp
第二页
CSS简单介绍一下
在继续学习之前，你需要对下面的知识要有基本的了解的：
第一个就是html
第二个就是xhtml
如果你希望首先学习这些项目就请你马上过去首页，然后去访问这些相关的一些教程的。
css概述
css指的是层叠样式表(cascading style sheets)
样式定义如何显示html元素
样式通常存储在样式表当中的。
你如果把样式添加到html4.0当中呢，是为了解决内容和表现进行分离的问题的。
外部样式表可以极大地提高工作效率的。
外部样式表通常存储在CSS文件当中的。
多一个样式定义可以层叠成一个样式的。
样式就是解决了一个普遍的问题
html标签原本就是设计用于定义文档的内容的。通过使用什么h1,p,table这样的标签，
html的初衷是表达这是标题的，这里是段落的，这里是表格的信息的。
这个时候稳定的布局都是由浏览器来完成的，而且不是用任何的格式化的标签的。
由于有两种主要的浏览器，一个叫做netscape和internet explorer，
这两个浏览器是很坏的，他们不断地将新的html标签和属性（比如字体标签和颜色属性）
添加到html规范当中，这个时候，创建一个文档，如果想要使内容清晰，在有文档表现层的时候
这个想法已经变得越来越困难了。
为了解决这个问题，有个江湖组织叫做万维网联盟的，W3C。这是一个不挣钱的江湖组织，是个标准化的联盟的。
它自己就肩负起来了HTML标准化的使命的，并且在html4.0之外呢，创造了样式，我们叫做style。
所有的主流的浏览器都是支持层叠样式表的。
这个时候产生了两个问题。
第一个html4.0之前，他们的第一个，第二个，第三个版本都是什么玩意。
第二个问题是存在不存在不支撑css的浏览器呢？
样式表是极大地提高了工作效率的。
样式表当中定义了如何显示html元素的，就像是html3.2的字体标签和颜色属性所起到的作用那样的。
样式通常是保存在外部的css文件当中的。通过仅仅编辑一个简单的css文档呢，外部样式表就可以让你有这个能力
同时改变站点中所有页面的布局和外观的。
这个是个“解耦实现批量”的思想。
由于允许同时控制多重页面的样式和布局的，css可以称得上web设计领域的一个突破的。
作为网站开发者呢，你能够为每个html元素定义样式，并且将之应用于你希望的任意多的页面当中。
如果需要进行全局的更新呢，只是需要简单地改变样式，然后从网站当中的所有元素都会自动地更新的。
多重样式将层叠为一个的。
样式表允许以多种方式规定样式信息的。样式可以规定在单个的html元素当中的，在html页面的头元素当中，或者在一个外部的css文件
当中，甚至可以再同一个html文档内部引用多个外部样式表的。
层叠的次序
当同一个html元素被不止一个样式定义的时候，会使用哪个样式呢？
一般而言的话，所有的样式会根据下面的规则层叠于一个新的虚拟样式表当中的，其中的数字4拥有最高的优先的权利的。
第一个最高的就是内联样式表，就是在html的元素的内部的。
第二个就是内部样式表的，就是位于header标签内部的style标签修饰的玩意。
第三个就是外部样式表的，就是你的link标签当中的css文件的地址的。
第四个就是你的浏览器进行格式化显示的时候，缺省时候的设置的。
因此内联样式（在html元素内部）拥有最高的优先权的。
这就是意味着它将优先于一下的样式声明的：
head标签当中的样式声明。
外部样式表中的样式生命的，或者是浏览器当中的样式生命的（缺省值）。
这个时候，我就产生了第三个问题，就是浏览器当中的样式声明，我们能够怎么看到呢，这个是在哪里看这些缺省值呢。
第三页
CSS基础语法
css语法
css规则是由两个主要的部分构成的：第一个叫做选择器，以及一条或者多条声明的。
selector {
declaration1;
declaration2;
……
declarationN;
}
选择器通常是您需要改变样式的html元素的。
每条声明都是由一个属性和一个值组成的。
属性叫做property，是你希望设置的样式的属性style attribute。
每一个属性是都有一个值的。属性和值是用冒号进行分开的。
selector {property:value}
这里需要注意的是什么，在html标签当中的属性，我们是叫做attribute。
在css当中的属性的名称，我们是叫做property的。
下面这行代码当中的作用是将h1元素内的文字颜色定义为红色的。同时字体的大小是设置为14个像素的。
在这个例子当中呢，h1就是选择器的，color和font-size就是属性的，red和14px就是值的。
h1 {color:red;
font-size:14px;
}
值的不同写法和单位
除了英文单词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-aligen: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名称对大小写是敏感的。
第四页
css高级语法
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器具就可以分享相同的声明。
用逗号将需要分组的选择器分开。
在下面的例子当中，我们队所有的标题元素进行了分组。
所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6{
color:green;
}
继承及其问题
根据css，子元素从父元素继承属性。但是它并不总是按照这个方式来工作的。看看下面这条规则：
body {
font-family:Verdana,sans-serif;
}
根据上面这条规则，站点的body元素将使用berdana字体(假如访问者的系统中存在该字体的话)。
通过css继承，子元素将继承最高元素(在本个例子当中是body)所拥有的属性(这些子元素诸如p,td,ul,ol,ul,li,dl,dt和dd)。
不需要另外的规则，所有的body的子元素都应该显示verdana字体。
子元素的子元素也一样的。并且在大部分的现代浏览器当中，也确实是这样的。
但是在以前的历史的长河当中，在那个浏览器大战的血腥的年代当中，这种情况就未必会发生的，按个时候对标准的支持并不是企业的优先选择。
比方说，netscape4就不支持集成，它不仅仅忽略集成，而且也忽略应用于body元素的规则。IEwindows一直到了ie6还存在相关的问题，在表格内的字体样式会被忽略，我们又该如何是好呢？
友善地对待netscape4
幸运的是，你可以通过使用我们称之为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浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的宽带。
但是如果需要对netscape4用户进行支持，就不得不这么做的。
继承是一个诅咒的么？
如果你不希望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派生选择器
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
在CSSI当中，通过这种方式来应用规则的选择器被称之为上下文选择器(contextual selectors)，
这是由于它们依赖于上下文关系来应用或者避免某项规则。
在CSS2当中，他们被命名为派生选择器的，但是无论你是如何称呼他们的，他们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式的。
通过合理地使用派生选择器，我们可以使用html代码变得更加整洁。
比方说，你希望列表当中strong元素变为斜体字的。而不是通常的粗体字的，可以这样定义一个派生选择器的。
li strong {
font-style:italic;
font-weight:normal;
}
请你要馊主意一下的标记为strong的蓝色代码的上下文关系的。
我是粗体字的，不是斜体字，因为我不在列表当中的，所以这个规则对我是不起作用的。
- 我是斜体的，因为strong元素位于li元素当中的
- 我是正常的字体的。
在上面的例子当中，只有li元素中的strong元素的样式为斜体字的，无需为strong元素定义特别的class或者id，代码更加简洁。
再看看下面的css规则：
strong{
color:red;
}
h2 {
color:red;
}
h2 strong {
coor:blue;
}
下面是它施加影响的html：
the strongly emphasized word in this paragraph is strong red
this subhead is alsso red.
the strongly emphasized word in this subhead is blue
相关内容
如果您需要更深入地学习关于派生选择器的知识，请阅读w3school的高级教程中的以下内容：
1、css后代选择器
2、css子元素选择器
3、css相邻兄弟选择器