css的学习记录
2021-01-22, updated 2021-09-12
修改鼠标经过所有链接时的样式
添加下划线
css hover
a:hover{
border-bottom: 1px solid;
}
any-link
:any-link
CSS 伪类 选择器代表一个有链接锚点的元素,而不管它是否被访问过,也就是说,它会匹配每一个有 href 属性的 <a>
、<area>
或 <link>
元素。因此,它会匹配到所有的 :link
或 :visited
。
/* 选中任意匹配 :link 和 :visited 元素*/
:any-link {
color: green;
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:any-link
html文件加载css方法
-
通过link标签加载
<link rel="stylesheet" href="style.css" type="text/css">
-
通过@import方式加载
<style type="text/css"> @import url(style.css) </style>
使用
@import
方式加载会导致HTML页面加载完成之后才会去加载CSS文件,也就是说在加载CSS文件之前,页面是裸奔的,但是进入网站响应速度会更加快!
Q/A
这部分随时可能被移到其它页面
div在浏览器屏幕居中
<div style="text-align: center;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
...
</div>
最简单的dark mode
添加以下的css就可以实现最简单的深色模式
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
/* 黑暗模式下的样式代码 */
body {
background-color: rgb(13, 17, 23);
color: rgb(201, 209, 217);
}
:any-link {
color: rgb(88, 166, 255);
}
}
这种方式存在一个问题,就是只能根据系统设置来改变模式,不能用户自定义。