1、使用css 样式的3 种方法
1)外部样式
2)内页样式
直接写在html 文件的头部里面
3)行内样式
私房货
2、CSS 基本语法（语法简单的理解就是规则）
1)CSS 规则由两个主要的部分构成：
1、选择器
2、一条或多条声明。
选择器：要给元素装潢加样式（首先得选中需要装潢的元素）
声明：声明由一个属性和一个值组成
属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开，如果
要定义不止一个声明，则需要用分号将每个声明分开，养成良好的习惯，就算一
个声明我们也加上分号。
选择器{属性:值;}
使用空格以及回车让css 更可读！
选择器{
属性:值;
}
2）小试牛刀
选择器有一种最简单的写法直接写上你要选中的元素！
p {
color:red; 该行声明将颜色设置为红色
font-size:30px; 该行声明将字体大小设置为30px
}
3）CSS 加注释
/注释的内容/
3、CSS选择器
简单选择器
1)id 选择器
方法：通过给标签加id 属性，并给与该属性一个值（这个值我们可以称为id 名称）
#id 名称{
}
id 属性的值是我们自己定义的，定义值得过程我们可以称作给id 命名！
命名需要遵循一定规则(我建议你用以下写法)：
(1)只采用字符[a-zA-Z0-9]，连字号（-）和下划线（_）,区分大小写
(2)以字母开头，避免纯数字，避免数字开头，以保证兼容，以数字开始的类名、
id 名仅在IE6/IE7/IE8 下被识别，而其它浏览器下则不识别（忽略该规则）。
(3)一个id 名只能在一个页面中出现一次，不可以两个标签拥有同样的id 名。
2)类（class）选择器
方法：给标签加class 属性并给与该属性一个值（这个值我们可以称为类名）
.类名{
}
class 属性的值是我们自己定义的，定义值得过程我们可以称作给类(class)命名！
命名需要遵循一定规则(我建议你用以下写法)：
(1)只采用字符[a-zA-Z0-9]，连字号（-）和下划线（_）,区分大小写
(2)以字母开头，避免纯数字，避免数字开头，以保证兼容，以数字开始的类名、
id 名仅在IE6/IE7/IE8 下被识别，而其它浏览器下则不识别（忽略该规则）。
(3)类名的好处是可以多次使用方便给标签归类！
(4)一个标签可以拥有多个类名
总结：id 名与类名的命名最好具有语义！
3)标签选择器
直接将html 标签名作为选择器
div {
}
p {
}
复杂选择器
1)交集选择器
一个标签选择器后边跟一个类选择器或者一个ID 选择器，中间不能有空格。它要求必
须是属于某一个标签的，并且声明了类选择器或者ID 选择器。
例如：
div.mycolor{…} 类别为mycolor 的层才会被选中，应用该样式。
div#mydiv{…} id 为mydiv 的层才会被选中，应用该样式。
2)并集选择器
就是多个选择器以逗号相连，只要满足其中之一它都会被选中！
我们上面学的选择器都可以被写入并集选择器
div,p,h1,div.mycolor,div#mydiv {…}
3)后代选择器（包含选择器）
是以空格相连的的多个选择器，外层的选择器写在内层的选择器前面！
根据元素的后代关系来作为选择的筛选条件！
div h1.first span.firstletter {…}
4）伪类选择器
注：hover鼠标放上去这个状态时变成风格
a:hover {
color:red;
}
5）通配符选择器
它是一种特殊的选择器，它用*符号表示，它可以定义文档中所有元素对象的样式!
- {} 等价于body{}
4、CSS构造文本
CSS 长度值得单位：
%——百分比
in——寸
cm——厘米
mm——毫米
pt——point，大约1/72 寸；
pc——pica，大约6pt，1/6 寸；
px——屏幕的一个像素点；
em——元素的font-size；
- 文本缩进
text-indent：值；
值为数字，最常用的数值单位是px(像素)，也可以直接是百分比！
text-indent:100px;
text-indent:10%;
- 文本对齐
text-align:对其方式;
可以的值为：left、center、right
- 文本行高
line-height:值;
line-height:23px;
line-height:120%;
默认：normal
- 字间隔(单词)
word-spacing:10px;
默认值：normal
- 字母间隔
letter-spacing:5px;
默认值：normal
- 文字下划线
text-decoration:none;
值：underline 或者none 等，常用值就这两个
- 字体
font-family:微软雅黑;
多个字体用逗号隔开
font-family:“Times New Roman”,Georgia,Serif;
font-family:字体1,字体2;
- 字体风格
font-style:值;
normal
italic //斜体
oblique //斜体
- 字体大小
font-size:数值;
数值单位为px
- 文本颜色
color:颜色值;
颜色值可以为一些简单的英语单词
color:red;
实际工作中用的比较多的是颜色代码
color:#111111;
- 文本加粗
font-weight:值;
常用值：
normal
bold
5、构造块级元素（div）
- 宽高
width:数值;
height:数值;
也可用百分比！
长高的设置不会被后代继承
- 背景
(1)背景颜色
background-color:颜色值;
元素的背景颜色默认为transparent
background-color 不会被后代继承。
(2)背景图片
使用background-image 属性默认值为none 表示背景上没有放置任何图像
如果需要设置一个背景图像，必须为这个属性设置一个url 值
background-image: url(bg.gif);
注：图片位置相对于.css文件
注意图片的位置引入方法!
背景图片重复的问题
使用background-repeat 来解决，可以的值：repeat-x，repeat-y，no-repeat
背景图片的位置
使用background-position 来设置
1>可以使用一些关键字：top、bottom、left、right 和center 通常，这些关键字
会成对出现。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
第一个表示水平第二个表示垂直
2>也可以用百分比
background:50% 50%;
第一个表示水平第二个表示垂直
3>当然更可以用数值，以px 单位
background:40px 10px;
第一个表示水平第二个表示垂直
4>也可以混用！
背景关联
background-attachment:fixed
(3)总结写法
background: #00FF00 url(bg.gif) no-repeat fixed center left;
- 边框
border:1px solid #ccc;
dashed 表示虚线
border-left:none;
border-right:none;
border-top:none;
border-bottom:none;
分开设置
最后来讨论一个有趣的问题：
后代元素长度大于祖辈元素的大小时候的处理方法：
overflow:;
可能的值：
visible：默认，内容不会被修剪，会呈现在元素框之外。
hidden：超出的内容会被修剪掉，直接不显示。
scroll：超出内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被超出，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承overflow 属性的值。
display:block; //内联元素变成块元素
display:inline;//块元素变成内联元素
display:inline-block;//块元素可以不再独自占一行
display:none; //不显示了
6、盒模型概念
页面中的所有标记都可以看成是一个盒子
内边距：边框和内容区之间的距离，通过padding 属性设置
外边距：元素边框的外围空白区域是外边距，通过margin 属性设置
内边距设置方法：
padding-top:10px;
padding-right:10px;
padding-bttom:10px;
padding-left:10px;
简些：padding:上右左下;
padding:10px 20px 40px 30px;
padding:上下，左右;
padding:10px 20px;
外边距设置方法：
margin:;用法同上！
7、浮动
浮动的设置方法：
float:left;
float:right;
不想标准流中的元素受到浮动的影响怎么办？
clear:both;
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
如果连续多个元素设置浮动呢？
结论：被设置浮动的元素会组成一个流，并且会横着紧挨着排队，直到父元素的
宽度不够才会换一行排列。