1.当同一个html元素被不同的样式定义时，所有的样式会根据以下的规则层叠于一个虚拟样式表中，其中数字越大拥有越高的优先权：
- （1）浏览器缺省设置；
- （2）外部样式表；
- （3）内部样式表（位于head标签内）；
- （4）内联样式表（位于html元素内）
内联样式表拥有最高的优先权，也就是说它优先于head标签内声明的样式，外部样式表声明的样式，以及浏览器缺省的样式声明。
2.CSS的基本语法：
（1）CSS的规则通常包括选择器和一条或多条声明如selector{declaration1,declaration2,.......declarationN},选择器通常是需要改变样式的html元素，每条声明都由一个属性 和一个属性组成，声明与声明之间有分号（；），为了减少在增加声明出错的机率，通常在最后一个声明的最后加分号。
（2）在表示颜色时，如果使用RGB百分比时即使当值是0也要写百分比号（%），但是其他情况就不需要了，表示长度宽度如果是0，在后面不需要加px，因为0就是0无论他是什么。
（3）如果值为单词，则需要给值加引号。例如p{font-famitly:"sans serif"}
（4）在定义样式时，每行定义一个属性这样可以增加可读性。
（5）多重声明和空格的使用使得样式的编辑更加方便。是否存在空格不会影响CSS样式的工作效率，CSS对大小写不敏感，存在一个例外与html文档共同使用时，class和id名称对大小写是敏感的。
3.CSS的高级语法：
（1）选择器的分组：被分组的选择器的拥有相同的样式声明，分组的选择器之间用逗号（，）分割。例：h1,h2,h3,h4,h5{color:green};
（2）根据CSS,子元素继承父元素的所有样式，但是在浏览器并不一定是这样的。netscape 4.0不仅不支持继承，而且还忽略了应用于body元素的样式。IE/WINDOWS的IE6表格内字体的样式会被忽略。使用冗余法则处理老版浏览器无法理解继承的问题。创建某一个选择器的特殊规则就可以摆脱继承规则。
4.派生选择器：通过依据元素其所在的上下文关系来定义样式，可以使标记更加简洁。
例：如果只想使列表中的strong元素变为斜体，而其他的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代码。
5.后代选择器：
又称为包含选择器，可以作为某元素的后代择器。利用后代选择器我们可以定义一些规则，在某些文档结构中起作用，在另外一些文档结构不起作用。
例：只对li元素中的em元素起作用，可以定义如下的样式：
li em{
color:red;
}
<p><em>这个字体不变红</em></p>
<ol>
<li><em>这个字体变红</em></li>
<li>正常字体</li>
<ol>
在后代选择器中，规定左边的选择器包括两个或多个用空格分隔的选择器。选择器之间的空格符是一种连接符号（combinator）。每个空格符号可以解释为：“..在..中找到”，“..作为...的一部分”，“..作为..的后代”，选择器必须从右向左读。后代选择器元素的间隔可以是无限的。
例：如果写作ul em,这个语法会选择ul下面的继承的所有em元素，而不论em的嵌套有多深。因此,ul em将会选择以下所有的em元素。
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item<em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
6.子元素选择器：
与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
例：只选择作为h1子元素的Strong元素：
h1>strong{
color:red;
}
<h1>This is<strong>very</strong> important.</h1>
<h1>This is<em>really <strong>very</strong></em>important.</h1>
以上例子h1下面的strong元素字体会变红，其他元素的strong不会改变。
子选择器使用了大于号（子结合符），子结合符的两边可以有空白字符，这是可选的。从右向左读可以解释为“选择作为...元素的所有...子元素”。
结合后代选择器和子选择器：
例：
table.company td >p
选择器会选择作为td元素的子元素的所有p元素，td元素本身从table元素继承，该table元素有一个包含company的class属性。（子选择器在ie9下面会出现问题，在其他浏览器中可以下常显示？？？？？？？？？？？）
7.相邻兄弟选择器：
如果要选择紧接在另一个元素后面的元素，而且两个元素具有共同的祖先元素，可以使用相邻兄弟选择器。
例：如果要改变h1标签后面p标签字体颜色，可以这样定义样式：h1+p{color:red}
读作选择紧跟着h1标签后出现的段落标签，h1标签和p标签拥有共同的父元素
相邻兄弟选择器使用了加号（+）即相邻选择器连接符，与子结合符一样相邻兄弟结合符旁边可以使用空白字符。
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
上面的代码片段div包含两个列表元素，一个是有序列表，一个是无序列表，两个列表是相邻兄弟，列表中的列表项是相邻兄弟，但是两个不同列表中的列表项不是相邻兄弟 ，因为他们的父元素不相同。
用一个结合符只能选择两个相邻兄弟中的第二个元素。
8.id选择器：
可以为标有特定id的html元素指定样式，id选择器以#开始定义，id属性在一个html文档中只能出现一次。(不可以在内联元素后而跟块元素，<span><p></>.</span>).
ID选择器的前面肯写有一个“#”号，可以忽略通配选择器。ID选择器不引用Class属性的值，要引用ID属性的值。
ID选择器和类选择器的区别：
- ID选择器在html文档中只能使用一次
- ID选择器不能结合使用，因为ID属性不能有以空格分隔的词列表
- ID能包含更多的含义，可以独立于元素来选择ID
- 类选择器和ID选择器是区分大小写的，这取决于文档的语言。HTML和XHTML将类和ID定义为区分大小写，所以类和ID值的大小写必须与文档中的值相对应。
9.CSS类选择器：
在CSS类选择器，以点号显示，类名的第一个字符不是数字，在firefox和mozila浏览器不能正常显示。
与ID选择器一样，类选择器也可以用作派生选择器
例：类名为fancy的更大元素内部的表格元素均以灰色背景显示橙色文字
.fancy td{
background:#666;
color:#f60;
}
元素也可以基于他们的类而被选择。
例：类名为fancy的表格元素均以灰色背景显示橙色文字，而类名为fancy的其他元素则不会有任何的改变。
td.fancy{
color:#f60;
background:#666
}
类选择器允许一种以独立于文档元素的形式来指定样式
只有适当地标记文档后，才能使用选择器，如果应用样式而不考虑具体的元素，就可以使用类选择器。
在使用类选择器之前，需要修改具体的文档标记以便正常使用类选择器。将class指定一个适当的值，可以将类样式与具体的html元素绑定。
*.important{color:red;}类选择器加通配选择器。
p.important{color:red;}元素+类选择器，匹配所有class属性值是important的段落元素。
CSS多类选择器：
在html元素中，class属性包含一个词列表，各个词之间用空格分隔。词的顺序无所谓
.import{font-weight:bold;}
.warning{font-weight:italic;}
.import.warning{background:green;}
两个类选择器连接在一起时，可以选择同时包含这些类名的元素。如果只包含其中的一个，就不会匹配。
注：在ie7之前的版本中，不同版本的浏览器都不能处理多类选择器。（IE9浏览器在处理多类选择器时，如果元素只包含其中的一个类名，则会选择最后一个类名样式，firefox,safari,chrome,maxthon则不会显示任何其中的样式，推荐对于一个元素对将所有的样式加完整）
10.CSS属性选择器：
对带有指定属性的html元素设置样式。不仅限于class和id属性
注：在ie7及以上的的版本的浏览器在规定了DOCTYPE的情况下可以使用属性选择器，ie6以下的版本不支持属性选择器。
属性选择器：为所有带title属性的html元素设置
[Title]{
color:red;
}
属性和值选择器：为titel="WSChool"的所有元素设置样式
[Title="WSChool"]{
color:red;
}
属性和值选择器--多个值
例：为包含值title属性的所有html元素设置样式，适用于空格分隔的属性值。
[Title~=hello]{
color=red;
}
例：为带有指定值的lang元素的所有html元素设置样式，适用于由连接符分隔的属性值
[lang |=en]{
color=red;
}
属性选择器特别适用于不带有class或id属性的表单元素。
属性选择器可以为XML文档使用元素和样式
属性和属性值必须是完全匹配的。
也可以根据部分属性值来进行html元素的选择，为这些元素添加相应的样式。
如果需要根据属性值词列表的某个词进行选择，需要添加波浪号（~），如果不添加波浪号，则需要进行值的完全匹配。
例：选择class属性包含"important"的元素，
p[class~=important]{
color:red;
}
部分属性选择器和点号类名记法的区别：
~=属性选择器能用于任何属性，不仅仅是class
例：选择图片title属性包括figurd的所有图片
img[title~=figure]{
border:1px solid gray;
}
该属性选择器会选择title属性中含有figure的图片，不包含title属性或者title属性值中不包含figure的图片不会被选择。
CSS2发布完成之后，添加了更多的部分属性选择器称之为子串匹配属性选择器。很多的浏览器可以使用这种选择器。
[abd^=def]选择abd属性以def开头的元素
[abd$=def]选择abd属性以def结尾的元素
[abd*=def]选择abd属性包含def的元素
注：对子串匹配属性选择器任何元素的属性都可以使用
特定属性选择器：此种属性选择器常用于匹配语言值
例：选择lang属性等于en或者以en开头的所有元素
*[lang |=en]{
color:red;
}
一般来说，[attr |=val]可以匹配任何属性的任何值。
11.创建CSS
插入样式表有三种方式：
（1）外部样式表：适用于同一个样式应用于多个页面时，使用外部样式表，通过修改样式文件，使多个页面的样式进行统一的修改。每个页面用link标签引入外部的样式表，link标签在页面的head标签内。 外部样式表以.css为扩展名，可以用任何的文本编辑器进行编辑，在CSS文件中不能存在任何的html标签。使用link标签可以让用户切换CSS样式，现代浏览器都支持rel="alternate stylesheet"，可在浏览器中选择不同的风格。
<head>
<linkrel="stylesheet" type="text/css"href="myhref.css"/>
</head>
注：在编写CSS文件时，不要在属性值和单位之间加任何的空格，如果有空格的话，只能在IE6.0中工作，在其他的浏览器有可能会出现问题。
外部样式表也可以使用@import url()....,与link标签不同的时，在CSS文件中可以引入其他的CSS文件。只有@impor引入外部样式表时，如果网速较慢，会在客户端打开一个没有样式的页面，只有当CSS样式文件，全部加载完以后才能显示应有的外部样式，如果要避免这种情况出现需要在head标签内加入至少一个script标签，或者link标签。@import会导致整个页面的载入时间变长，并且会更改IE的下载速度，例如会使得@import标签后面的script先下载。
（2）内部样式表：适用于单一的页面有特殊的样式要求。可以使用style标签，在标签内定义该页面的特殊样式，style标签要位于head标签中
<head>
<style type="text/css">
hr{color:sienna};
p{margin-left:20px};
body{background-image:url("/back/image.jpg")};
</style>
<head>
（3）内联样式表：这种样式表使得表现和内容混杂在一起，会丢失许多样式表的优势，要慎用这种样式表。这种样式适用于样式仅仅在一个html元素上使用一次时。
要使用内联样式需要在使用标签的样式属性（style）,在style属性中可以添加任何的CSS属性，属性和属性之间以分号分隔。
<pstyle="color:sienna;margin-left:20px">This is aparagraph</p>
多重样式:
样式属性在不同的样式表中定义，那么属性值会被更具体的样式表继承过来。
12.CSS的背景
13.CSS的文本
(1)text-indent属性
CSS的文本属性可以定义文本的外观，可以改变文本的颜色，文本的样式，文本的首行缩进，字符间距，对齐文本等。
web页面上的段落的第一行缩进，使用文本的首行缩进属性text-indent
使用text-indent，使元素的所有第一行文本内容都会缩进一个固定的长度。长度值可以是正值，也可以是负值
注：一般可以为所有的块级元素应用text-indent属性，但不可以为行内元素使用该属性，图像之类的替换元素也无法使用该属性。如果一个块级元素的首行中有一个图像，使用该属性后，图像会随着其余的文本一起移动。如果想将一个行内元素的首行进行缩进，可以通过设置内边距或者外边距来实现
例：为段落元素首行缩进5em,(em是html元素中的一个相对长度，相对于当前元素内字体的大小)
p{
text-indent:5em;
}
text-indent属性可以设置为负值，利用这一特性，可以实现其他的一些效果，如：悬挂缩进
注： 为text-indent设置负值，会使得元素内的其他文本，超出浏览器的边界，为避免这种问题，可以为负缩进再设置一个内边距或一个外边距
p{
text-indent:-5em;
padding-left:20px;
}
text-indent还可以设置百分比，百分比相对缩进元素父元素的宽度，
例：段落元素的首行文本缩进20%，也就是缩进段落元素的父元素div的宽度的20%,即100px
div{
width:500px;
}
p{
text-indent:20%;
}
<div>
<p>this is paragrpha</p>
</div>
text-indent属性是可以被继承
例：段落元素中的文本首行也会缩进50px,段落元素继承了id为inner的div的元素
div#outer{
width:500px;
}
div#inner{
text-indent:10%;
}
p{
width:200px;
}
<divid="outer">
<divid="inner">
<p>this is paragrapha</p>
</div>
</div>
(2)文本水平对齐属性text-align:
影响一个元素文本行之间的相互对齐方式，该属性通过指定与行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式，通过允许用户代理调整行内容中字母和字之间的间隔，可以支持justify,不同的用户代理会出现不一样的效果。
所有的浏览器版本都支持text-align属性，
注：任何版本的IE包括IE8,都不支持inherit
text-align属性值包括left centerright justify inherit
left：把文本排列到左边，默认由浏览器决定
right：把文本排列到右边
center：把文本排列中间
justify：实现两端文本的对齐效果
inherit：应该从父元素继承text-align属性
justify可以使文本的两端对齐，在两端对齐的文本中，文本行的左右两端都对齐在元素的内边界上，然后调整各行的字和字母的间隔，使各行的长度正好相等。
(3)字间隔（word-spacing）：
可以改字（单词）之间的标准间隔，其默认值是normal和字间距0是一样的
word-spacing接受一个正长度值或者一个负长度值，接受一个正长度值，字或单词之间的间隔就会加大，如果是一个负长度值，字或单词之间的间隔就会缩短。
p.spread{
word-spacing:30px;
}
p.tight{
word-spacing:-0.5em;
}
<p class="spread">This is a paragrpha</p>
<p class="tight"> This is a paragrpha</p>
word-spacing：该属性定义元素之间插入多少个空白字符，针对该属性，字定义为由多个空白字符包围的字符串，指定长度会改变字符之间的通常间隔。
注：所有的浏览器都支持word-spacing属性，但任何版本的IE(包括IE8)都不支持inherit属性。
利用这个属性可能会创建字符间距很宽的文档，所以要谨慎使用该属性。
(4)字母间隔（letter-spacing）：与word-spacing区别是该属性修改的是字母或字符之间的间隔。
letter-spacing也可以指定相应的长度值，指定正值或者负值，可以改变字母或字符之间的间隔。
(5)字符转换（text-transform）：
该属性主要处理文本的大小写，该属性有四个值：none(对源文档不做任何的处理),uppercase(将所有的字符转换为大写字符),lowercase(将所有字符转换为小写字符),capitalize（将每个单词的首字母都转换成大写）
h1{
text-transform:uppercase;
}
(6)文本装饰属性（text-decoration）：
该属性的值主要有以下几个：
none值会关闭原先应用该元素上的所有装饰，通常无装饰的文本是默认的外观，但也不总是这样，链接的默认文本也有下划线，利用该属性可以去掉链接默认样式中的下划线，具体代码如下：
a{
text-decroation:none;
}
underline会对元素加下划线；
overline会在元素的顶端加上划线；
line-through会在文本的中间画一个贯穿线，如html中的元素S和strike；
blik会让文本闪烁；
可以在一个规则中给文本加入多种装饰，如下代码所示文本上既有上划线，也有下划线
p{
text-decoration:underline overline;
}
如果两个不同的规则匹配同一个元素，胜出的规则会完全取代另一个规划，text-decroation的值不会累积起来，而是会替换。
(7)处理空白字符(white-space)：
该属性会影响到用户代理对源文档的空格，换行和tab字符的处理，通过使用该属性可以影响浏览器处理字和文本行间隔的方式，从某种程度上计xhtml已经完成了空白字符的处理，它会把所有的空白字符合并成一个空格，所以它在浏览器中显示各个字之间只会显示一个空格，并且忽略换行。
可以声明以下显式声明来设置这种默认行为
p{
wihte-space:normal;
}
上面的规则告诉浏览器按平常的做法处理：丢掉多余的空白字符，如果给定这个值，换行符会被转换成空格，一行中的多个空格序列也会转换成一个空格。
如果white-space的属性值是pre,浏览器会注意额外的空格，甚至换行，在这个方面，而且仅在这个方面，任何元素都相当于一个pre元素。注意：IE7以及更早版本的浏览器不支持该属性值。
如果white-space的属性值是nowrap,与pre相反，它会元素中文本的换行，除非使用一个br元素，在 CSS中使用nowrap类似于在html4中用<td nowrap>将一个表单元格设置为不能换行，不过white-space可以应用到任何元素上。
在CSS2.1中引入两个新的值即pre-line和pre-wrap,
如果white-space的属性值设置为pre-wrap,那该元素的文本会保留正常 的空白符序列，但是文本行会正常的切换，源文本的行分隔符和生成的行分隔符也会保留。
如果white-space的属性值设置为pre-line,正常文本中的空白字符会被序列化，但是可以换行。
(8)文本方向(decoration)：
该属性会影响到块级元素中文本的书写方向，表中列布局的方向，内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。
注对于行内完素，只用unicode-bidi属性设置为embed或者bidi-overrride时才可以用于direction属性。
direction属性有两个值 ，一个是rtl,一个是ltr,默认是rtl是从左向右保存文本。
(9)设置文本的颜色（color）：
可以使用该属性，为每个元素的的文本更换颜色。
14.CSS的字体
CSS的字体属性定义文本的字体系列，大小，加粗，风格和变形。
(1)CSS的字体系列：在CSS中有两种不同的字体系列，通用字体系列和特定字体系列
通用字体系列：拥有相似外观的字体系列集合，CSS定义的通用字体系列主要有五种：Serif字体，Sans-Serif字体，monospace字体，fantasy字体，Cursive字体
特定字体系列：具体字体系列（Times或Courier）
指定字体系列主要用font-family属性，设置具体的字体系列
为所有的h1元素指定Georgia字体，如下面代码所示：
h1{
font-family:Georgia;
}
上面的规则会产生一个问题，如果客户端本地没有安装Georgia字体，就只能使用用户代理默认的字体来显示h1元素，我们可以通过使用特定的字体名和通用的字体系列来解决这个问题，如下面的代码所示：
h1{
font-family:Georgia,Serif;
}
在为html元素使用font-family属性指定字体系列时，通常要为其指定一种通用字体系列，这样如果指定的特定字体在用户端没有安装，用户代理也可以为其指定一种候选字体来显示，也可以为元素指定一系列类似字体，要做到这一点，需要将这些字体按照优先顺序进行排列，各个字体之间用逗号进行连接。用户代理根据字体顺序来选择相应的字体，如果列出的字体都不可用，用户代理会选择一种简单的serif字体来使用.相关代码如下：
p{
font-family:Times,TimesNR,'New Century SchoolBook',Georia,'New York',Serif
}
在上面的例子中，使用了单引号，只有当一个字体或字体名有一个或多个空格时（比如New York）,或者字体名中包括$或#的符号时，才需要在font-family中加引号。单引号或双引号都可以接受，但如果把font-family放在html的style属性中时，则需要使用该属性本身未使用的那种引号，代码如下：
<p style="font-family:Times,TimesNR,'New Century SchoolBook',Georgia,'New York',Serif">........</p>
(2)字体风格font-style属性：
font-style属性常用来定义斜体文本
该属性主要有三个值：Normal-文本正常显示；Italic-文本斜体显示；Oblique-文本倾斜显示
其中italic和oblique的主要区别是italic是一种简单的字母风格，对每个字母的结构有一些小的改动，来反映变化的外观。与此不同，Oblique文本则是正常竖直文本的一个倾斜版本，通常在web浏览器中italic和oblique看上去是完全一样
p.normal{
font-style:Normal;
}
p.italic{
font-style:Italic;
}
p.oblique{
font-style:Oblique;
}
(3)字体变形：font-variant属性可以设定小型大写字母
小型大写字母，不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母
p{
font-variant:small-caps;
}
(4)字体加粗：font-weight属性设置文本的粗细
使用关键字bold可以将文本设置为粗体
关键字100~900为字体指定了9级加粗度，100对应最细的字体变形，900对应最粗的字体变形，400等价于normal字体变形，700等价于bold字体变形，如果将一个字体设置为bolder,浏览器会设置所继承更粗的一个字体加粗，与此相反，关键字lighter会将加粗度下移而不是上移
p.normal{
font-weight:normal;
}
p.thick{
font-weight:bold;
}
p.thicker{
font-weight:900;
}
(5)字体的大小：font-size属性
font-size属性可以设置文本的大小，它的值可以是绝对值或者相对值
绝对值：将文本设置为指定大小，不允许用户在所有的浏览器改变文本的大小，绝对大小在确定了输出的物理尺寸是很有用
相对值：相对周围的元素来设置文本的大小，允许用户在浏览器改变文本的大小
注：如果没有规定文本的大小，普通文本的默认大小是16px=1em
使用像素值来设置文本的大小，可以对文本进行完全控制
p{
font-weight:60px;
}
使用em来设置文本的大小，1em相当于当前文本的尺寸，在设置字体大小时，em的值会相对于父元素的字体大小而改变。
p{
font-weight:3.75em;
}
结合使用百分百和em来设置文本大小：
在所有浏览器均有效的方案是为body元素以百分比设置默认font-size值
body{
font-weight:100%;
}
h1{
font-weight:3.75em;
}
在所有的浏览器中，可以显示相同大小的文本，并允许所有的浏览器设置文本的大小。
15.CSS的列表
(1)列表的类型：改变列表的样式最简单的方式就是改变列表的标志类型，使用属性list-style-type ,如下示例将无序列表的列表标志项改为方块
ul{
list-style-type:square;
}
(2)列表项图像：使用图像作为列表项的图像，使用属性list-style-image,只需使用url()值
ul li{
list-style-image:url(xxx.gif);
}
(3)列表标志位置：可以确定列表标志是在列表项内容之内还是列表项内容之外，可以使用属性list-style-position属性
(4)简写列表样式：list-style属性，为了简单起见，可以将以上三个属性合并成一个简单属性list-style,这些属性的顺序可以任意列出，且这些值都可以忽略，只要提供一个值，其他值都可以添入默认值
li{
list-style:url(example.gif) square inside;
}
16.CSS的表格
(1)设置表格的边框：border属性
table,th,td{
border:1px solid blue;
}
在上面例子中的表格边框都是双线的，因为table th td 元素都具有独立的边框
(2)折叠边框：border-collapse属性
border-collapse属性是否将表格边框折叠为单一边框
table{
border-collapse:collapse;
}
table,th,td{
border:1px solid blue;
}
(3)表格的宽度和高度
width和height来定义表格的宽度和高度
(4)表格和文本对齐方式
text-align属性文本水平对齐方式，比如左对齐，右对齐或者居中
td{
text-align:right;
}
vertical-align属性设置文本垂直对齐方式，比如顶部对齐，底部对齐或者居中对齐
(5)表格内边距：
需控制表格中内容和边框的距离，为td和th属性设置paddin属性
(6)表格颜色：
设置边框的颜色，以及th元素的文本和背景颜色
table,td,th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
17.CSS的轮廓：绘制于元素周围的一条线，位于边框边缘的周围，可起到突出元素的作用
(1)outline属性规定元素轮廓的样式，颜色，宽度，按如下顺序设置相关的属性outline-color,outline-style,outline-width,不设置其中的某个值也不会出现问题，
设置四个边框的样式：
p{
outline:#ff00ff dotted thick;
}
(2)outline-color:设置一个元素整个轮廓可见部分的颜色，轮廓的样式不能是none,否则轮廓不会出现
p{
outline-style:dotted;
outline-color:#ff00ff;
}
注：只有规定了!DOCTYPE时，internet exploer才可以使用outline-color属性
(3)outline-style:注始终要在定义outline-color之前，定义outline-style,因为元素只有获得轮廓以后才改变轮廓的颜色，同样只有规定了!DOCTYPE后，才能在internet exploer使用outline-style属性
none:默认定义无轮廓
dotted:定义点状轮廓
dashed:定义虚线轮廓
solid:定义实线轮廓
double:定义双线轮廓，双线宽度等同于outline-width的值
groove:定义3D凹槽轮廓，效果取决于outline-color的值
ridge:定义3D凸槽轮廓，效果取决于outline-color的值
inset:定义3D凹边轮廓，效果取决于outline-color的值
outset:定义3D凸边轮廓，效果取决于outline-color的值
(4)outline-width:轮廓线不会占据空间，也不一定是矩形
thin:规定细边轮廓
mediun:规定中等轮廓
thick:规定粗边轮廓
length:允许规定轮廓粗细的值