基本语法：
选择器 { 属性：值；属性：值；}
/* 注释的内容 */
所有选择器：
# ---id选择器 （根据id选择所有元素）
. ----class 选择器 （根据 class 的值选择元素）
XXX ---标签选择
[title] ---根据特殊属性选择 属性选择器
****------为了尽量减少代码，你可以使用分组选择器，每个选择器用逗号分隔 同时也可以在一个多元素里再选择嵌套
特殊选择
E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素。
E>F 子选择符(Child combinator) CSS2 选择所有作为E元素的子元素F。
E+F 相邻选择符(Adjacent sibling combinator) CSS2 选择紧贴在E元素之后F元素。
E~F 兄弟选择符(General sibling combinator) CSS3 选择E元素所有兄弟元素F。
常用样式：
插入样式表的方法:
链接外部样式表
----每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
?内部样式表
----使用 <style> 标签在文档头部定义内部样式表 （在style中直接写入css语言）
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
?内联样式
<p style="color: sienna;margin-left: 20px;">
-----由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法
设置样式的属性：
颜色 color：#ffff00/rad /RGB(255,0,128)
文本对齐 text-align: center/right/justify
字体 font-family: （第一种），第二种，第三种...... ---如果不支持，则换第二种 依次类推
字体样式 font-style: normal(正常)/italic(斜体)/oblique(倾斜的文字)
字体大小 font-size :XXpx /XXem /XXX% --像素为单位 px/16=em
字体粗细 font-weight 指定字体的粗细。
链接的属性：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
删除链接下边的下划线：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
链接的背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
表格的样式属性：
边框相关 border-collapse:0px; //取消双边框
盒子模型(CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容)：
盒子模型的属性:
margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
content（内容） - 盒子的内容，显示文本和图像
边框样式：
border-style 值:
dotted: dotted:定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
border-color属性用于设置边框的颜色。可以设置的颜色：
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
例子：border-left-color 设置元素的左边框的颜色。
border-top-width 设置元素的上边框的宽度。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
轮廓：
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
杂且有用的知识：
隐藏一个元素可以通过把display属性设置为"none"如'block'作为块级元素显示等好多种，所占位置被回收，
或把visibility属性设置为"hidden"。'visible'代表显示的值，保留所占用的位置
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
opacity:0.4;/filter:alpha(opacity=40) 设置图片的透明度
background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。
定位的概念：
----------------------
每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。 你可以随时随地的重写它
-----------------------------------
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。
span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。
另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
还有很多的更有意思的 display 值，例如 list-item 和 table
--------------------
设置属性
设置块级元素的 width 可以防止它从左到右撑满整个容器，就可以设置左右外边距为 auto 来使其水平居中， max-width 替代 width 可以使浏览器更好地处理小窗口的情况
------------------------
position 属性（位置控制）
//位置
static
//静态
是默认值。任意 position: static; 的元素不会被特殊的定位
relative
//相对的
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
表现的和 static 一样，除非你添加了一些额外的属性。
top: -20px;
left: 20px;
在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
----------------------------
fixed
//固定的
一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。
一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）
-----------------------
absolute
//绝对的
absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
---------------------
float
另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片（下一个元素灰）
设置浮动后，会影响紧邻它后面的那一个元素！
块级元素（ul）和是纵向排列，行级元素（img）都是横向排列，float属性能够使纵向排列的块级元素横向排列。但是同时 可能会影响 设置float属性的元素下一个元素的位置，这时只要在对下一个CSS设置clear：both 或者 overflow：hidden。就可以消除这种影响。
img {
float: right;
margin: 0 0 1em 1em;
//边缘
}
-------------------
clear
//清除float属性的变动 （用在下一个元素上 可以清除float 对下一个元素带来的影响）
使用 clear left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。
----------------------------
设置div线性布局 （可以实现一行一行的 div 效果）
.box2 {
display: inline-block;
200px;
height: 100px;
margin: 1em;
}
设置宽度的三种方式
XXXpx(设置多少像素) XX%（设置百分比宽度） XXem
图像拼合 我们可以只显示我们需要的图像的一部分
hover 选择器可以运用于所有元素 用于添加悬浮效果 （元素添加该效果后 鼠标悬浮就设置为该样式）
img.home {
46px; //设置图像宽
height: 44px; //设置图像高
background: url(/statics/images/course/img_navsprites.gif) -50px 0; //设置背景为图片url 从左向右 -50 像素 从上往下 0 像素显示
//大小和剪切配合可以获取图像的部分显示 如果图像不够大 将会用平铺的形式展现
}