在W3C网站上看的CSS的教程，然后将要点整理了一下。没有整理完全，本来没有必要整理，因为W3C的教程做的太好了，简单明了，并且排版也好，只是感觉摘抄下来更加方便复习，还有就是巩固一下。
一：
CSS：Cascading Style Sheets:层叠样式表
使用的地方：
1：当个HTML元素中
2：HTML页的头元素中
3：外部的CSS文件
HTML文档内部可以引用多个外部样式表，按照优先规则层叠于一个新的虚拟样式表中
优先规则由高到小为：
1：内联样式（在HTML元素内部）
2：内部样式表（位于<head>标签内部）
3：外部样式表（）
4：浏览器缺省设置
二：CSS语法
1：
CSS规则有两个主要部分构成：选择器，以及一条或多条声明。
selector { declaration1; declaration2;. .....; declarationN }
每个declaration由一个属性和值组成
属性是希望设置的样式属性（style attribute）.每个属性有一个值，属性和值被冒号分开。
如： selector{ property: value}
示例：将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。
h1 { color:red; font-size:14px ;}
Ok,CSS 基本规则就是这样，没错，就是这么简单孩子们，关键是要知道属性有哪些，对应的属性值有哪些。还有就是要记住花括号，分号，冒号。没错，就是三个符号，孩子，你可以的。
小小的注意点：
如果值为若干单词，则要给值加引号
示例：p{ font-family:"sans serif";}
2：
多重声明：
为了可读性，每行只描述一个属性，最后一个属性最好也加上分号，不加不会出错。
示例：
p{
text-align: center;
color: black;
font-family: arial, georgia, Palatino;
}
CSS对大小写不敏感，存在一个列外：若果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。
三：CSS高级语法
1：选择器分组
可以对选择器进行分组，这样，被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器分开。
示例： 所有标题元素都是绿色
h1,h2,h3,h4,h5,h6{
color: green;
}
2:继承及其问题
根据CSS，子元素从父元素继承属性。但是老师浏览器中不支持继承。
示例：
body{
font-family:Verdana,sans-serif;
}
则body中所有的子元素（p, td, ul, ol, li, dl, dt, dd）中都该显示为verdana字体。
对于不支持的浏览器则需要对子元素再次选择进行声明。
我们还可以对每个子元素进行单独声明来摆脱继承，如果我们不想让所有的子元素都继承的话。
Ok，孩子们，高级语法也就这么点玩意，当然后面还有，加油孩子们！
3：CSS派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
示例：你希望列表中的strong字体元素变为斜字体，而不是通常的粗字体，可以这样来定义：
li strong{
font-style: italic;
font-weight: normal;
}
应用如下：
<p><strong> 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。因为strong元素位于li元素内。</strong></li>
<li>我是正常的字体</li>
</ol>
在上面的例子中，只有li元素中的strong元素的样式为斜字体，无需为strong元素定义特别的class或id,代码更加简洁。
再看看下面的CSS规则：
strong{
color: red;
}
h2{
color:red;
}
h2 strong{
color:blue;
}
应用如下：
<p>后面的red显示为红色 <strong> red </strong></p>
<h2>这里的字体任然为红色</h2>
<h2>后面被strong标签包裹的元素显示为蓝色<strong>blue</strong></h2>
通过上面两个列子，孩子们应该对这个派生器有所了解了吧，没错，就是这么简单，困难像弹簧，你若它就强！
4：CSS id选择器
id 选择器可以为标有特定id的HTML元素指定特定的样式
id选择器以“#”来定义
示例：
#red { color: red; }
#green { color:green;}
下面的HTML代码中，id属性为red的P元素显示为红色，而id属性为green的P元素显示为绿色。
<p id="red ">这个段落是红色的。 </p>
<p id="green">这个段落是绿色。</p>
id属性只能在每个HTML文档中出现一次。
5：CSS 类选择器
在CSS中，类选择器以一个点号显示：
.center { text-align: center }
在上面的例子中，所有拥有center类的HTML元素均为居中。
示例：
<h1 class="center">
这段文字居中显示
</h1>
<p class ="center">
这段文字也是居中显示
</p>
类名的第一个字符不能使用数字！无法再Mozilla 或Firefox中起作用。
class和id都可以被用作派生选择器。
6： CSS属性选择器
对带有指定属性的HTML元素设置样式
可以为拥有指定属性的HTML元素设置样式，而不仅限于class 和id 属性
注释：internet explore 7(以及更高版本)规定了！DOCTYPE的情况下支持属性选择器。IE6及更低版本不支持属性选择器。
属性选择器
下面的例子为带有title属性的所有元素设样式
[title]
{
color :red;
}
属性和值选择器
下面的例子为title=“W3School”所有元素设置样式
[title=W3School]
{
border:5px solid blue;
}
属性和值选择器--多个值
下面的例子为包含指定值的title属性的所有元素设置样式。适用于由空格分隔的属性值：
[title ~=hello] { color:red; }
示例：
<h2 title="hello world">Hello world</h2>
<p title ="student hello">Hello W3School students!</h1>
设置表单的样式
属性选择区在为不带有class或id的表单样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: verdana, arial;
}
示例：
<form>
<input type="text" name="Name" value="Bill" size="20">
</form>
7: 如何创建CSS
如何插入样式表
插入样式表的三种方法：
1: 外部样式表
当样式需要应用于很多页面时，外部样式表是理想的选择。
每个页面使用<link>标签链接到样式表。<link>标签在（文档）头部：
示例：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。不用说也知道扩展名是.css。
下面是一个样式表文件的例子：
hr { color ：sienna;}
p { margin-left: 20px;}
body { background-image: url("images/back40.gif"); }
2: 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表，如下：
<head>
<style type="text/css">
hr { color: sienna; }
p {margin-left: 20px; }
body {background-image: url ("images/back40.gif"); }
</style>
</head>
3: 内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。谨慎此法。例如：当样式仅需要在一个元素上应用一次时使用。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左边外距：
<p style=" color :sienna; margin-left : 20px " >
大家好，这是内联样式。
</p>
4：多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对h3选择器的三个属性：
h3{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对h3选择器的两个属性：
h3{
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列(text-alignment)和字体尺寸（font-size）会被内部样式表中的规则取代。
CSS背景：
到了这里突然发现CSS主要就是调整位置，调整颜色，调整背景图片，调整字体大小和样式。把这三个调整好了，一切就不是问题了。
1：背景色
可以使用background-color属性为元素设置背景色。
示例：这条规则把元素的背景设置为灰色：
p { background-color : gray ; }
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：
p { background-color: gray; padding: 20px; }
background-color不能继承，默认值是transparent .
2:背景图像
要把图像放入背景，需要使用background-image属性。background-image属性的默认值是none. 如果需要设置一个背景图像，必须为这个属性设置一个URL值：
示例：body { background-image: url(/img/bac.gif) ; }
下面例子为一个段落应用了一个背景，而不会对文档其他部分应用背景：
p.flower { background-image:url(/img/bac.gif); }
设置可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
a.radio { background-image: url (/img/bac..gif); }
background-image也不能继承。实时上，所有背景属性都不能继承。
3： 背景重复
如果需要在页面上对背景图片进行平铺，可以使用background-repeat属性。
属性值repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和repeat-y分别导致图像只在水平或者垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
示例：
body{
background-image:url(/img/bac.gif);
background-repeat: repeat-y;
}
4:背景定位
可以利用background-position属性改变图像在背景中的位置。
下面的例子在body元素中将一个背景图像居中放置：
body
{
background-image : url ( ' /img/bac.gif ' );
background-repeat : no-repeat;
background-position : center;
}
background-position 属性值:
1）关键字：top bottom left right center
通常这几个关键字成对出现。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字。一个对应水平方向，一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是center。
示例：每个段落的中部上方出现一个图像
p
{
background-image: url ( ' bac.gif ' );
background-repeat: no-repeat;
background-position: top;
}
2）长度值：如 100px或5cm
示例：
p
{
background-image: url ( ' bac.gif ' );
background-repeat: no-repeat;
background-position: 100px 50px;
}
3）百分数值
示例：图像放在水平方向2/3 垂直方向1/3处，可以这样声明：
body
{
background-image('/img/bac.gif');
background-repeat:no-repeat;
background-position: 66% 33%;
}
如果只提供一个百分数值，所提供值作为水平值，垂直只将假设为50%
5:背景关联
通过background-attachment属性防止背景图滚动。
body
{
background-image:url(/img/bac.gif);
background-repeat: no-repeat;
background-attachment:fixed;
}
6:属性简写方式
body
{
background: #ff0000 url(/img/bac.gif) no-repeat fixed center;
}
到了这里我感觉前面对CSS掌握部分说的不太准确，
从W3C 的CSS课程表中发现，已经将CSS作用域归好类了，用到哪一部分直接到响应模块来找就可以了。
主要有：
CSS背景
1 CSS文本
2 CSS字体
3 CSS列表
4 CSS表格
5 CSS轮廓
掌握这5部分就可以应付一般的页面美化了。
CSS文本
通过文本属性可以改变文本的颜色， 字符间距，对齐文本，对文本进行缩进，等等。
05-03
6346
6346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
