一、css介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
二、css语法
1、每个css样式由两个部分组成：选择器和声明。声明又包括属性和属性值，每个声明之后用分号结束。
2、css注释：/*这是注释*/
3、css的三种引入方式：
3.1.行内样式（不推荐大规模使用）
<p style="color: red">Hello world.</p>
3.2.内部样式
将css样式集中卸载网页的<head></head>标签对的<style></style>标签对中
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
3.3.外部式样
将css写在一个单独的文件中，在页面进行引入即可（推荐使用此方式）
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
三、选择器
1、基本选择器
1.1标签选择器：标签名
p { color : red; }
1.2类选择器：点 + 类名
.c1 { color : red; }
1.3id选择器：# + id值
#d1 { color : red; }
1.4通用选择器：*
* { color : red; }
2、组合选择器
2.1后代选择器：div span
2.2儿子选择器：div>span
2.3毗邻选择器：div+span
2.4弟弟选择器：div~span
3、属性选择器
3.1选取带有制定属性的元素
p[ title ]{ color : red; }
3.2选取带有指定属性和值的元素
p[ title='123' ] { color : green; }
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; }
4、分组和嵌套
当多个元素样式相同，可以在多个选择器间使用逗号分隔的分组选择器来统一设置元素样式
div , p { color : red ; }
多种选择器也可以混合使用（嵌套）
#d1, .c1, p { color : red; }
5、伪类选择器
| 状态 | 关键词 | 代码案例 |
| 连接态 | link |
a:link{color: red } |
| 鼠标悬浮态 | hover |
a:hover{color: red } |
| 鼠标点击态 | active |
a:active{color: red } |
| 访问后的状态 | visited |
a:visited{color: red } |
| input框被点击的状态（获取焦点） | focus |
input：foucus{color: red } |
6、伪元素选择器
first-letter 常用给首字符设置特殊样式
p:first-letter { font-size: 48px; color: red; }
before
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }
after
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }
7、选择器优先级
选择器相同的情况下：就近原则
选择器不同的情况下：行内 > id选择器 > 类选择器 > 标签选择器
四、css属性相关
宽和高 width属性/height属性分别设置宽度和高度
ps：块级标签才能设置宽度，内联标签的宽度由内容来决定
1、文字属性
字体：font-family可以把多个字体名称作为一个"回退"系统来保存如果浏览器不支持第一个，则会尝试下一个
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }
| 文本属性 | ||
| 文字大小 | font-size：14px； | inherit（继承） |
| 文字粗细 | font-weight： | normal（默认值）， bold（粗）， bolder（更粗）， lighter（更细） |
| 文本对齐 | text-align属性规定元素中的文本对齐方式 | left（左对齐） right（右对齐） center（居中对齐） justify（两端对齐） |
| 文本装饰 | text-decoration属性给文字添加特殊效果 | none（默认标准文本）、 underline(定义文本下一条线)、 overline()文本上一条线、 line-through(穿过文本下一条线) |
| 文本缩进 | text-indent：32px | 将段落的第一行缩进 32像素 |
2、背景属性
| 背景属性 | |
| 背景颜色 | background-color：red |
| 背景图片 | background-image: url ('1.jpg') |
| 背景颜色 | 十六进制值（#FF000）， RGB值（RBG（255,0,0））， rgba（255,0,0,0.3）可以设置透明度 |
| 背景重复 |
repeat(默认):平铺整个网页 |
| 背景位置 | background-postition : left top background-position: 10px 30px; 第一个参数调节的是左右 第二个参数调节的上下 |
| 边框属性 | border-width：2px border-style：solid border-color：red none 无边框 dotted 点状虚线边框 dashed 矩形虚线边框 solid 实线边框 |
| 画圆 | border-radius：50% |
| 阴影 |
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); 对应X/y/半径/颜色 |
3、display
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
Display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
4、盒子模型
margin ：控制元素与元素之间的距离
简写margin：10px 20px 30px 40px 顺时针（上，右 ，下，左）
Border（边框）：围绕在内边距和内容边的边框
padding：用于控制内容与边框之间的距离
content：盒子的内容，显示文本和图像
5、浮动 float
浮动的元素会造成父标签塌陷，所以我们可以用clear清除浮动带来的负面影响
主要有三种方式：
1、设固定高度
2、伪元素清除法
.clearfix:after { content: ""; display: block; clear: both; }
3、overflow:hidden
6、overflow溢出属性
| 值 描述 | |
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
-
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
7、定位
position：
static 默认值 静态
relative 相对定位（不脱离文档流）
absolute 绝对定位（脱离文档流）
fixed 固定定位（脱离文档流）
8、z-index （自定义模态框）
只有定位了元素才能有z-index
9、opacity
定义透明效果，取值范围0~1