最最最最详细的手把手地教你修改css

sunset · 发表于 2018-4-11 20:57:35

本帖最后由 sunset 于 2018-4-22 15:41 编辑

前几天的某天下午，心血来潮想学习修改css，捣鼓了几小时后，我发布第一个作品“柯林斯2.0 阳光活力橙”。其实修改css一点都不难，学会了之后你就可以随心所欲为你心爱的词典修改出理想的样子了。心动了吗？心动就赶快行动起来吧！

提示：为了更为直观地学习，可以去看看我录的两个讲解视频。直接在css区找就能找得到。

【正文部分】

今天我想说一下怎样修改词典的css。
在之前看的几个教程里，作者都将笔墨着重于修改代码部分，我却不以为然。新手最为迷茫的不是修改代码，而是整个流程到底是怎样的。仅着重于修改代码部分只会让新手下不了手。
下面我会将我个人的体会完整地叙述下来。

sunset · 发表于 2018-4-11 20:58:24

本帖最后由 sunset 于 2018-4-11 21:10 编辑

准备材料：

1. MdictWindows版：用于获取某个词条的源代码；

2. MDX export，用于解压出MDD文件中的css文件；
3. Chrome浏览器，用于调试css代码。

sunset · 发表于 2018-4-11 20:58:56

本帖最后由 sunset 于 2018-4-12 13:00 编辑

第一步：获取某个词条的源代码。
详细过程：
·最好先在桌面上建立一个文件夹，比如我这次要修改“牛津高阶”，我就会创建一个叫“牛津”的文件夹，用于存放相关文件。
·建立好文件夹后，把mdx和对应的css文件放进去。附：有些词典的css文件并不是直接给你的，而是被压缩在对应的mdd文件里面的，因此，对于这些词典，首先要做的就是使用MDX EXPORT 获取它的css文件。该软件的操作完全是傻瓜式的，这里就不赘述了。
·解压出来的文件夹中如果有css，就把它拉到“牛津”文件夹里，要是没有css的话，那就说明这部词典使用了内嵌式css样式，无法用此方式修改。
·打开mdict，点击“词库”，加载牛津词典。查询几个单词。这几个单词的解释要比较长，因为越长说明它涵盖的样式越多，越方便修改。这里推荐几个：take，think，make，go等。查完某个单词，鼠标移到解释界面并右击，点击“查看源”，这时会显示一个txt文档。

sunset · 发表于 2018-4-11 20:59:36

本帖最后由 sunset 于 2018-4-12 13:01 编辑

第二步：处理txt文档。
·在源代码txt文件中，点击编辑——查找，输入“.css”（不包含冒号），开始查找。你会搜到几处高亮显示的“content://mdict.cn/mdd/109/oalecd8e.css”，把“oalecd8e.css”前面的部分删除。
·如果你要修改的词典文件还使用了js，那么还要搜索“.js”，在牛津里，我搜到两处：content://mdict.cn/mdd/109/jquery.js和content://mdict.cn/mdd/109/oalecd8e.js，还是像处理css那样，把content://mdict.cn/mdd/109/部分删掉，就剩下jquery.js和oalecd8e.js。
·处理完毕后，点击保存，文件名为think，文件格式为“html”（可以通过重命名改后缀的方式完成），词条源码文件依旧储存在“牛津”文件夹内。（注意，mdx，html，css三个文件一定要放在同一目录下）

sunset · 发表于 2018-4-11 21:00:55

本帖最后由 sunset 于 2018-4-12 13:04 编辑

第三步：修改css。
·打开Chrome浏览器，将第二步中得到的html文件“think.html”拖动到浏览器界面中，你就能看到这个单词在词典中的样子了（如果你第二步中的操作有误，你就不看到任何排版，只有杂乱的文字）。
·接着，按“win+F12”，打开调试窗口（有的电脑直接按F12，有的按Fn+F12）。调试窗口我们能用到的只有Elements和Sources窗口。在Elements窗口下，点击最左上角的按钮后，再去点击浏览器中所显示的词条的某个部分，在styles下会出现各种与你所点击内容样式相关的代码（这个操作贯穿修改css全程的始终）。
·如图，点击词头“think”后在styles下方出现了与词头样式相关的代码，每一个代码之前有一个框。在框中有√就说明该样式已被激活，你可以用鼠标点击这个√，这样√会消失，这个样式会取消激活。（你可以灵活地使用这个方法去试探某个样式到底是不是你想控制内容的样式）。各种css中常见的代码有：color（改颜色），font-size（改字体大小），font-family（改字体），font-weight（更改字体粗细），border（添加边框），border-radius（调整边框四角弧度）等，百度中有很多相关内容。修改的部分你多试几次就熟练了，这里不再赘述了。修改过程中，请放心大胆修改，ctrl+z可以撤销操作。
（大家都是学英语的，修改过程中遇到的那点英语是绝对能看得懂的。就算有的英语模棱两可，你也可以通过点选/取消样式前面的选择器来确定这个样式到底是干嘛用的。）

sunset · 发表于 2018-4-11 21:03:04

示范：修改颜色。

sunset · 发表于 2018-4-11 21:03:37

第四步：保存CSS。
当你修改满意后，点击sources，选中network下的css文件，并右击，点选“Save as”，保存该css。建议覆盖原css文件。（附：在修改过程中也要随时保存css，这非常重要）

第五步：查看其它单词的显示效果。
在第二步中，你处理了多个单词的html文件。将其余的几个单词的html文件拉到chrome中一一查看显示情况，发现未被修改到的样式时请继续更改。直到你认为已经没有可以修改的地方了。（修改完毕后别忘了保存）
Ok，大功告成，你可以把css放到你的设备中查看效果。发现哪里欠缺那么一点点的话，请继续微调。

修改css时，最重要的就是不能降低内容的阅读性。配色上可以发挥你的想象力，融合个人的审美，制作出个性化的css。附上一个配色网站，复制颜色代码可以精准地定位颜色。http://tool.c7sky.com/webcolor/

希望大家多多折腾，制作出美轮美奂的排版造福群众。

（本文完）