深入了解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>
此种可以作为一种方案,作为主题切换