基础CSS

盒子模型：

外边距：margin 顺时针（上、右、下、左）
内边距：padding 逆时针（上、左、下、右）

字大小：font-size
字体：font-family
粗细：font-weight:500;
设置行间的距离：line-height
引入字体Lobster，艺术字

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
font-family: 字体名字, 备用字体名字;

相对单位与绝对单位：

相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。
如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，
不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

样式优先级：

所有Html元素都会继承其父元素的Css样式

1. Class选择器高于继承的样式
2. ID选择器高于Class选择器
3. 行内样式高于ID选择器
4. Important优先级最高，在样式中添加 ！Important 例如：

   color: red !important;
   

Css变量

声明一个变量：--penguin-skin: black;
使用变量：  background: var(--penguin-skin, gray);
设置备用的值： background: var(--penguin-skin, black);

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。
我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

  :root {
    /* 只修改这一行下面的代码 */
    --penguin-belly:pink  
    /* 只修改这一行上面的代码 */
  }

媒体查询，然后修改变量

  @media (max-width: 350px) {
    :root {
      /* 只修改这一行下面的代码 */
        --penguin-size:200px;
        --penguin-skin:black;
      /* 只修改这一行上面的代码 */
    }
  }

文本设计

文本对齐方式

text-align: justify; 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

text-align: center; 可以让文本居中对齐。

text-align: right; 可以让文本右对齐。

text-align: left; 是默认值，它可以让文本左对齐。

文本标签

      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at 
    <strong>Stanford University</strong>.
      </p>

      <p>Google was founded by Larry Page and Sergey Brin while they were 
      <u>Ph.D. students</u> at <strong>Stanford University</strong>.
      </p>

      <p><em>Google was founded by Larry Page and Sergey Brin while they were 
      <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em>
      </p>

      <p><em>Google was founded by Larry Page and Sergey Brin while they were 
      <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em>
      <s>Alphabet</s>
      </p>

<hr>是水平线标签，自闭合不需要结束标签

box-shadow

box-shadow 属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow 属性的阴影依次由下面这些值描述：

offset-x 阴影的水平偏移量；
offset-y 阴影的垂直偏移量；
blur-radius 模糊半径；
spread-radius 阴影扩展半径；
color

 #thumbnail{
 多个阴影 用逗号分隔开
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);     
 }

悬停状态：

a:hover {
  color: red;
}

CSS定位

相对位置

当元素的定位设置为 relative 时，它允许你通过 CSS 指定该元素在当前文档流页面下的相对偏移量。
CSS 里控制各个方向偏移量的属性是 left、right、top 和 bottom。 它们代表从原来位置向远离该方向偏移指定的像素、百分比或者 em。
下面的例子展示了段落向上偏移 10px：

p {
  position: relative;
  bottom: 10px;
}

**切记这里是相反的，bottom是向上！！！ 把元素的位置设置成相对，并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。

绝对位置

它的含义是相对于其包含块定位。 和 relative 定位不一样，绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。 这样我们就可以用 CSS 的 top、bottom、left、right 属性来调整元素的位置。
绝对定位比较特殊的一点是元素的定位参照于最近的 positioned 祖先元素。 如果它的父元素没有添加定位规则（默认是 position: relative;），浏览器会继续寻找直到默认的 body 标签。

Fixed定位

它是一种特殊的绝对（absolute）定位，将元素相对于浏览器窗口定位。 类似于绝对位置，它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。 其它元素会忽略它的存在，这样也许需要调整其他位置的布局。

float属性定位

定位机制并不是 position 属性的选项，而是通过元素的 float 属性来设置。 浮动元素不在文档流中，它向 left 或 right 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 通常需要用 width 属性来指定浮动元素占据的水平空间。

#left {
      float:left;
      width: 50%;
    }

圆角

border-radius: 5px;

水平居中

在应用设计中经常需要把一个块级元素水平居中显示。 一种常见的实现方式是把块级元素的 margin 值设置为 auto。

同样的，这个方法也对图片奏效。 图片默认是内联元素，但是可以通过设置其 display 属性为 block来把它变成块级元素。

  div {
    background-color: blue;
    height: 100px;
    width: 100px;
    margin:auto;
  }

text-align: center; 可以让子元素居中对齐。

text-align: right; 可以让子元素右对齐。

text-align: left; 是默认值，它可以让子元素左对齐。

颜色设计

前面是角度 后面为渐变的颜色
    background: linear-gradient(35deg, color 1, color 2, color 3, ...);

    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );

前面为圆盘的颜色  后面为保护度和亮度  
  header {
    background-color: hsl(180, 90%, 35%);
    color: #FFFFFF;
  }
  nav {
    background-color: hsl(180, 80%, 25%);
  }

图像变化Transform

scale()

CSS 属性 transform 里面的 scale() 函数可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大到了原来的 2 倍：

#ball {
  transform: scale(2);
}
悬停时放大：
div:hover{
  transform:scale(2.1)
}

skewX()

它使选择的元素沿着 X 轴（横向）翻转指定的角度。

  #bottom {
    transform: skewX(24deg);
  }

skewY()

它使选择的元素沿着 Y 轴（横向）翻转指定的角度。

  #bottom {
    transform: skewY(24deg);
  }

伪元素

这是一个我COPY别人代码的时候看不懂的地方，今天终于搞定了。首先了解伪元素 ::before 和 ::after。 伪元素可以在所选元素之前或之后添加一些内容。 在下面的代码中，画一个心形，首先一开始有一个正方形，然后::before在上边画个半圆，::after在右边画个半圆，最后逆时针旋转45°。

<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>
<div class="heart"></div>

动画

动画的实现分一下两步骤：
1.在元素样式中设置动画的：

animation-name: 动画名称
animation-duration: 动画持续总时间
animation-iteration-count: 动画播放次数
animation-timing-function：动画定时器

2.利用@keyframes定义不同帧（20%，50%，100%）的CSS的样式，实现动画的切换

案例一：心跳

<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;//动画名称
    animation-duration: 1s;//动画持续总时间
    animation-iteration-count:infinite;//动画播放无数次，可以设置3 则播放三次停止
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;//动画名称
    animation-duration: 1s;//动画持续总时间
    animation-iteration-count:infinite; //动画播放无数次，可以设置3 则播放三次停止
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
  //更换背景的动画
  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }
  //更换背景的动画
  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<!--back是背景-->
<div class="back"></div>
<div class="heart"></div>

***注：更改播放的时间可以修改动画中50%->20%;也可以直接改动画播放时间：animation-duration。注意两者区别
案例二
给 id 为 ball1 和 ball2 的元素添加 animation-timing-function，ball1 的属性值为 linear，ball2 的属性值为 ease-out。
它们的 animation-duration 都为 2 秒，注意观察它们在开始和结束时的不同。

<style>

  .balls {
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 {
    left:27%;
    animation-timing-function:linear;//线性变化
  }
  #ball2 {
    left:56%;
    animation-timing-function:ease-out;//先快后慢
  }

  @keyframes bounce {
    0% {
      top: 0px;
    }
    100% {
      top: 249px;
    }
  }

</style>

<div class="balls" id="ball1"></div>
<div class="balls" id="ball2"></div>