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

sunset

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

3 z, H$ K: s5 j# V' f; x. t! ]提示：为了更为直观地学习，可以去看看我录的两个讲解视频。直接在css区找就能找得到。
5 n1 y. P) I/ I% x5 k8 u; f; o! n
  T  V) a, b: q) v【正文部分】

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

0 K5 b) |+ s5 G- _

sunset

准备材料：
# S8 ^$ {" z8 c: b

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

2. MDX export，用于解压出MDD文件中的css文件；
) d) `$ }2 \; p, {4 `3. Chrome浏览器，用于调试css代码。
+ v' h/ A# O" a/ a  J

sunset

+ a9 i' h: K/ g1 G0 f- l
第一步：获取某个词条的源代码。
8 Q' G. r1 k8 Y, m# t7 G  g详细过程：
·最好先在桌面上建立一个文件夹，比如我这次要修改“牛津高阶”，我就会创建一个叫“牛津”的文件夹，用于存放相关文件。
5 h3 R3 ~/ E8 ]* k0 Z·建立好文件夹后，把mdx和对应的css文件放进去。附：有些词典的css文件并不是直接给你的，而是被压缩在对应的mdd文件里面的，因此，对于这些词典，首先要做的就是使用MDX EXPORT 获取它的css文件。该软件的操作完全是傻瓜式的，这里就不赘述了。
·解压出来的文件夹中如果有css，就把它拉到“牛津”文件夹里，要是没有css的话，那就说明这部词典使用了内嵌式css样式，无法用此方式修改。
·打开mdict，点击“词库”，加载牛津词典。查询几个单词。这几个单词的解释要比较长，因为越长说明它涵盖的样式越多，越方便修改。这里推荐几个：take，think，make，go等。查完某个单词，鼠标移到解释界面并右击，点击“查看源”，这时会显示一个txt文档。
: K! G( \  ?0 O# u. h! W' P

sunset

3 f' Y. ~) `. I3 g0 M
3 E  ?1 \0 J! U/ `第二步：处理txt文档。
·在源代码txt文件中，点击编辑——查找，输入“.css”（不包含冒号），开始查找。你会搜到几处高亮显示的“content://mdict.cn/mdd/109/oalecd8e.css”，把“oalecd8e.css”前面的部分删除。
  x2 `7 \) c1 c0 z$ y·如果你要修改的词典文件还使用了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

5 f# s# `. T% {0 D第三步：修改css。
·打开Chrome浏览器，将第二步中得到的html文件“think.html”拖动到浏览器界面中，你就能看到这个单词在词典中的样子了（如果你第二步中的操作有误，你就不看到任何排版，只有杂乱的文字）。
  K8 n. G3 R6 L( L·接着，按“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

示范：修改颜色。
& q" H) p0 F" k) P

sunset

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

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


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

) v- {( [& i' E+ W) j* `$ y希望大家多多折腾，制作出美轮美奂的排版造福群众。

$ Z, [$ S* {; q（本文完）

09rmb

哇，这个厉害啊，干货满满

09rmb

讲真啊，应该给楼主加个精啊，这段时间做了这么多作品了。

kyletruman

楼主可以单独开新帖，详细讲讲怎么把TXT文本插入css和js，发帖之后，我可以给您+6浮云+200米(无论是哪一位坛友，发了我说的这个帖子，可以私信本人，我再加分)

afreeelf

sunset 发表于 2018-4-11 20:58
1 f( n8 Y0 f4 W1 D' n1 [+ E准备材料：
1. MdictWindows版：用于获取某个词条的源代码；2. MDX export，用于解压出MDD文件中的css文件 ...

对了，我发现若是安卓上修改css，用深蓝词典在从mdd中提取css和js更方便，然后用它的查看源码功能，也不错

simonfire

afreeelf 发表于 2018-4-11 21:28
; B# c# [' K4 J0 \. D! Z& K对了，我发现若是安卓上修改css，用深蓝词典在从mdd中提取css和js更方便，然后用它的查看源码功能，也不 ...

对，而且深蓝得到的源码才是真正的源码，就加了两个class（好像），电脑端的GD和mdict得到的源码都是渲染后的。所以我一般都是直接解包mdx，从里边复制一个词条做成网页看效果的。

GL_n

@sunset请问有没有比较好的css入门教程可以推荐？书，notes，或者paper什么的都可以。

sunset

GL_n 发表于 2018-4-12 02:46
@sunset请问有没有比较好的css入门教程可以推荐？书，notes，或者paper什么的都可以。 ...

4 }: R# V8 o4 o1 {) W- |3 Q7 h* w 苏沈小雨 css2.0 手册

Georg_Lz

楼主的讲解非常不错，sehr sehr sehr gut

GL_n

sunset 发表于 2018-4-12 12:54
苏沈小雨 css2.0 手册

1 \( h0 \2 u' X% L/ ^非常感谢你的推荐。

萧内网

赞一个，多谢楼主的分享

eudict

我要试试去 谢谢大神

kuye1320

感谢分享。这个是技术贴

大头面人物

感谢坛友分享心得体会!

rylandu

小白学习了，谢谢您

Merrycal

楼主我想修改的词典在mdict出现脚本错误怎么办，第一步获取源代码都不能进行

sunset

Merrycal 发表于 2018-4-22 13:30
楼主我想修改的词典在mdict出现脚本错误怎么办，第一步获取源代码都不能进行 ...

) e7 |) o  L) f2 e! J9 h& n直接点“是”就行了。建议你结合我出的两个视频来学习，效果更佳

Merrycal

我刚刚下载了最新版的mdict，问题解决了，谢谢楼主

英格

持续关注，值得各位同好仔细研究！