前面加一条：
<link href=" " type="text/css" rel="stylesheet">
一.CSS基础语法：
1. 格式：selector {
property：value；
}
例如：h1{color:red; font-size:14px; }
属性大于1个之后，属性之间用分号隔开
如果值大于1个单词，则需要加上引号：
p{font-family: "sans serif"; }
二.CSS高级语法：
1、选择器分组：
h1,h2,h3,h4,h5,h6{color:red;} 给多个元素加上同一个样式
2、继承：
body{ color: green; }
出过在body中，除了单独定义外的元素，其他没有定义样式的元素，则继承body的样式。
三、派生选择器：
通过依据元素在其位置的上下文关系来定义样式。
例如：li strong{color :red;} 中间加一个空格。 改变了li标签下的strong标签的效果，而不会改变别的位置的strong标签的效果。
四、CSS 选择器：
*{ } *号是通配符。
1.id选择器：
id选择器可以为标有id的HTML元素指定特定的样式
id选择器以"#"来定义
派生选择器的用法：
例如： <p id="pid">hello css <a href="http://www.baidu.com">百度</a></p>
其中样式表中写： #pid a{ color:red; } 则只有"百度" ,这两个字变成了红色。
2.类选择器：
类选择器以一个点显示
class也可以作派生选择器
3.属性选择器：
对带有指定属性的HTML元素设置样式
第二种：属性和值选择器
在<head>中写
<style type="text/css">
[title]{
color: red;
}
[title="tt"]{
color: aqua;
}
</style>
效果不同：
<p title="t">属性选择器</p>
<p title="tt">属性和值选择器</p>
五、盒子模型：
内容包括：margin(外边距) , border(边框) , padding(内边距) , content(内容)部分组成。
(1).内边距：
内边距在content外，边框内
内边距属性：
padding ：设置所有边距
padding-bottom ：设置底边距
padding-left ：设置左边距
padding-right ：设置右边距
padding-top ：设置上边距
(2)边框的样式：
border-style：定义了10个不同的非继承样式，包括none，如实线，虚线等等
1.边框的单边样式：
border-top-style:
border-left-style
border-right-style
border-bottom-style
2.边框的宽度：
border-width
3.边框单边的宽度：
border-top-
border-left-width
border-right-width
border-bottom-width
4.边框的颜色
border-color
5.边框单边的颜色
border-top-color:
border-left-color
border-right-color
border-bottom-color
CSS3边框：
border-radius ：圆角边框 ，它的值可以取10px等等
box-shadow ：边框阴影
border-image ：边框图片
(3)CSS外边距
外边距:围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位，百分数值
外边距常用属性：
margin ：设置所有边距，是左右都跟着变化
margin-bottom ：设置底边距
margin-left ：设置左边距
margin-right ：设置右边距
margin-top ：设置上边距
其中： 在CSS中设置body{margin：0；} ，则居左，居上没有空格
六、CSS定位：
改变元素在页面上的位置
CSS定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
CSS定位的属性：
position ：把元素放在一个静态的，相对的，绝对的，或固定的位置中
top ：元素向上的偏移量
left ：元素向左的偏移量
right ：元素向右的偏移量
bottom ：元素向下的偏移量
overflow ：设置元素溢出其区域发生的事情
clip ：设置元素显示的形状，主要操作的是图片
vertical-algin ：设置元素垂直对齐方式
z-index ：设置元素的堆叠顺序
position属性：
static， relative ，absolute ，fixed
七、CSS浮动
浮动：
float属性可用的值：
left ：元素向左浮动
right ：元素向右浮动
none ：元素不浮动
inherit ：从父级继承浮动属性
clear属性：
去掉浮动属性(包括继承来的属性)
clear属性值：
left，right：去掉元素向左、向右浮动
both：左右两侧均去掉浮动
inherit：从父级继承来clear的值
八、尺寸操作：
属性：
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度
九、分类操作：
属性：
clear 设置一个元素的侧面是否允许其他的浮动元素
cursor 规定当指向某元素之上时显示的指针类型，设置鼠标指针的效果
display 设置是否及如何显示元素
float 定义元素在那个方向浮动
position 把元素放置到一个静态的，相对的，绝对的，固定的位置
visibility 设置元素是否可见或不可见
十、导航栏：
1.垂直导航栏
2.水平导航栏
3.导航栏效果
十一、图片：
<div class="image">
<a href="#" target="_self">
<img src="1.JPG" alt="风景" width="200px" height="200px">
</a>
<div class="text">8月份的维多利亚</div>
</div>
其中CSS样式中，opacity：1；设置图片不透明，如果参数是0.5的话，就是半透明的。
取值是从0到1，去透明度。