CSS样式表
1.CSS概念
CSS是Cascading Style Sheet的缩写，中文为层叠样式表，用于将样式信息和网页内容分离的语言；
CSS 样式由若干条样式规则组成，每一条样式规则都由三部分组成：选择符（selector），属性（properties）和属性的取值（value）
例如：seletor{property:value } !!!选择符区分大小写，多个属性在一起时用；隔开
2.颜色的不同写法和单位
英文（red）
十六禁制（#ff0000）
CSS颜色缩写（#f00）
RGB百分比（rgb（100%,0%,%0）） ！！！使用rgb值即使值为0也要写百分比符号，其他情况则不需要
是否包含空格不会影响CSS的使用，CSS对大小写不敏感(!!!!!!!如果和HTML文档一起工作，class和id名称则对大小写敏感)
3.内联样式
内联样式是将样式代码直接内联到标记内，以Style语句作为属性值，例如：
<table style="border-collapse:collapse">
4.内部样式表
使用<style>标记将一段CSS代码嵌入到HTML文档头部中，也就是<head></head>之间；例如：
<head>
<style type="text/css">
hr{color:sienna;}
p{margin-left:20px;}
bodyP{background-image:url("image/back40.gif");}
</style>
</head>
5.外部样式表
把上面的样式定义单独放入一个文本文件，这就是样式表文件，后缀为CSS，在使用时将其导入到文档中来：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
link 放在head标记之间，rel type属性表明这是一个样式文件，href指定了样式文件的路径
多重样式：
内联样式优先级>内部样式表优先级>外部样式表优先级
6.选择符
选择符是指样式作用的对象（元素的标记（标记选择符），元素的id（id选择符），元素的类class（类选择符），元素属性（属性选择符），元素状态（伪类选择符））
6.1标记选择符：
是指HTML中的元素的标记名称，定义的样式将对其起作用，作用范围是文档内所使用该标记的所有元素，改变的是该元素的默认显示格式
6.2类选择符：
是指元素的类（ｃｌａｓｓ）为该类元素定义样式，定义类选择符时，需要在类的名称前加.；例如，为段落标记定义两个类来表示不同的样式：
p.red(color:red)
p.green{coloe:green}
p为段落标记，red,green为定义的类的名称，{}内为样式定义；将上面两个样式应用到不同的段落中时，只需要在<P>标记中指定class属性即可；例如：
<p class="red">红色</p>
<p class="green">绿色</p>
上述定义的类选择符只使用于一种标记，如果把在.之前的标记省略，则可以应用在任意标记上预先定义好的类样式
6.3id选择符
根据元素的id来设计元素的样式，由于id不可重复，所以只能对一个元素起作用，id选择符类似于类选择符，不同的是id选择符是#开头，例如：
#red{color:red;}
#green{color:green;}
<p id="red">红色</p> .
<p id="green">绿色</p>
类选择符可以给任意数量的标记定义样式，而id选择符在页面的标记中只能使用一次
（！！！！id选择符对给定标记的应用的优先级大于类选择符）
6.4属性选择符
是对带有指定属性的HTML元素设置样式，而不仅仅限制于class和id属性，下面例子为title属性的所有属性设置样式:
[title]{color:red;}
6.5伪类选择符
可以看成一种特殊的类选择符，能被CSS的浏览器自动识别的特殊选择符，伪类选择符以“:”开头，例如（ 元素的不同状态 ：link ,:visited,:active;:hover;
具有键盘输入的焦点元素：focu 第一个子元素：first-child ）
伪类选择符最大的作用是可以对链接的不同状态定义不同的样式效果；伪类选择符定义的样式常应用在锚标记<a>上,即锚的伪类选择符，
它表示动态链接的4中不同状态：未访问的链接(link)，已访问的链接(visited)，激活链接(active)和鼠标停留在链接上(hover)
a:link{color:#FF0000;text-decoration:none}
a:visited{color:#FF0000;text-decoration:none}
a:active{color:#FF0000;text-decoration:none}
a:hover{color:#FF0000;text-decoration:none}
p:first-child{font-weight:bold}
input:focus{background-color:yellow;}
7.选择符的分组和通配符*
分组的选择权可以分享相同的声明
通配符*指为所有元素设置默认格式，下面的代码为文档中所有元素的外边距，内边距和边框都设置为0
*{margin：0；padding：0；border：0；}
8.派生选择符
HTML的标记之间有一定的层次关系，标记之间形成一个树形层次结构，CSS根据元素在上下文关系来确定样式，这样可以使标记
更加简洁
9.选择器之间的继承和层叠
HTML中的标记都是包含关系，从而可以形成树形结构，所以子标记可以继承父标记的一些样式
层叠是对同一个元素或者web页面应用样式的能力，指多种样式给共同作用于同一元素
选择符冲突时，谁的优先级高应用谁的样式； id选择符>类选择符>标记选择符
10.框模型
框模型 （Box Model），简称盒子模型。是元素描述和DIV 和CSS布局的核心；
框从内到外依次是：外边距(margin)，边框(border)，内边距(padding)，内容区(content)
10.1宽高属性
width 和height指的是content区域的宽和高，而不是整个盒子的宽和高
盒子的宽=width+2*border+2*border+2*margin
10.2边框属性
margin用来设置外边距，边框外面的空距，例如：
h1{margin：10px 0px 26px 5px;} 顺序是从上外边框（top）围着元素顺时间旋转，即top right bottom left,如果左右，上下对称，则可设置为h1{margin：10px，15px}
10.3内边框属性
padding是设置元素内容到元素边框的距离，用法和margin类似；
10.4边框属性
用来设定一个元素的边线（包括线宽border-width,线型 border-style,线色border-color）,四条边可以单独设置，
名称s采用三元组形式，如border-top-style border-top-width border-top-color
10.5背景属性
background指的是content和padding区域，可以设置颜色或者图片背景
11.定位和浮动
定位（positioning）属性可以对元素进行定位，包括定位坐标类型position属性，定位坐标(left,top.right,bottom),文本流属性float属性等
11.1一切皆为框
div,h1,p元素通常被称为块级元素，这些元素显示为一块内容，即“块框”，与之相反，span和strong等元素则称为“行内元素”
这是因为他们的内容显示在行内，即行内框
可以使用“块区”面板中的显示(display)属性改变生成的框的类型，通过将display属性设置为block，可以让行内元素（例如<a>）表现得像块级元素
还可以将display设置为none让生成的元素没有框
11.2CSS定位机制
CSS有三种基本的定位机制：普通流，浮动和绝对定位，除非专门指定，否则所有框都在普通流中定位（也就是说普通流中的元素的位置由元素在（x）HTML中的位置决定
11.3定位属性
定位属性包括定位类型（position）, 定位坐标(left,top.right,bottom)，溢出处理（flowover）,层叠属性（z-index）和垂直对齐方式（vertical-align）
11.3.1 positon指定的定位做别的类型，有以下几种：
1.static:默认次序，即文本流顺序，从左到右，由上到下，这时指定的定位坐标无效
2.relative:相对坐标，相对于原来的位置，需要设定左上角的偏移量(left,top)
3.absolute:绝对坐标，元素显示在父容器指定的绝对坐标上，此时将忽略其他对象的存在，可能会覆盖掉其他对象
4.fixed:固定坐标，浏览器窗口坐标，固定在浏览器窗口的某一位置，不随页面的滚动而移动（例如网页的小广告）
5.inherit:继承父容器的position
11.3.2 层叠属性（z-index）:控制层（盒子）在Z轴上的排列次序，为整数，值越大越靠近上面，该属性只对position设置为absolute或者relative有效
11.3.3 可见性属性（visibility）:控制显示或者隐藏，可取visible,hiddden.collapse和inherit等
11.3.4 溢出处理(flowover);当文本流超出框的时候如何处理，可以隐藏(hidden)，也可以让溢出部分可见(visible)，或者自动扩充容器（auto） ,还可以出现滚动条（scroll）
11.4 浮动与清理
11.4.1 浮动
浮动是指浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框为止
浮动框不在文档的普通流里，不占位置
11.4.2 行框与清理
普通的行框占一行，不允许旁边出现其他元素
要想阻止行框围绕浮动框，则需要对框使用clear属性，clear属性的值可以是left,right,both或者none,它表示框的哪一条边不应该挨着浮动框
12.DIV＋CSS网页布局
12.1 <div>标记是“无名框”标记，是HTML文档定义层的标记，又称层（块）标记
12.2 DIV＋CSS网页布局是一个典型应用，网页主要由三部分组成：结构，表现和行为
结构主要包括DIV在内的一系列XHTML标记
表现主要包括CSS层次样式表
行为主要包括对象模型（如W3C DOM）等
