css

.html

 <link rel="stylesheet" href="style.css">

style.css

.class1{
color:red;
background: #3cbda6;
border-radius: 24px;
        }
/* 渐变背景
 */
        body{
        background-color: #21D4FD;
        background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);}
/* 鼠标悬浮的颜色
 */
 a:hover{
 color:orange;}
 div:nth-of-type(1)input{border: 3px solid black;
 div:nth-of-type(2)input{border: 3px dashed #4d0b8c;
 div:nth-of-type(3)input{border:2px dashed #008c27;
/*border:粗细，样式，颜色*/
#box{width: 300px;border: 1px solid red;}
.class2{
color:red;
 background: #3cbda6;
 border-radius: 24px;
 } 
 /*  文字：font
 段落：text
 行高，行：line
 */
 #webp{
 color:red;
 font-family:楷体;
  font-size:100px;
  text-align:center;
  line-height:200px;
  background: #3cbda6;
  border-radius: 24px;
 }
  #m{
  font-family:楷体;
  color:red;
   background: #3cbda6;
   border-radius: 24px;
  }
p{
 color:red;
  background: #3cbda6;
  border-radius: 24px;
 }
 /* list-style:
    none 去掉原点circle 空心圆decimal 数字square 正方形
   }*/
   ul{
   background: #a0a0a0;}
   ul li{
   height: 30px;list-style: none;text-indent: 1em;}
   #nav{
   width:700px;
   height:700px;
   border: 1px solid red;
   background-image:url("../resources/生成超高清壁纸.png");
   }
 /* 子选择器p1 p2 p3
 body>p{
  background:blue;
  }*/
/* 后代选择器 p包括p
 body p{
 background:red;
 }
*/
/* 相邻兄弟选择器p1>>p2
.active+p{
background:yellow;
    }*/
/*通用选择器
   选择当前向下兄弟的所有元素

.active~p{
background: green;
}
/*结构伪类选择器
*//*
ul li:first-child
{
background:red;
}
/*选中 p1 :定位到父元素，选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效!*/
/*p:nth-child(1){background: #2700ff;}*/
/*属性选择器*/
p[id]
{background:yellow;
}
p[id=first]
{background:red;
}