Some CSS

CSS定义网页局部样式

WordPress下我所用主题的默认字体中英文的显示有的不搭,在不同电脑下显示差异比较大.就想改下兼容不同环境,搜了下,发现是通过CSS中的font-family 属性定义文本的字体系列.通过外观中的额外CSS可以很方便的diy.

{ font-family: PingFangSC-Light,"Microsoft Yahei-Regular","Microsoft Yahei", Helvetica, Arial, STXihei, sans-serif;
}

这样有个问题,会直接改变所有位置的字体.以前在改博客中的超链接样式时候碰到过这个问题,找到一种通过#标签来定义div来实现局部的生效的方式,但是这个我尝试很多次都失败了.我的办法是通过元素或者说block名称来限定CSS生效的地方.打开Chrome浏览器我的建站辅助工具,打开网页,右键检查,打开Elements和Styles,打开左上角的Inspect按钮.点击网页上要改css样式的位置,右侧的styles位置会定位到对应的元素的CSS样式代码. eg:

body, ul, .tooltip-inner {
    font-family: "Roboto","Helvetica","Arial",sans-serif;
}

这个CSS样式就很好理解了,前半部分就是定位的地方后半部分就是参数,当字体的名字超过两个单词时需要引号包含.我的网站改标题和正文的字体的CSS样式如下,(不同主题元素名称可能有所不同)

h1, h2, h3, h4, h5, h6 {
    font-family: PingFangSC-Semibold,"Microsoft Yahei-Regular","Microsoft Yahei", Helvetica, Arial, sans-serif;
}
body, ul, .tooltip-inner {
    font-family: PingFangSC-Light,"Microsoft Yahei-Regular","Microsoft Yahei", Helvetica, Arial, STXihei, sans-serif;
}

通过这个办法,可以DIY网页所有位置的CSS样式,比如这个终端代码块样式,这个是划水的时候看到一位博主的这个样式,觉得非常好看,通过Chrome测试了下发现是通过code、pre元素来定义的,因为我不需要点击复制的这个功能,所以在额外CSS里面设定到相应元素就OK了.代码高亮我是通过引入highlight.js实现.

CSS设定网站深色模式

通过prefers-color-scheme的语法dark设定深色模式样式,可以自适应检测访问者是否有将系统的主题色设置为亮色或者暗色.兼容Chrome和edge.

@media (prefers-color-scheme: dark) {
    :root {
        --content-color-a: #e0dfdf;
        --background-color-a: #292929;
        --background-color-b: #292929;
    }
    //option go for here
    .oneblock {
        background-color: var(--background-color-a);
    }
}

@media CSS@规则,使用它，您可以指定和应用一个媒体查询和一个CSS块.
规则集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实践是定义在根伪类 :root 下.
使用自定义属性(变量)方便调整,自定义属性名是大小写敏感的，–my-color 和 –My-color 会被认为是两个不同的自定义属性.

Mozilla

我没有学习过CSS,这些内容纯粹是一种记录,如有错误,欢迎指正,谢谢!

网站还启用了pjax，但是由于技术有限，还没有解决启用后js和css错乱的问题，所以代码高亮目前失效，会强制显示白色代码字符，评论点击就会发送成功，但是没有任何提示，刷新页面即可。毕竟音乐还是更为重要