CSS进阶

一：伪类选择器

a:hover{
  color: red;
  background-color: #87ceee;
}
标签：hover 点击会出现转换效果
展示：

 

二：显示模式

块级显示
可以设置宽高（div)
行内显示
不可以设置宽高
大小只与内容有关(span)

div{
  width: 400px;
    height: 400px;
    background-color: #87ceee;
    display: inline-block;
}

 行内转换 display

三：继承

示例：

div{
  color: red;
  font-size: 24px;
}
a{
    color: #87ceee;
    text-decoration: none;
}

<div>
  <span>
    这是div里面的span
    继承：对文字操作的属性可继承（大小，颜色），不对文字操作的属性不可以继承（宽度，高度）
  </span>
</div>
<div>
    <a href="#">超链接(自己有颜色，就不继承：：颜色)</a>
    <h1>标题（自己有尺寸）</h1>
</div>
四：背景（主打修饰）
示例：

.backimage{
  width: 400px;
  height: 400px;
  background-color: bisque;
  /*适应大小*/
  background-size:100% 100%;
  background-image:url(CSS/2.jpg) ;
}
背景练写：

div{
  width: 400px;
  height: 400px;
  background: greenyellow url("./CSS/1.jpg") no-repeat center;
}