标签 表格 下的文章

Typecho设置表格样式

前言:

正如大家看到的,本博客使用R-Blog主题。这个主题风格简洁,但有些地方可能不完善,如下所示,表格的样式也太过简洁了,不仔细看都不知道这有个表格,以至于影响到阅读。作者已经好多年没有更新了,于是需要我自己想办法解决这个问题。本人在HTML与CSS方面没有任何系统的学习经验,更不懂PHP语言。本文只是对问题解决的记录,若有错漏请各位指正。

原始表格样式

开搞:

首先,我大致看了一下Typecho文件结构,文章看样子是由./var/HyperDown.php从Markdown生成的,那表格也是由它产生。而主题以文件夹形式放在./usr/themes/下面。这个结构,想来表格生成的那边不能随意改动,只能动主题文件夹里的内容。看了下主题文件夹中的内容,是一些PHP文件和一个CSS文件。

搜索引擎简单搜了一下,了解到PHP文件在服务端运行,产生HTML文档给用户的浏览器。HTML(HyperText Markup Language)是超文本标记语言,由多种通过标签定义的元素组成,表格元素由<table>标签定义。CSS(Cascading Style Sheets)中文叫层叠样式表,用所谓的样式规则来定义HTML元素如何显示,而且它是层叠的。一条CSS规则由前部的选择器和跟在后面大括号中的一条或多条声明构成,每条声明则由一个属性名和对应的组成。

如此看来,我想要修改表格显示的样式,就要改表格相关的CSS规则。我先去网上找了几位大佬们的博客快速的浏览了一番。为自己积累一些经验,顺便F12学习一下他们表格元素的某些样式对应CSS规则中什么属性。经过一番粗略的学习,我拥有了低级的审美观念,也了解了极为有限的一部分CSS属性名的作用,接下来就是学以致用了。

R-Blog主题CSS文件只有一个,结构极为简单,打开改就完了。读书破万卷,下笔也不定有神。我先将前面学到的、我认为有用的规则写出来,然后浏览器浏览实际效果,通过F12调试功能,增删改这些规则,最终再据此修改CSS文件中的规则。经过一段时间的尝试,最终我将table相关规则替换成了以下内容:

table{width:50%;border-spacing:1px;background-color: #22aaef;border: 1.5px solid #22aaef;}
table thead tr{font-size: 17px;color: #22aaef;background-color: #DDD;}
table thead tr th{padding: 4px;}
table tbody tr{background-color: #FFF;}
table tbody tr td{padding: 4px;}
table tbody tr:nth-child(2n){background-color: #e5fcfd;}

浏览器中按Ctrl+F5刷新后,表格出现了神奇的变化。最终效果如下,我感觉还是挺满意的,大家可以评论区告诉我好不好看。

修改后的表格效果

参考: