引入CSS有三种方法
内联>内部>外部。其中，>表示优先级大于。
内联指写在HTML标签里，内部指写在style标签里，外部指引入单独的CSS文件。

选择器

牛客的markdown真的不好用...

元素选择器    h1{} h2{}    无法评价...写玩具时用可以
类选择器 .class1 {}    这种方法最好，最常用。
id选择器 #id1{}        这种方法最扯，你无法保证id是唯一的，因为你要和别人协作。
选择器组    .class1, #id1 {}    这样可以减少冗余。
派生选择器    .class1>.class2{}    这指的是给class1的儿子class2加样式
             .class1 .class2{}    这指的是给class1的后代加样式。不知道是儿子孙子还是什么。
伪类选择器
    用个例子吧
    a:link {color: #FF0000} /* 未访问的链接 */
    a:visited {color: #00FF00} /* 已访问的链接 */
    a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
    a:active {color: #0000FF} /* 选定的链接 */

盒模型

图片说明
永远使用border-box!

定位

默认定位

块级元素: div p 等等，自上而下排列，可以改变宽高。在一行中，一个块后面不许用别的块。
行内元素：span a 等，从左向右水平排列，无法改变宽高。
行内块(中庸boy): 从左向右水平排列，能改变宽高。

这几种元素可以互相转换。用display: 来改变即可。

浮动定位

可以让元素向左右浮动。同时可以消除块级元素的特性（独自占一行）。

相对定位

和自己原来的位置作比较。
假设原来是这样的
图片说明
只需要

.b {
    background: ...;
    position: relative;
    top: 30px;
    left: 50px;
}

就可以变成这样:
图片说明

绝对定位

当前元素与已定位的祖先元素的距离。
先找爸爸，然后找爷爷，最终能找到body。
图片说明

再给一个自己的父亲没定位的例子
图片说明

固定定位

将元素的内容固定在页面的某个位置，无论用户怎么滚动页面，元素都不会“动”。
有点像小网站的弹出窗口。
只需要一句

position: fixed;

z-index

元素之间有重叠，用z-index决定谁在上，谁在下。

CSS-3

圆角

border-radius：左上 右上 右下 左下;

阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

线性渐变

background:linear-gradient([方向/角度]，颜色列表)；

径向渐变

background: radial-gradient(颜色列表);

背景位置

background-origin：指定了背景图像的位置区域
border-box : 背景贴边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边

背景裁切

background-clip:
border-box 边框开切
padding-box 内边距开切
content-box 内容开切

背景大小

background-size:
cover 缩放成完全覆盖背景区域最小大小
contain 缩放成完全适应背景区域最大大小
（cover会拉伸，contain是等比例缩放）

过渡

从一个状态到另一个状态，中间的“缓慢”过程；
缺点是，控制不了中间某个时间点。

transition: 属性(width) 持续时间(2s) 过渡函数(ease) 延后时间(1s)

动画

可以控制过程。
需要关键帧和animation配合使用。
看个例子:

/*一个元素从左到右移动，三秒内移动两次*/
<style>
    div{
    width: 700px;
    border: 1px solid red;
}
@keyframes x{
    from{ margin-left: 0px;}
    to{ margin-left: 550px;}
}
img{
    animation: x 3s linear 2;
    /*如果想要无限重复呢？*/
    animation: x 3s linear infinite alternate;
}
</style>
<body>
    <div>
        <img src="img/cat.gif">
    </div>
</body>