一、css3简介
1.1CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。
CSS文件后缀名为.css
CSS用于HTML文档中元素样式的定义。
1.2为什么需要CSS
使用css的唯一目的就是让网页具有美观一致的页面
1.3语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
<style> h1{ color: blue; font-size: 12px; } </style>
二、css引入方式
2.1内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
温馨提示
缺乏整体性和规划性，不利于维护，维护成本高
<p style="background: orange; font-size: 24px;">CSS<p>
2.2内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
温馨提示
单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱
<head> <style> h1 { background: red; } </style> </head>
2.3外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部.
<link rel="stylesheet" type="text/css" href="xxx.css">
三、选择器
CSS语法 规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）。
3.1全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化.
*{ margin: 0; padding: 0; }
3.2元素选择器
HTML文档中的元素，p、b、div、a、img、body等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”.
p{ font-size:14px; }
再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。
<p>学完了<span>前端</span>，继续学Java</p> span{ color: red; }
温馨提示
- 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
- 无论这个标签藏的多深，一定能够被选择上
- 选择的所有，而不是一个
3.3类选择器
规定用圆点 . 来定义，针对你想要的所有标签使用，比较灵活。
<h2 class="oneclass">你好</h2> /*定义类选择器*/ .oneclass{ width:800px; }
class属性的特点
- 类选择器可以被多种标签使用
- 类名不能以数字开头
- 同一个标签可以使用多个类选择器。用空格隔开
3.4ID选择器
针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义
<h2 id="mytitle">你好</h2> #mytitle{ border:3px dashed green; }
特别强调
- ID是唯一的
- ID不能以数字开头
3.5合并选择器
语法：选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码.
.header, .footer{ height:300px; }
3.6选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器
3.7关系选择器
3.7.1后代选择器
选择所有被E元素包含的F元素，中间用空格隔开
ul li{ color:green; } <ul> <li>宝马</li> <li>奔驰</li> </ul> <ol> <li>奥迪</li> </ol>
3.7.2子代选择器
选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示
div>a{ color:red } <div> <a href="#">子元素1</a> <p> <a href="#">孙元素</a> </p> <a href="#">子元素2</a> </div>
3.7.3相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
h1+p{ color:red; } <h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p>
3.7.4通用兄弟选择器
选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择
h1~p{ color:red; } <h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p>
四、字体属性
CSS字体属性定义字体，颜色、大小，加粗，文字样式。
4.1color
规定文本的颜色
div{ color:red;} div{ color:#ff0000;} div{ color:rgb(255,0,0);} div{ color:rgba(255,0,0,.5);}
4.2font-size
设置文本的大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}
温馨提示
chrome浏览器接受最小字体是12px
4.3font-weight
设置文本的粗细
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100~900 | 定义由细到粗 400等同默认，而700等同于bold |
H1 {font-weight:normal;} div{font-weight:bold;} p{font-weight:900;}
4.4font-style
指定文本的字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体字 |
4.5font-family
font-family属性指定一个元素的字体
温馨提示
每个值用逗号分开
如果字体名称包含空格，它必须加上引号
font-family:"Microsoft YaHei","Simsun","SimHei";
五、背景属性
CSS背景属性主要有以下几个
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |
5.1background-color
该属性设置背景颜色
<div class="box"></div> .box{ width: 300px; height: 300px; background-color: palevioletred; }
5.2background-image
设置元素的背景图像
元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
<div class="box"></div> .box{ width: 600px; height: 600px; background-image: url("images/img1.jpg"); }
