css的学习记录

2021-01-22, updated 2021-09-12

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

添加下划线

css hover

1
2
3

a:hover{
  border-bottom: 1px solid;
}

:any-link CSS 伪类 选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。

1
2
3
4

/* 选中任意匹配 :link 和 :visited 元素*/
:any-link {
  color: green;
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:any-link

html文件加载css方法

  1. 通过link标签加载

    1

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

  2. 通过@import方式加载

    1
2
3

    <style type="text/css">
    @import url(style.css)
</style>

    使用@import方式加载会导致HTML页面加载完成之后才会去加载CSS文件，也就是说在加载CSS文件之前，页面是裸奔的，但是进入网站响应速度会更加快！

Q/A

这部分随时可能被移到其它页面

div在浏览器屏幕居中

1
2
3

<div style="text-align: center;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
  ...
</div>

最简单的dark mode

添加以下的css就可以实现最简单的深色模式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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);
  }
}

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

words: 436 tags: css