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