前端---CSS篇（详解CSS）

1.CSS简介

CSS(C ascading S tyle Sheets)层叠样式表，是用来为结构化文档（HTML、XML等应用）添加样式,比如字体、颜色、大小、间距的计算机语言。CSS目前已经发展到了CSS3.0了。

2.CSS导入方式

CSS有三种导入方式：

**1.行内样式：**直接在标签元素中编写style属性，在其中编写样式即可：

html 复制代码

      <p style="color: paleturquoise">你好，这是CSS</p>

**2.内部样式：**在头部head标签中，我们写上<style>标签，然后就可以在其中写入CSS样式了：

html 复制代码

      <style>
        p{
          color: paleturquoise;
          font-size: 20px;
        }
      </style>

**3.外部样式：**外部样式就是新建一个.css文件，在其中编写css样式然后引入html文件之中，引入方式有两种：

连接式:

html 复制代码

<link type="text/css" rel="stylesheet" href="first.css">

导入式：

html 复制代码

<style>
    @import url("first.css");
</style>

3.选择器

可以选择页面中的某一个或者某一类元素，然后设置它们的样式：

3.1. 基本选择器

**1.标签选择器：**选择一类标签：标签{xxx样式}，比如：

css 复制代码

/*标签选择器*/
h1{
    color: pink;
    background-color: #eeeeee;
    font-family: 楷体;
}
p{
    color: pink;
    background-color: #eeeeee;
    font-family: 楷体;
}

**2.类选择器：**可以选择class一致的标签，在class名前面加上一个小点 .className {xxx样式}

css 复制代码

/*类选择器*/
.font1{
    color: pink;
    background-color: #eeeeee;
    font-family: 楷体;
}
.font2{
    color: pink;
    background-color: #eeeeee;
    font-family: 楷体;
}

**3.Id选择器：**这是全局唯一的样式，指定某个id，设置样式，在id名字前加上井号，如：#idName{xxx样式}

css 复制代码

/*Id选择器*/
#demo1{
    color: pink;
    background-color: #eeeeee;
    font-family: 楷体;
}
#demo2{
    color: pink;
    background-color: #eeeeee;
    font-family: 楷体;
}

优先级对比：

前面三个的优先级对比：id > class > 标签

3.2.层次选择器：

**1.后代选择器：**选中某个元素内的元素

css 复制代码

/*后代选择器*/
body p{
    background-color: pink;
}

**2.子选择器：**只选择一代

css 复制代码

/*后代选择器*/
body>p{
    background-color: pink;
}

**3. 同辈选择器：**选择相邻的兄弟选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .d1+.d2{
                background-color: #aaaaaa;
            }
        </style>
    </head>
    <body>
        <div class="d1">你好</div>
        <div class="d2">hello</div>
    </body>
</html>

**4.通用选择器：**选择这个元素向下的所有同辈元素

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .d1~div{
                background-color: #aaaaaa;
            }
        </style>
    </head>
    <body>
        <div class="d1">你好</div>
        <div class="d2">hello</div>
        <div class="d3">oook</div>
    </body>
</html>

3.3. 结构伪类选择器

（上图引用至：CSS结构伪类选择器-CSDN博客）

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用，class，id选择器-->
    <style>
      /*ul的第一个子元素*/
      ul li:first-child{
        background: firebrick;
      }
      /*ul的最后一个子元素*/
      ul li:last-child{
        background: darkcyan;
      }

      /*选中p1：定位到父元素，选择当前的第一个元素
      选择当前p元素的父级元素，选中父级元素的第一个子元素为p的
      按顺序
      */
      p:nth-child(2){
        background: salmon;
      }

      /*选中父元素下的p元素的第二个，按类型*/
      p:nth-of-type(1){
        background: gold;
      }

      p:nth-child(3){
        background-color: whitesmoke;
      }

      a:hover{
        background: violet;
      }
    </style>
  </head>
  <body>
    <!--<h1>h1</h1>-->
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </ul>

    <a href="">链接标签</a>
  </body>
</html>

4.CSS样式

css能够设计出多种多样的样式，现在我们详细的介绍这些样式。

4.1. 背景：

CSS可以定义的背景效果：

background-color 背景颜色。
background-image 背景图片。
background-repeat 背景图像是否重复。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 设置背景图像的起始位置。
background 属性简写，包含上面的几种写法。

css 复制代码

.div1    {
    width: 600px;
    height: 208px;
    background-image: url("../20231115/button.png");
    background-repeat: no-repeat;
    background-size: cover;
}

4.2. 文本

文本的属性：

|-----------------|--------------|
| 属性 | 描述 |
| color | 设置文字颜色 |
| direction | 文本方向 |
| letter-spacing | 字符间距 |
| line-height | 行高 |
| text-align | 对齐方式 |
| text-decoration | 设置划线的位置 |
| text-indent | 缩进 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| vertical-align | 垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
| | |

写个代码试一试：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
          p{
              color: rebeccapurple;
              direction: initial;
              letter-spacing: 10px;
              line-height: 20px;
              text-decoration: line-through;
              text-shadow: darkolivegreen;
              word-spacing: 50px;
          }
      </style>
    </head>
    <body>
        <p>hello world</p>
    </body>
</html>

4.3. 字体

CSS提供了多种属性修改字体的样式：

|--------------|-----------|
| 属性 | 描述 |
| font-family | 文本的字体系列 |
| font-size | 字体大小 |
| font- style | 字体样式 |
| font-variant | 以小型大型显示文本 |
| font-weight | 字体粗细 |

4.4. 链接

CSS可以修改连接的状态样式：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

4.5. 显示状态

CSS中可以使用display和visibility来设置元素的显示与隐藏

**visibility:hidden：**可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

**display:none：**可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

display中的inline和block分别会把元素设置为内联元素和块元素。

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hidden {
                visibility: hidden;
            }

            .none {
                display: none;
            }
        </style>
    </head>
    <body>
        <p>hello world</p>
        <p class="none">hello world</p>
        <p>hello world</p>
        <p class="hidden">hello world</p>
        <p>hello world</p>
    </body>
</html>

4.6. 定位 Position

CSS定位Position拥有五个值：static、relative、fixed、absolute、sticky

详细介绍见代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
    </head>
  <style>
    .sta{      /*静态定位---默认  静态定位的元素不会受到 top, bottom, left, right影响。*/
      position: static;
      border: 2px solid red;
    }
    .fix{ /*固定位置  元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：*/
      position: fixed;
      top: 30px;
      left: 50px;
    }
    .rel{ /* 相对定位 相对定位元素的定位是相对其正常位置*/
      position: relative;
      left: -30px;
    }
    .abs{ /* 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */
      position: absolute;
      left: 100px;
      top: 100px;
      z-index: -1;
    }
    .sti{ /* 粘性定位 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。*/
      position: -webkit-sticky;
      width: 300px;
      height: 50px;
      background-color: whitesmoke;
      position: sticky;
      top: 0;
    }
  </style>
    <body>
      <p class="sta">静态定位</p>
      <p class="rel">相对定位</p>
      <p class="fix">页面固定位置</p>
      <p class="abs">绝对位置</p>
      <div class="sti"></div>
      <p>666666666666666666666666</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>
      <p>777777777777777777777777</p>

    </body>
</html>

4.7.布局--Overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

代码展示了这几种情况：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .all{
                display: flex;
                flex-direction: row;
            }
            #visible {
                background: #4CAF50;
                color: black;
                padding: 15px;
                width: 100px;
                height: 100px;
                overflow: visible;
                border: 1px solid #ccc;
            }

            #hidden{
                background: #4CAF50;
                color: black;
                padding: 15px;
                width: 100px;
                height: 100px;
                overflow: hidden;
                border: 1px solid #ccc;
            }

            #scroll {
                background: #4CAF50;
                color: black;
                padding: 15px;
                width: 100px;
                height: 100px;
                overflow: scroll;
                border: 1px solid #ccc;
            }
            #auto {
                background: #4CAF50;
                color: black;
                padding: 15px;
                width: 100px;
                height: 100px;
                overflow: auto;
                border: 1px solid #ccc;
            }

        </style>
    </head>
    <body>
        <div class="all">
            <div id="visible">
                <p>第一种: visible</p>
                <p>visible</p>
                <p>visible</p>
                <p>visible</p>
                <p>visible</p>
                <p>visible</p>
                <p>visible</p>
                <p>visible</p>
                <p>visible</p>
                <p>visible</p>
            </div>

            <div id="hidden">
                <p>第二种: hidden</p>
                <p>hidden</p>
                <p>hidden</p>
                <p>hidden</p>
                <p>hidden</p>
                <p>hidden</p>
                <p>hidden</p>
                <p>hidden</p>
                <p>hidden</p>
            </div>

            <div id="scroll">
                <p>第三种：scroll</p>
                <p>scroll</p>
                <p>scroll</p>
                <p>scroll</p>
                <p>scroll</p>
                <p>scroll</p>
                <p>scroll</p>
                <p>scroll</p>
                <p>scroll</p>
            </div>

            <div id="auto">
                <p>第四种：auto</p>
                <p>auto</p>
                <p>auto</p>
                <p>auto</p>
                <p>auto</p>
                <p>auto</p>
                <p>auto</p>
                <p>auto</p>
                <p>auto</p>
            </div>
            

        </div>

    </body>
</html>

如图所示，会溢出来。

4.8. 浮动 --- Float

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        .image{
          float: left;
          width: 300px;
          height: 300px;
        }
      </style>
    </head>
    <body>
      <h2>图片库</h2>
      <p>调整串口试一试</p>
      <div>
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
        <img src="dog.jpg" class="image">
      </div>
    </body>
</html>

4.9. 居中方式

手打了一遍代码，详细的介绍了多种方式，也写清注释了。

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>居中方式</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        h4{
          margin: 10px 0 10px 0;
        }
        .all{
          width: auto;
          height: 100vh;
          background-color: whitesmoke;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
        }
        .shuiping, .chuizhi, .shuipingcuizhi{
          height: 100%;
          width: 30%;
        }
        .content{
          width: 300px;
          height: 100px;
          background-color: salmon;
          border: 1px solid black;
        }
        .item{
          background-color: #4CAF50;
          width: 100px;
          height: 100px;
        }
        /*    ===============1===============*/
        /* 使用 margin:auto 实现居中 */
        .margin-center{
          margin: auto;
        }
        /*    ===============2===============  */
        .content2{
          text-align: center;
        /* 这里的text-align：center子元素会继承该属性 */
        /* 我们的目的是将元素居中而不是文本居中 */
        }
        .block-center{
          display: inline-block;
        }
        /*    ================3================  */
        .content3{
          position: relative;
        }
        .absolute-center{
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }

      /*   ==================4===================   */
        .content4{
          display: flex;
          justify-content: center;
        }

      /*  ======================垂直居中=======================*/
        .Ccontent{
          width: 300px;
          height: 100px;
          background-color: olive;
          border: 1px solid black;
        }
        .item2{
          width: 300px;
          height: 30px;
          background-color: gold;
        }
        /*    ========== 1 =========*/
        .Ccontent1{
          display: table-cell;
          vertical-align: middle;
        }

      /*  =============2=================*/
        .Ccontent2{
          line-height: 100px;
        }
        .vertical-center{
          display: inline-block;
          vertical-align: middle;
        }

      /*  ==========3===================*/
        .Ccontent3{
          display: flex;
          align-items: center;
        }

      /*  =========4================= */
        .Ccontent4{
          position: relative;
        }
        .abs-center{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }

      /*  ==============================水平垂直居中====================*/
        .SCcontent{
          background-color: paleturquoise;
          width: 100px;
          height: 100px;
        }
        .item3{
          background-color: lightgoldenrodyellow;
          width: 50px;
          height: 50px;
        }

      /*  ===================1 =================*/
        .SCcontent1{
          position: relative;
        }
        .abso-center{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50% , -50%);
        }
      /*  ====================2==================*/
       .SCcontent2{
         display: flex;
         justify-content: center;
         align-items: center;
       }
      /*================ 3 ========================*/
        .SCcontent3{
          text-align: center;
          line-height: 100px;
        }
        .SCitem3{
          display: inline-block;
          vertical-align: middle;
        }
      /*  ===================== 4 =========================*/
        .SCcontent4{
          display: table-cell;
          text-align: center;
          vertical-align: middle;
        }
        .SCitem4{
          display: inline-block;
        }


      </style>
    </head>
    <body>
      <div class="all">
        <div class="shuiping">
          <h3>水平居中方式：</h3>
          <h4>第一种方式： margin:auto</h4>
          <div class="content">
            <div class="margin-center item"></div>
          </div>

          <h4>第二种方式： 使用inline-block 和 text-align实现 </h4>

          <div class="content content2">
            <div class="item block-center"></div>
          </div>

          <h4>第三种方式： 使用绝对定位 实现 </h4>

          <div class="content content3">
            <div class="item absolute-center"></div>
          </div>

          <h4>第四种方式： 使用flex布局 实现 </h4>

          <div class="content content4">
            <div class="item"></div>
          </div>
        </div>
        <div class="chuizhi">
          <h3>垂直居中方式：</h3>
          <h4>第一种方式：使用display：table-cell来实现</h4>
          <div class="Ccontent Ccontent1">
            <div class="item2"></div>
          </div>
          <h4>第二种方式：使用line-height、 inline-block 来实现</h4>
          <div class="Ccontent Ccontent2">
            <div class="item2 vertical-center"></div>
          </div>
          <h4>第三种方式：使用flex布局 来实现</h4>
          <div class="Ccontent Ccontent3">
            <div class="item2"></div>
          </div>

          <h4>第四种方式：使用 绝对定位 来实现</h4>
          <div class="Ccontent Ccontent4">
            <div class="item2 abs-center"></div>
          </div>

        </div>

        <div class="shuipingcuizhi">
          <h3>水平 + 垂直居中方式：</h3>
          <h4>第一种方式：使用absolute绝对定位 来实现</h4>
          <div class="SCcontent SCcontent1 ">
            <div class="item3 abso-center"></div>
          </div>

          <h4>第二种方式：使用flex布局来实现</h4>
          <div class="SCcontent SCcontent2 ">
            <div class="item3"></div>
          </div>

          <h4>第三种方式：用inline-block.text-align和vertical-align来实现</h4>
          <div class="SCcontent SCcontent3 ">
            <div class="item3 SCitem3"></div>
          </div>

          <h4>第四种方式：table-cell+display: inline-block来实现</h4>
          <div class="SCcontent SCcontent4 ">
            <div class="item3 SCitem4"></div>
          </div>

        </div>
      </div>


    </body>
</html>

4.10.提示框

实现一个提示框，练练手

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
  <style>
    .main{
      position: relative;
      display: inline-block;
    }
    .main:hover .jian{
      visibility: visible;
    }
    .jian{
      color: white;
      text-align: center;

      visibility: hidden;
      top: -5px;
      left: 120%;
      padding-top: 5px;
      background-color: black;
      border-radius: 6px;
      width: 200px;
      height: 30px;
      position: absolute;
    }
    .jian::after{
      position: absolute;
      content: "";
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
      z-index: 1;
      border-width: 5px;
      border-style: solid;
      border-color: transparent black transparent transparent;
    }

  </style>
    <body>
      <h1>提示框</h1>
      <div class="main">
        显示我
        <div class="jian">
          提示框成功了
        </div>
      </div>
    </body>
</html>

5. 盒子模型 Box Model

我们可以把每一个标签元素看成一个盒子，盒子中包括了边距、边框、填充和实际内容，盒子模型允许在盒子周围的空间放置其他元素。

6. CSS3

CSS3是CSS的技术新版本，拥有很多新的特性，下面是新的特性介绍：

6.1. CSS3边框

由三个新的边框属性：border-radius、box-shadow、border-image

border-radius：圆角

使用border-radius:10px 就可以轻易实现圆角了，值越大圆角的弧度越大。

**box-shadow:阴影：**使用它就可以实现阴影效果。

border-image：边界图片

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3边框</title>
      <style>
        .css3-border{
          /*width: 400px;*/
          /*height: 400px;*/
          /*background-color: #4CAF50;*/
          /*border-radius: 100px;*/
          border: 15px solid transparent;
          border-image: url(border.png) 30 30 stretch;

          /*box-shadow: 10px 10px 30px #4CAF50;*/
        }
      </style>
    </head>
    <body>
      <div class="css3-border" >
        你好
      </div>
    </body>
</html>

6.2. 渐变

CSS3提供了新的渐变属性：linear-gradient

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        .jianBian1{
          width: 300px;
          height: 100px;
          /*上到下*/
          background-image: linear-gradient(to bottom, black , pink);
        }
        .jianBian2{
          width: 300px;
          height: 100px;
          /*从右到左*/
          background-image: linear-gradient(to left, orange , blue);
        }
        .jianBian3{
          width: 300px;
          height: 100px;
          /*对角线*/
          background-image: linear-gradient(to bottom right, blanchedalmond , purple);
        }
        .jianBian4{
          width: 300px;
          height: 100px;
          /* 使用角度 */
          background-image: linear-gradient(-30deg, lawngreen , palegoldenrod);
        }
      </style>
    </head>
    <body>
      <div class="jianBian1">
      </div>

      <div class="jianBian2">
      </div>

      <div class="jianBian3">
      </div>

      <div class="jianBian4">
      </div>

    </body>
</html>

6.3. 文本效果

1.文本阴影：text-shadow

文本溢出属性：text-overflow
text-outline

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本效果</title>
      <style>
        p{
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-shadow: 10px 10px 5px red;
        }
        .ellipsis{
          /*添加省略号*/
          text-overflow: ellipsis;
        }
        .clip{
          /*直接断开*/
          text-overflow: clip;
        }
      </style>
    </head>

    <body>
      <p class="ellipsis"> 你好，如果超出的话会怎么样呢？？？ </p>
      <p class="clip"> 你好，如果超出的话会怎么样呢？？？ </p>

    </body>
</html>

6.4. 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

使用transition: 变化的属性时间

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过渡</title>
      <style>
        .transition{
          width: 100px;
          height: 100px;
          background-color: #4CAF50;
          transition: background-color 2s, width 2s, height 2s, transform 2s;
        }
        .transition:hover{
          width: 200px;
          height: 200px;
          background-color: purple;
          transform: rotate(90deg);

        }
      </style>
    </head>
    <body>
      <div class="transition">
        哥们你好
      </div>
    </body>
</html>

6.5.动画

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        .animation{
          width: 100px;
          height: 100px;
          background-color: red;
          position: relative;
          /*动画名称*/
          animation-name: move;
          /*动画运行时间*/
          animation-duration: 5s;
          /*速度曲线*/
          animation-timing-function: linear;
          /*动画何时开始*/
          animation-delay: 2s;
          /*动画运行次数*/
          animation-iteration-count: infinite;
          /*动画再下一个周期是否逆向运行*/
          animation-direction: alternate;
          /*规定是否运行*/
          animation-play-state: running;
        }
        /*设置动画*/
        @keyframes move {
          0% {background-color: red; left: 0px; top: 0px;}
          25% {background-color: yellow; left: 200px; top: 0px;}
          50% {background-color: blue; left: 200px; top: 200px;}
          75% {background-color: green; left: 0px; top: 200px;}
          100% {background-color: red; left: 0px; top: 0px;}
        }
      </style>
    </head>
    <body>
      <div class="animation">

      </div>
    </body>
</html>

6.6. CSS3图片

CSS3对图片样式有了新的属性：

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <style>
        .yuan{
          /*  圆形图片  */
          width: 100px;
          border: solid black;
          border-radius: 50%;
        }
        /*如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：*/
        .xiangYing{
          max-width: 100%;
          height: auto;
        }
      /*  卡片式图片*/
        div.polaroid{
          width: 200px;
          background-color: white;
          box-shadow: 0 4px 8px 0 gray, 0 10px 20px 0 lightgray;
          margin-bottom: 25px;
        }
        img.dog:hover{
          opacity: 0.7;
        }
        div.container{
          text-align: center;
          padding: 5px 10px;
        }


      </style>
    </head>
    <body>
      <a href="../20231118/dog.jpg">
        <img src="../20231118/dog.jpg" class="yuan" />
      </a>
      <h1>响应式图片</h1>
      <img src="../20231118/border.png" class="xiangYing">

      <h1>这是响应式卡片</h1>
      <div class="polaroid">
        <img src="../20231118/dog.jpg" alt="Norway" class="dog" style="width:100%;">
        <div class="container">
          <p>The Troll's tongue in Hardanger, Norway</p>
        </div>
      </div>
    </body>
</html>

7. 总结

通过对CSS的学习，我们可以使得html页面变得更加好看了，接下来我们就要开始学习JavaScript来操控页面元素了。