1 CSS介绍
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构：
2 选择器
2.1 id选择器
下面的id选择器样式，写在head的style内，如下所示
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: gray;
height: 45px;
}
</style>
</head>
2.2 class选择器
<style>
.c_top{
background-color: gray;
height: 45px;
}
</style>
2.3 标签选择器
所有的div标签，都设置了下面的样式
<style>
div{
height: 35px;
background-color: gray;
}
</style>
2.4 层级选择器
层级选择器，也叫关联选择器，中间用空格间隔，如下所示：
<style>
div a{
height: 35px;
background-color: gray;
}
</style>
2.5 组合选择器
组合选择器，中间用逗号间隔，如下所示：
<style>
#i1,#i2,#i3{
height: 35px;
background-color: gray;
}
</style>
2.6 属性选择器
属性选择器，对选择到的标签再通过属性进行一次筛选，如下所示：
<style>
input[type="text"]{width:200px;height: 50px;}
</style>
2.7 优先级
样式的优先级，标签上style优先，然后按照编写顺序，采用就近原则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
font-size: 18px;
color: black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color:pink;">样式的优先级</div>
</body>
3 边框
边框，主要是border，主要有宽度、样式、颜色(border: 20px dotted red;)
如下所示：
<div style="border: 20px dotted red;">样式边框</div>
4 其他常用样式
height 高度 百分比
width 宽度 像素，百分比
text-align 水平方向设置
line-height 垂直方向根据标签高度
color 字体颜色
font-size 字体大小
font-weight 字体加粗
<div style="height: 48px;
width:80%;
border: 1px solid red;
font-size: 16px;
text-align: center;
line-height: 48px;
font-weight: bold;">
显示的内容
</div>
5 float浮动
float，为了让标签浮动起来，块级标签也可以堆叠
<div style="clear: both;"></div> <div style="width: 20%;float: left">1</div> <div style="width: 20%;float: left">2</div>
6 display
display: none; -- 让标签消失
display: inline;
display: block;
display: inline-block;
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
块级标签与内联标签，通过display进行转换
<div style="display: inline;">显示内容</div> <span style="display: block;">显示内容</span>
7 边距
设置边距，通过margin、padding进行设置，其中：
padding 内边距
margin 外边距
<div style="width: 980px;margin: 0 auto;">
<div style="float: left;">收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both"></div>
</div>