9.14 增加6个常用CSS片段：调整滚动条粗细、标签样式优化、内部链接、外部链接、下划线、Dataview表格样式优化

经验分享
1

调整滚动条粗细

/*--------------------调整界面滚动条粗细--------------------*/
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
::-webkit-scrollbar {
  width: 0px!important;
}

标签样式优化


/*------------------------修改标签样式为暗红底白字------------------------*/

.tag:not(.token) {
  background-color: #BC1E21;
  border: none;
  color: white;
  font-size:  ;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: -5px 0px;
  cursor: pointer;
  border-radius: 14px;
}
.tag:not(.token):hover {
  color: white;
  background-color: #002C87;
}

/*------------------------修改标签样式为红底白字------------------------*/

内部链接优化

/*---------------------------内部链接样式优化---------------------------------------------*/

.cm-hmd-internal-link .cm-underline {
	color:#BC1E21 !important;	
	font-weight: bold;
}

/* 修改内部链接的样式 */
.internal-link {
	color:#BC1E21 !important;/*字体颜色*/
	font-weight: bold;/*字重*/
	text-decoration: none !important;/*下划线` */
}

/*给内部链接加图标*/
.internal-link::after {
/* content: "🍉";*/
}

外部链接

/*---------------------------外部链接样式优化---------------------------------------------*/
/* 外部链接取消右上角的链接图标和下划线 */
.external-link {
  background-image: none !important;/*右上角的链接图标*/
  text-decoration: none;/*下划线*/
}

/* 外部链接添加图标图标 */
.external-link::after {
  --its: "its";
  content: "🌞";/*给外部链接加图标*/
}

下划线

/*---------------------------下划线---------------------------------------------*/
u {
  text-decoration: none;
  border-bottom: 2.8px solid #906214;
 }

Dataview 表格显示优化

/* Flat blue boring corporate table*/

.flatBlue table {
    border-collapse: collapse;
    font-size: 1em;/*表头字体大小*/
    font-weight: bold;
    font-family: sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);    
}
.flatBlue thead {
	background-color: #F6F3E9;
	border: 2px solid #000000;
	color: #000000;
}
.flatBlue thead tr th {
	/*border-right: 1px solid #F6F3E9;*/
	border-right: 1px solid #BC1E21;
	padding: 9px 20px 9px 10px;
	font-weight: 400;
	font-size: 1em;	
	text-shadow: 0 1px 0 rgba(25.5, 25.5, 25.5, 0.4);
}
.flatBlue table > thead > tr > th {
	border: 5px solid #F6F3E9;/*表头边框*/
}
.flatBlue td {
    padding: 2px 15px 1px 10px; 
    border-color: #F6F3E9;    
}
.flatBlue tbody td:first-of-type {
    border-left: 2px solid #F6F3E9;/*左外边框*/
}
.flatBlue tbody tr:nth-of-type(even) {
    background-color: #F6F3E9;/*偶数行背景颜色*/
}
.flatBlue tbody tr:last-of-type {
    border-bottom: 3px solid #F6F3E9;/*下外边框*/
}
.flatBlue tbody tr:first-of-type {
    border-top: 3px solid #F6F3E9;
}
.flatBlue tbody tr:hover td {
	background-color: #E4E1D8;
}
/*原文链接：https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084*/
2

小白，求介绍怎么使用这些代码块～

3

PKMer_Obsidian 的 CSS 代码片段

4

求一个有颜色的下划线CSS，就是这个求助贴：求有颜色的下划线CSS（非常好的文字标注方法）

5

您好，这种情况如何书写内部链接标题的颜色 - 疑问解答