什么是markdown什么是HTML什么是CSS
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。obsidian使用的是扩展的markdown格式。
超文本标记语言(HyperText Markup Language,HTML)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。我们熟悉的网页都是由HTML构成的。以下列举了几种markdown转换为HTML的对应格式:
层叠样式表(Cascading Style Sheet,CSS)是用于控制网页样式的标记性语言。在obsidian中,markdown被解析成HTML,因此需要使用CSS修改其显示样式。 CSS类似于Microsoft Office Word中的“样式”功能。
obsidian的CSS存放位置在笔记库文件夹下的和这两个文件夹。主要放置主题CSS文件,而主要放置CSS片段。
CSS基本使用方法
基础语法变量编辑软件准备
CSS是定义HTML中特定元素样式的一组规则,比如“我希望页面中的一级标题的红色的字”,对应的CSS代码如下:
语法由一个 起头。 它"选择"了我们将要用来添加样式的 HTML 元素。 在这个例子中我们为一级标题(主标题)添加样式。
接着输入一对大括号{ }。 在大括号内部定义一个或多个形式为 的 声明。每个声明都指定了我们所选择元素的一个属性,之后跟一个我们想赋给这个属性的值。冒号之前是属性,冒号之后是值。不同的 CSS 属性对应不同的合法值。
CSS选择器有如下几个常见的类型: - 标签选择器 - 类选择器 - id选择器 - 分组选择器 - 后代选择器 - 父子选择器 - 兄弟选择器 - 属性选择器 - 根据状态确定样式
通过HTML标签进行选择,比如等标签。
通过标签的class类进行选择,比如等类。
通过标签的id进行选择,比如等id。obsidian中貌似用不到id选择器(?待确认)
选择器可以一次选择多种元素设置相同的样式,少写了很多代码。不同选择器使用逗号分隔。
又称为包含选择器,选择某个标签的所有后代以设置样式,比如div内的ul内的li元素,每一层选择器之间使用空格分隔
类似于后代选择器,但是有点不同。如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用父子元素选择器。
也叫关联选择器,用来选择紧挨着的元素的选择器,比如希望选择h1元素下面第一个段落p,而不选择第二个段落p以后的元素。
通过属性(如name属性)进行选择以设置相同的样式
对于链接可根据它的不同状态分别设置不同的样式,如是否是未访问的、访问过的、被鼠标悬停的等状态。
对于重复使用的属性值,可以将其设置成变量,便于统一修改,不必一遍又一遍地复制和粘贴相同的属性值。此外,采用合理的变量名,能让其他人一眼就能识别该属性值的作用。如和
本地编辑CSS代码的软件推荐使用vscode
为了方便调试,按打开chrome调试工具如下图所示
点击该按钮后,鼠标移动到你想修改的对象上就可以查看该元素的CSS属性值,不仅可以看到正在生效的属性,还可以看到被覆盖掉的属性值。 使用vscode编辑css代码,保存后自动生效,记得在obsidian设置“外观”中选择你所编辑的主题。
下面开始实战讲解。由于目前obsidian还未做到所见即所得,窗口分为编辑模式与预览模式,因此CSS样式也要分别为这个两个不同的模型写代码。编辑模式对应类,以及缩写的等类。预览模式对应。下面针对两种模式分别进行讲解。
标题代表第x级标题。
引用文本
列表,其中第x级标题为
具体分别指定有序列表和无序列表使用和
链接
斜体加粗
标题代表第x级标题。
引用文本
列表,其中第x级标题为
具体分别指定有序列表和无序列表使用和
链接
斜体加粗
字体字号颜色背景颜色缩进行距页面宽度
字体分为本地字体和网络字体。注意:一般字体都需要收费,自己个人免费用没事,一旦涉及商业用途需要收费。 将网络上的字体下载并安装后,直接使用字体的名字即可,可同时设置多个字体,系统从最左边开始使用,找不到该字体会顺延至下一个字体。
也可以根据网址引用网络字体
字号有很多种单位:px像素,pt磅和em相对字体大小
找到你想修改的那部分元素,修改它的color属性值。
背景颜色同理,
或者修改color相关的变量
修改text-indent属性即可。 编辑模式
预览模式
修改line-height属性即可
分别修改编辑模式和预览模式的max-width属性。obsidian默认是700px
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery