CSS——层叠样式表
一、CSS又称为层叠样式表，是一种内容与表现分离的文件
关于在HTML中嵌入CSS样式表的方法有三种
#1行内样式
<tag style=""></tag>
#2内部样式
<head>
...
<style>
....
</style>
</head>
#3外部样式
创建独立的css文件
xxx.css 与html页面同名
<head>
<link rel="stylesheet" type="text/css" href="path"/>
</head>
关于嵌入CSS样式表的方法，一般禁用前两种，而选择创建独立的CSS文件的方法
二、选择器
选择器可以分为两种：基础选择器与行为伪类选择器
基础选择器：
id选择器 #name{...} name必须具备唯一性
class选择器 .name{...} 重用、组合使用
tag选择器 tagName{...} tag必须与标签同名 同名标签自动响应
伪类选择器：
悬浮伪类：selector:hover{...}
点击伪类：selector：active{...}
比较通用的选择器是class选择器，但是当需要考虑某一特殊情况的时候，合理运用给其他选择器能灵活解决相关问题
三、样式
1、文字样式：font
文字类型：font-style:italic(斜体);
文字粗细：font-weight:bold(粗体)——通常使用为700;
文字大小：font-size:int px;(正文字体12~14px之间)
字族：font-family:arial,"字体"
2、文本样式
文本颜色（4种方法）color：（正文字体颜色通常为：#333 #666 #999）
color-word rgb[a a代表透明度](0~255,~,~,[0,1])
#000000~#ffffff transparent(透明色)
行距：line-height:int px;
字符间距：letter-spacing：int px;
首行缩进：text-indent:int px;
文本装饰：text-decoration:none/line-through/underline
水平对齐：text-align:left/center/right/justify
文本溢出：text-overflow:ellipsis;
文本换行：white-space:wrap(允许换行)/nowrap(不允许换行)
文本选择：user-select:none/all
3、列表样式
列表图标：list-style-type:none
列表图片：list-style-image:url(../imgs/xxx.xxx)
列表图片位置：list-style-position:outside/inside
4、边框样式
outline:none 去除表单输入元素的默认焦点框
border:color width style
border-radius 圆角
border-shadow 阴影
5、弹性盒子
#1定义父选择器
display:flex 声明当前盒子为弹性盒子
flex-direction:row/row-reserve/column/column-reserve 控制子盒子弹性方向
flex-wrap:nowrap(默认值)/wrap 控制子盒子是否换行
justify-content:行子盒子的水平对齐/列子盒子的垂直对齐
flex-start 左对齐
flex-end 右对齐
center 居中
space-around 水平等左右外边距
space-betweem 水平两两等间距
align-items/content 单（多）行子盒子垂直对齐/单（多）列子盒子水平对齐
flex-start: 上对齐
flex-end: 下对齐
center: 居中
space-around 垂直等左右外边距
space-between 垂直两两等间距
#2定义子选择器
align-self:行盒子种某些子盒子垂直对齐/列盒子中某些子盒子水平对齐
flex-start 上对齐
center 居中
flex-end 下对齐
flex-grow:n 行盒子瓜分宽度/列盒子瓜分高度
6、背景样式
background-color:四种方式
background-image:url(path)
background-position
相对位置：九宫格
水平：left/center/right
垂直：top/center/bottom
绝对位置：坐标定位
水平：int px;
垂直：int px;
background-repeat:
no-repeat 不平铺
repeat-x 横向
repeat-y 纵向
repeat 双向平铺（默认）
background-size:
相对大小：cover
绝对大小：width(px) height(px)
