CSS(cascading style sheet，层叠样式表)
1.CSS简介
CSS(cascading style sheet，层叠样式表)是描述文档怎么样被呈现的语言，使用CSS可以对HTML文档进行描述。
语法：
1)CSS属性和值之间用冒号分隔
2)CSS属性之间用分号分隔（建议每个属性后都书写分号）
3)CSS的值有多个的时候使用空格分隔
2.CSS在网页中的使用
1）内嵌式
每个HTML元素都包含有一个style属性，使用该属性可以直接指定样式
<p style=""></p>
存在问题：
1.不方便修改
2.结构与显示不能很好的分离
3.建议在测试或个别情况下使用
2）嵌入式
CSS样式定义内容位于style元素之间，其type属性必须被定义为text/css
<head>
<style type="text/css">
</style>
</head>
3）外部引用时
可以在多个文档间共享样式表，提高效率；可以改变样式表而无须改变HTML文档。
<head>
<link rel="stylesheet" href="url" type="text/css">
或者
<style type="text/css">
@import "style.css";
@import url("style.css");
</style>
</head>
推荐使用第一种方式
3. CSS基本语法规则
1）选择器
用于选择html中的元素
html标签选择器
即html标签，任何一个HTML元素的标签名都可以是css的选择器
p{ text-indent:10px} /*段落第一行缩进10像素*/
h1{ color:red}
优先级：
默认情况下，子级通常先继承父级标签属性
如果子级和父级拥有相同的属性，子级优先，就近原则
类选择器的优先级高于标签选择器
类选择器
class属性
.类名(类名不能使用数字开头，不能使用关键字来命名)
.rr{ color :red}
使用class属性来调用类名称
<p class="rr">one</p>
<p class="rr">two</p>
<p class="rr">three</p>
ID选择器
id属性
#id名
#two{background-color:green}
<p class="rr">one</p>
<p id="two" class="rr">two</p>
<p class="rr">three</p>
关联选择器
它们的优先级比单一的选择器大。
后代选择器 选择a元素里面所有后代元素中的b元素
a b{...}
子代选择器 选择a元素里面第一代子元素中的b元素
a > b{...}
组合选择器
使用逗号,隔开选择器，可以减少样式表的重复声明
h1,h2,h3,h4{color:red}
伪元素选择器
是指对同一个HTML元素的不同状态的一种定义方式
HTML标签:伪元素{}
a:link{} 超链接没有任何动作前的状态
a:hover{} 光标移动到超链接上的状态
a:active{} 点击超链接时的状态
a:visited{} 访问过超链接的状态
text-decoration:none 去掉下划线
2）选择器优先级
多个CSS选择器同时作用于同一个html时，声明不同的属性具有继承的关系，如果声明的是相同的属性，则以优先级高的为主。
>内嵌式 > 关联选择器(后代，子代，组合(且)) > ID选择器 > 类选择器 > HTML选择器
同级别的后者覆盖前者
就近原则
3）样式
样式是零个或多个以分号分割的【属性名：属性值】列表
4）规则集
选择器 样式
选择器{属性名:属性值;属性名:属性值}
5）注释
/*
注释内容
*/
4. CSS常见的样式属性和值
1）CSS 尺寸属性
(注意块级元素和行内元素的区别)
height 设置元素高度。
width 设置元素的宽度。
2） 字体属性
font-family字体族科
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
font-size 字体大小
font-style 字体风格
normal 正常;italic 斜体;oblique 倾斜
font-weight字体加粗
normal 正常;bold 粗体;bolder 更粗;lighter 更细
text-decoration 规定添加到文本的修饰 ：
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
3） 颜色
color 设定文本的颜色
opcity 设置透明度
所有浏览器都支持 opacity 属性。
注释：IE8 以及更早的版本支持替代的 filter 属性。
例如：filter:Alpha(opacity=50)。
一般两个属性一起写，保证兼容性
filter:Alpha(opacity=50);
opacity:0.5;
4） 背景
设置元素的背景颜色。background-color:#CCC;
设置元素的背景图像。background-image: url('19952234_1366184400450.jpg');
设置是否及如何重复背景图像。background-repeat: no-repeat;
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定
scroll 滚动
background-position
设置背景图像的开始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。您需要把 background-attachment属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
横向关键字： left center right
纵向关键字： top center bottom
百分比：
左上角是 0% 0%。右下角是 100% 100%。
background
简写属性在一个声明中设置所有的背景属性。
background:#ff0000 url('smiley.gif') no-repeat;
5） 边框属性
border-style 设置4个边框的样式
dotted 定义点状边框。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。
dashed 定义虚线。
none 定义无边框
...
如果4个值都给定了，分别应用于上，右，下, 左
border-style: solid dashed dashed solid;
如果给定1个值，应用于各边;
border-style: solid;
如果给定2个值，第一个值应用于上下边，第二个值应用于左右边
border-style: solid dashed;
border-width 设置4个边框的宽度
border-color 设置边框颜色
border 在一个声明设置所有的边框属性。
border:1px solid #ff0000
6） 鼠标光标属性
cursor 属性规定要显示的光标的类型（形状）。
none 无
auto 默认。浏览器设置的光标。
pointer 光标呈现为指示链接的指针（一只手）
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
7） 列表属性
list-style-image 将图象设置为列表项标记。
list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标
记放置在文本以外，且环绕文本不根据标记对齐。
在Firefox中的查看器中选中ul即可看出区别
list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
ower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
list-style 在一个声明中设置所有的列表属性。
list-style: square inside url('/i/eg_arrow.gif')
8）表格
优先级：
td,th-->tr-->tbody,thead,tfoot-->table (从里向外的规则)
color,font-size
text-align 文字对齐
background
border 边框，只能用于table,th,td
margin 间距，只能用于table,caption
padding 内间距，只能用于th,td
width 宽，只能用于table,td,th
height 高，只能用于table,td,th、可以用于tr并且优先级高于td
caption-side 标题位置：
top/left/right/botton
