引子
css功能：对html元素进行渲染布局
1.查找标签元素
2.操作标签（加对应的css属性）
由两个主要的部分构成：选择器，以及多条声明
====================================
css代码引入方式
一、行内式（不涉及查找，跟html绑定，难维护）
<p style="color: red;font-size: 24px">hello world</p>
二、嵌入式：head标签内嵌style标签
选择器
标签选择器
id选择器 优先级最高 #
类选择器 .
通用选择器 *
选择器优先级
组合选择器
三、文件链接式（项目选用）
head标签中添加link标签链接独立的css文件
<link rel="stylesheet" href="index.css">
四、盒子模型
margin：用于控制元素与元素之间的距离
padding：用于控制内容与边框的距离
border（边框）：围绕在内边距和内容外的边框
content（内容）：盒子的内容，显示文本和图像
盒子自适应居中
float属性
补充：
伪类：只适用于a标签,专用于控制链接的显示效果
link：定义链接的常规状态。
hover：鼠标放到链接上的状态，用于产生视觉效果。
active:在链接上按下鼠标时的状态。
visited：访问过的链接
before after伪类没有限制标签
注：/*操作标签必须是悬浮标签的子元素*/
选择器优先级
标签选择器：1；
class选择器：10；
id选择器：100；
内嵌：1000
!important 最大
<div class="new">
newDIV
<p style="color: aqua">new P</p>
</div>
继承：子承父业（只能继承与文本相关的属性）
文本属性
文本颜色
文本对齐方式
文本其他属性
1.字体
verticle-align:middle/top/baseline/px
背景属性
no-repeat center url=""
边框属性
width
height
border-color
border-style
border-width
border:5px solid blue
列表属性
list-style：square/none
display属性：
none block inline inline-block
inline-block与float
msrgin-left