NotionNext用配置调整样式

前言

效果

步骤介绍

1.在你的网站上定位出需要改动的元素源码，并获得此元素的selector

💡

selector指的是选择器，它是一段类似地理坐标的脚本，告诉CSS要将样式运用在哪个元素。 例如：亚洲→中国→广东→深圳→福田区 这是一个地理选择器。在网页中根据页面的标签元素： #header > .clazzname > div 这是一个CSS selector。 关于css选择器感兴趣的话可以通过以下文章了解：

CSS 选择器 | 菜鸟教程

CSS 选择器 CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。 CSS 选择器用于选择你想要的元素的样式的模式。 下列表格中的 “CSS” 列表示在 CSS 版本的属性定义，CSS1、CSS2 和 CSS3 是层叠样式表（Cascading Style Sheets）的不同版本，每个版本引入了新的特性和功能，以改进网页样式的控制和设计。 常见的 CSS 选择器 下是一些常见的 CSS 选择器： 元..

https://www.runoob.com/cssref/css-selectors.html

操作演示

一、获取要修改元素的Selector（选择器）

1. 用浏览器打开您已经部署好的网站
例如我打开了自己的网站 https://blog.tangly1024.com/

2. 按下键盘上的F12打开控制台



💡
控制台右上角的三个点可以设置控制台停靠的位置，您可以设置靠在不同的位置，防止遮挡元素。

3. 点击控制台左上角的选择器，进入选择模式



进入选择器模式后，此按钮变成蓝色，并且您鼠标指向的元素都会被一个蓝色遮罩高亮突出，同时会有一个悬浮框展示当前元素的信息。

4. 在源代码中定位此元素
单击目标对象后，控制台中该对象的源代码自动被蓝色选中，这就是我们要定位的代码元素



💡
单击后您将退出选择器模式

5. 如何获得selector？
右键点击被蓝色选中的源代码，并依次点击 复制→ 复制selector 即可。



💡
此时你的系统剪贴板内容如下：
#header > div > div.font-black.text-4xl.md\:text-5xl.shadow-text
课外阅读：这行命令相当于一个地理位置坐标，它定位的是 id为header的元素 下的标签为div元素下的class为.font-black.text-4xl.md\:text-5xl.shadow-text 的div元素。

二、编写css样式

1. 我们的目标是把字体放大，并且颜色调成红色，该怎么写CSS呢？



这里示例的元素是p，意思把网页中所有的p元素都调整成大字体和红色。可以推断出我们的CSS写法应该是：
⚠️
输入css代码时，请提前将输入法切换成英文。防止中文输入法全角标点和空格导致的代码编译异常。

2. 在Notion中编辑
打开CONFIG配置中心，添加一个配置GLOBAL_CSS，内容就是上面的CSS样式。



⚠️

注意： 配置的启用要打上钩，否则不生效。 如果要配置多个不同的样式，可以换行后继续粘贴内容



1. 刷新网页预览效果
然后根据您的需求，再一点点调试即可

最后