深入理解CSS(hover、transition、animation)

深入了解css的行高Line Height属性
附：
引入css文件的rel属性（link标签引入，还是在style里面设置）
rel各个属性值配置的意思

     Alternate -- 定义交替出现的链接 
      Stylesheet -- 定义一个外部加载的样式表 
      Start -- 通知搜索引擎,文档的开始 
      Next -- 记录文档的下一页.(浏览器可以提前加载此页) 
      Prev -- 记录文档的上一页.(定义浏览器的后退键) 
      Contents 
      Index -- 当前文档的索引 
      Glossary -- 词汇 
      Copyright -- 当前文档的版权 
      Chapter -- 当前文档的章节 
      Section -- 作为文档的一部分 
      Subsection -- 作为文档的一小部分 
      Appendix -- 定义文档的附加信息 
      Help -- 链接帮助信息 
      Bookmark -- 书签 

所以说，我们用这样的方式，引入外部的css文件时，一定不能忘记rel属性的配置。

hover

控制子元素

a是父元素， b是子元素

.a:hover .b{
}

控制兄弟元素

a 和 b 是紧挨着的兄弟元素

.a ：hover + .b{
}

a和b不是紧挨着的兄弟元素

.a :hover ~ .b{
}

过渡(transition)

无法从display:none 到 display:block 这个过程中进行过渡

动画(animation)

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长

<div class="a">

</div>
<style>
.a{
    width: 100px;
    height: 100px;
    background-color: black;
}
.a:hover{
    animation: fxp 2s;
}
@keyframes fxp {
    from{
        background-color: red;
    }
    to{
        background-color: green;
    }
}
</style>

关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

其他属性

var() 函数用于动态改变颜色

css设置公用颜色–-color，css中的引用方法var(–color)
根据 root.setAttribute('style', '–color: #e74c3c') 可修改–color的参数

<template>
	<div id="div1">var() 函数——动态改变css样式</div>
</template>

<style>
:root {
  --main-bg-color: coral;  
}
​
#div1 {
  background-color: var(--main-bg-color);
  padding: 5px;  
}
</style>

此种可以作为一种方案，作为主题切换