css的学习记录

修改鼠标经过所有链接时的样式

添加下划线

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方法

1. 通过link标签加载

   <link rel="stylesheet" href="style.css" type="text/css">
   

2. 通过@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);
  }
}

这种方式存在一个问题，就是只能根据系统设置来改变模式，不能用户自定义。